Hey, in this video we're gonna look at image compression. Now by default, Adobe Animate isn't very good at it,  so we are going to use it for what it is good for  and then use a third party bit of software  to make the image as small as we can. Now you might think, ah, let's go and use Photoshop. It's got amazing image compression. Now it kind of does, it does for JPEGs definitely. But in terms of PNGs, it doesn't.

So we're gonna have to use another third party. So what we're gonna do is we're gonna just  throw in something here. New document. I'm gonna save it. Um, there we go. And I am gonna bring in two images, a jpeg and a p and g.

These are the two files you're gonna be using when  you're doing banner ads. So I'm gonna go import to stage, I'll bring in my  SUV, okay? And the reason, uh, this guy was a p  and g, if you checked out the format when I was importing  it, it's 'cause it needs this transparency  'cause I wanna see stuff behind it. Okay? As a jp, let's go find a jp. Let's import.

We'll use maybe the image slideshow. Guys,  We use the hipsters. Okay, these guys, um, I've used the JP  because there's no transparency. Didn't need transparency around any of these things  'cause it's one that's big, big block  and JPEGs get a lot smaller than p and Gs. The only reason we have to use p gs is 'cause transparency. JPEGs don't have it.

So let's go  and do a real kind of simple export. If I go file, uh, but publish, okay? What happens is check it in here is that actually  that was from an earlier example I was playing around with. What happens by default weirdly,  is you get these two, uh, sorry. When you export, you get your JavaScript,  you get your H two L and there's your images folder. In this images folder is this thing, which is a bit weird.

Okay? So there's a P and g and there's this JSON file. This JSON file, um, is required to kind of make this,  um, uh, spreadsheet work. Um, don't worry about it, it's gonna disappear soon. I think it's on the next build. They're gonna remove this JSON.

But anyway, got a p and g. If I open it up here, can you see it's actually combined the  two, let's put the p and g and the JPEG together, okay? In the single spreadsheet they do this, it, it's kind  of weird, like you don't see this as a user  or an operator of Adobe animate. What happens though in the code is that it will,  when the say the, the SUV slides in, okay,  it'll mask out this top part with the hipsters. And when the hipsters are required in the background, um,  they'll mask out the car. So you're kind of just using one, one image  to have all the different images  that you're using on this document.

So you, if you've used 50 images, you'll have a spreadsheet  with 50 images all stuck together. And what happens is that kind of combination helps, uh,  keep the um, code small and the file size down. It has a few things that are a bit problematic though  because I know P and gs can go reasonably small,  but jps they can get heaps smaller in terms of file size,  but it's combined them both into P and G. So what I'm gonna do is delete these guys. Goodbye. Go into my publish settings And I'm just gonna show you,  if I go a spreadsheet,  it's c combining them all into a p and g.

I'm gonna click both. What that means,  it's gonna do is it's gonna make one spreadsheet  for the PNGs and one for the JPEGs  and somehow magically it knows, okay? Which are who's a who. And  because there's not more than one jpeg,  it hasn't made that weird spreadsheet. Okay? So I've just got a p and g and I've just got a jpeg  and now what I can do is go off and do these separately  and lower the compression  or play around with the file size of these separately, okay?

And um, yeah, that'll be used in the file. Now if I use more than one, look what happens. If I bring in,  I'll bring in the phone and I'll bring in another SUV  or another car, bring in the  utility vehicle, okay? And I do the same thing. I'm gonna go to publish. I should now get a spreadsheet  because these guys here a bin.

Not make sure you don't include those. Those things there are left from the last time I published. And that's the bad thing is you're gonna zip these up  and they're gonna include in your file size. So make sure they're not in there. And I've just got these guys, okay, so I've got my p and g  and my jpeg and now there are spreadsheets  because there was two PNGs and there are two JPEGs. All right, so say you get to this point now  and you're like, great, I wanna get 'em smaller.

