Animate - HTML5 Banner Advertising in Adobe Animate.
Daniel Walter Scott || VIDEO: 45 of 53
Upon completing this tutorial, you'll be able to reduce the size of images that you want to use so that your file size is smaller. I'll show you the best place to reduce you image size as Adobe Animate doesn't do a great job of it.
You need to be a member to view comments.
Join today. Cancel any time.Sign Up
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.
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.
Alright, that’s it for image compression, lets move on to the next video.