Python Web Apps that Fly with CDNs Transcripts
Chapter: Integrating Static Content
Lecture: Smaller images are still better
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
CDNs are fast, but it's faster still if you ship small images over a fast network rather than large images over a fast network.
0:10
I have two recommendations for you. On the CSS, JavaScript side, bundling and minification are still relevant here. That always helps.
0:21
On the image size, one, choose a more modern format. So PNGs are great. They're really, really high resolution.
0:29
But here's the screenshot that I had on part of the slides earlier, and it was 1.5 megabytes as a PNG, and it's only 1200 by 800.
0:39
That's not very efficient. I exported it as a JPEG, which is common on the web for stuff that can be lossless.
0:47
It doesn't have to be super precise lines and things like that, like this image. And it went way, way down to 342K. That was pretty good.
0:57
But for quite a while now, actually, there's been a new format called WebP and a video
1:03
equivalent called WebM that Google championed, but all the browsers support it these days called WebP.
1:10
And exporting this as WebP gave it 208 kilobytes. So that's basically 50% better than even JPEG.
1:19
And there's a lossless variant that would be probably better than the PNG. So choose good formats.
1:26
The other thing that you probably haven't had a lot of experience with but is super
1:31
easy, takes a little while but it's super easy to do, is to minify your images like you would your JavaScript.
1:39
There's different tools you can use for this. There's one called ImageOptim. Now this is only a Mac app but it links to a bunch of tools.
1:48
It's basically a front end to a bunch of open source tools. which is open source itself, that can be run across your image.
1:58
So what it'll do is it'll do things like scrub out EXIF information. It'll say, yeah, you're using some really high color palette here, but in fact,
2:09
you only have four colors. We can completely take that huge color palette and super precise data out and replace it with like,
2:17
this one's green and that's black, you're done. Right, and it will do this with 100% lossless transformations. There is a way to let it be lossy,
2:27
but by default, it will just take all the stuff that has no perceived difference to it, and it'll take that out. So really, really cool.
2:37
The way you use it is you go to your static folder or even just the top root of your website and just drop it on the folder. It'll traverse everything,
2:48
look for all of the PNGs, the SVGs, the JPEGs, etcetera, and it'll minify all of those in a lossless way. So really, really awesome.
2:57
If you've got a website already, maybe make a copy real quick the first time you play with this, and then throw it in here and see what happens.
3:05
It gives you this little report, like here it said it saved 41% on one of the files. I've had huge success with this,
3:12
really bringing like 30, 40% of the size out of my images. So it's great. It doesn't work on WebP. I think WebP already, the format itself,
3:22
brings these optimizations into it. But many of the traditional formats, JPEG, PNG, and so on, give it a try. It'll be a lot faster.
3:31
'Cause serving smaller files over the same fast network is only gonna be faster, right?