The JP you could open up if you've got Photoshop skills  and use the export as feature and go through  and lower the compression down to get it nice and small. Um, and the p and g don't use in Photoshop to get smaller. We're gonna use this thing here called tiny p and g. Tiny p and g. I'm not sure how much I love that thing. It does or that what the panda does during the operation.

Um, but go to tiny tony png.com, it works for JPEGs  and p g's. Fine. And watch this. I can just grab these two, you  and you And I'm just gonna dump them in here. Brushing and he raves his hands. I'm so happy Panda.

And you can see it's lowered the p and g. Actually I can't tell who's who. It's lowered one of them  by 24% and one by 16%. And let's download and compare them. So let's include this one. I'll stick it on the desktop  and to you guys, I put into my images  folder here we up.

I'm gonna call this one. Um, what was it called? This is jp, it's gonna call this one B,  I should override it, but I just wanna  compare the two to show you  B. This is the PG one. Great. You can though, um, do things where you download them all.

There is a plugin for Photoshop if you wanna go through. And um, there it is, Photoshop plugin. Okay? If you wanna install that. Um, and 'cause the problem with this,  it does 20 images per session. So I just end up using the website.

I should download the plugin. Okay? So there are my two to compare. So what I'm gonna do is there's the, uh,  jpeg version and there is the, uh, sorry, there's the  original version and there's the jp. I'm just gonna kind of look between you  and you in terms of image quality,  the stupid Jason things in the middle there, okay? And what you'll find is that there's very little difference.

Okay? I'm pretty pedantic about this sort of stuff,  so I probably will use Photoshop for my JPEGs. There's no reason why you can't do this. And you can see I've saved a chunk. If your file size needs to be 150 kilobytes saving, um,  you know, uh, what have we saved for five? Okay, five kilobytes is huge and p  and g's get even bigger, which this.

So it started life as uh, 29 and this one now is 21. So it can be get, um, there could be bigger ones. There can be like 70. I've done lots of stuff  where it says it's, it's been saved 98% and something crazy. Okay? So make sure when it does cough out your images  before you go out is that you go through  and sample them down to the lowest quality size.

So we're gonna do now is we're gonna delete the ones. So this is the original one. That's the original one. Goodbye. We need to make sure the names are perfect,  otherwise the code won't match up, right? And so we've only kind of done half of it.

So we've gone through, we've sampled these ones down. Nice. The problem now is if I go  and hit publish again, now it's gonna  override those images every time. So you gotta make sure when you are,  you do your initial publish. Okay? And this could be halfway through the project  or it could be the end.

Then you won't have to worry about it,  but hit publish, it produces the images  and then you um, do your image optimization. Then go into settings and just make sure you do this. It says export image assets. Just turn that off from now. When it hit publish, you might have updated the code as in  you might change the easing  and you might have changed some frames and stuff,  but I can hit publish now. It'll re-export the, uh, H TM L and the JavaScript,  but it's not gonna go and override those images for me.

Okay? So that can be a bit of a pain  'cause then you have to go and do it again  through tiny p and g. So just make sure when you are doing those images,  yeah, that's the way you work. The last thing to talk about is when I'm exporting, uh,  importing some of those things from Illustrator. If I go to file place  and I bring in one of my aliens, where are you dudes? Okay, I bring in the non alien frog.

Okay? And I export  and I have published, I'm gonna override them  even though I said don't do it. Okay, I'm okay with this. So if I go to export image assets and I have publish, great. Um, you'll notice that even though I said  that there is no frog appearing on any of these, right? Yeah.

Okay. There's no frog in here. No nowhere. Okay? Because it's because that this thing is Victor  and if I go into it, it's, and I go into it, okay? And I start looking at this thing, what you'll notice is  that it's kind of like parts of a drawing like you would do  with, um, uh, with any of these tools here.

And these don't get exported as images  that just kinda shapes as part of it. They get mushed into the JavaScript, okay? So, um, the cool thing about them is  that the file size are always very small  and they don't get included in that image compression. Um, so yeah, just so you know, if you're using lots  of Illustrator files or vector files,  then they're not gonna be included in your images folder. Alright, that's it for image compression. Let's move on to the next video.