Image Compression in Adobe Animate for HTML5

Hey, in this video were going to look at image compression. Now by default adobe animate isn’t very good at it. So were 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 oh, lets go and use Photoshop they’ve got amazing image compression. Now it kind of does, it does for jpeg, definitely, but when it comes to png’s, it doesn’t so were going to have to use another third party.

So what were going to do is we’re going to just throw in something here. New document, I'm going to save it, there we go, and I'm going to bring in two images, a jpeg and a png, these are the two files you're going to be using when you're doing banner ads, so I'm going to go import to stage, ill bring in my suv, and the reason this guy is a png, if you checked out the format when I was importing it, its because it needs this transparency because I want to see stuff behind it. As a jpeg, lets go find a jpeg, lets go import, well use maybe image slideshow, well use hipsters. These guys, I've used a jpeg because there's no transparency, it didn’t need transparency around any of these things because it this big block. And jpegs get a lot smaller than pngs, the only reason we have to use pngs is because of transparency’s. Jpegs don’t have it. So lets go and do a really simple export, if I go file, publish, what happens is, check it out in here, is that, what happens by default weirdly is that when you export you get your JavaScript, you get your html and you can an images folder, in this images folder, is this thing which is a bit weird. So there's a png, and there's this json file, this json file is required to make this spritesheet work, don’t worry about it. Its going to disappear soon, I think its on the next build, they're going to remove this json. But anyway, go to png, if I open it up here, can you see its actually combined the two. Its put the png and the jpeg together in a single spritesheet. They do this, is kind of weird, you don’t see this is as a user or an operator of adobe animate. What happens though in the code is that is will, say when the suv slides in, it'll mask out this top part with the hipsters. And when the hipsters are required in the background it'll mask out the car. So you're kind of just using one image, to have all the different images that you're using on this document, if you use 50 images, you'll have this spritesheet with 50 images all stuck together.

And what happens is that combination helps keep the code small and the file size down. It has a few things that are a bit problematic because I know pngs can go reasonably small but jpegs can get heaps smaller in terms of file size but its combined them both into pngs, so what I'm going to do is delete these guys. Go into my publish settings and I'm just going to show you, if I go to spritesheet, its combining them all into a png, I'm going to click both, what that means its going to do is its going to make one spritesheet for the pngs and one for the jpegs and somehow magically it knows whos who. And because there's not more than one jpeg it hasn’t made that weird spritesheet. So I've just got a png and I 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 and that’ll be used in the file.

Now if I use more than one, look what happens. I’ll bring in the phone and ill bring in another suv, or another car, bring in the utility vehicle. And I do the same thing, I'm going to go to publish, I should now get a spritesheet because these guys here are binned, 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 going to zip these up and they're going to be included in your file size so make sure they're not in there and I've just got these guys.

So I've got my png and my jpeg and now there are spritesheet because there are two pngs and there are two jpegs. Alright, so say you get to this point now and you're like great, I want to get them smaller. The jpeg you can 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. And the png, don’t use in Photoshop tog et smaller. Were going to use this thing here called tiny png.

Tiny png, I'm not sure how much I love the thing it does or what the panda does during the operation. But go to tinypng.com, it works for jpegs and pngs fine. And watch this, I can just grab these two, you and you and I'm just going to dump them in here, and he raised his hands, I'm so happy panda. And you can see its lowered one of them by 24% and one by 16%. And lets download and compare them. So ill stick this one on the desktop and you guys, ill put it in my images folder. I'm going to call this one, b. I should override it, but I just want to compare the two to show you.

You can do things where you download them all, there is a plug in or Photoshop if you want to go through and, there it is Photoshop plug in, if you want to install that. Because the problem with this, it does 20 images per session. So I just end up using the website, I should download the plug in. so there are my two to compare. So what I'm going to do is there's the original version and there is the jpeg.

I'm just going to look between you and you in terms of image quality. The stupid json things in the middle there. And what you'll find is that there's very little difference. I'm pretty pedantic about this sort of stuff so I probably use Photoshop for my jpegs. There's no reason why you can’t do this and you can say I've saved a chunk. If your file size needs to be 150KB, saving 5KB is huge and pngs get even bigger. So it started life as 29 and this one now is 21. So there can be bigger ones, there can be 70, I've done lots of stuff where it says it saved 98% or something crazy. So make sure when it does cough out your images, before you go out is that you go through and sample them down tot eh lowest quality size.

So what were going to do now, is delete the original ones. We need to make sure the names are perfect, otherwise the code wont match up right. So we've only 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 its going to override those images every time. So you’ve got to make sure when you are, you do initial publish and this can be half way through the project or it can be the end then you wont have to worry about it but hit publish, it produces the images and then you do your image optimization then go into settings and just make sure you do this, that says export image assets, just turn that off for now. when you hit publish you might have updated the code, as in you might have changed the easing and you might have changed some frames but I can hit publish now and it'll re-export the html and JavaScript but its not going to go and override those images for me. So that can be a bit of a pain because then you have to go and do it again through tiny png. So just make sure when you are doing those images, that’s the way you work.

The last thing to talk about is when I'm exporting/importing some of those things from illustrator. If I go to file, place and I bring in one of my aliens, I bring in the non alien frog and I export and I hit publish, I'm going to override them even though I said don’t do it, I'm okay with this. So if I go to export image assets and I go publish, great, you'll notice that even though I said that, there is no frog appearing in any of these there's no frog in here, no no where. It’s because this thing is vector, if I go into it, and I start looking at this thing. What you’ll notice is its kind of like parts of a drawing like you would do with nay of these tools here and these don’t get exported as images, they're just shapes as part of it. They get mushed into the JavaScript, so the cool thing about them is that the file size are always very small and they don’t get included in that image compression. Just so you know if you're using lots of illustrator files or vector files that they're not going to be included in your images folder.

Alright, that’s it for image compression, lets move on to the next video.