Do you build websites for a living?
Then you already know what 80% of the work looks like. 👍
Let’s talk about the final 20%! Let’s make your site fast. Ridiculously fast! 🔥
This is a thread 🧵about optimizing images. You can do all of this today! ⬇️
Then you already know what 80% of the work looks like. 👍
Let’s talk about the final 20%! Let’s make your site fast. Ridiculously fast! 🔥
This is a thread 🧵about optimizing images. You can do all of this today! ⬇️
1. Let’s start by serving images with the correct dimensions.
Don’t just rely on resizing images in your code. Instead, make sure you create them with the appropriate size for the site.
If you are displaying an image at 500x500, don’t serve an 800x800 image file. Resize it.
Don’t just rely on resizing images in your code. Instead, make sure you create them with the appropriate size for the site.
If you are displaying an image at 500x500, don’t serve an 800x800 image file. Resize it.
2. When dealing with multiple responsive states, serve responsive images.
Don’t serve a desktop-sized image to a mobile browser. Serve the appropriate image to the appropriate browser.
Check The <img> tag's src, srcset, and sizes attributes.
Don’t serve a desktop-sized image to a mobile browser. Serve the appropriate image to the appropriate browser.
Check The <img> tag's src, srcset, and sizes attributes.
3. Make sure you use the correct image format.
Each image format has its own characteristics and trade-offs.
▫️SVG files are small and scale well.
▫️PNG files aren’t loosely compressed and support transparency.
▫️JPEG files will give you smaller sizes.
▫️Check WebP!
Each image format has its own characteristics and trade-offs.
▫️SVG files are small and scale well.
▫️PNG files aren’t loosely compressed and support transparency.
▫️JPEG files will give you smaller sizes.
▫️Check WebP!
4. Compress your images.
Image files usually contain a lot of unnecessary metadata. Make sure you compress them to reduce their file size.
You can also compress images with a lossy filter. This will eliminate some pixels but images will load much faster.
🔨 Check imagemin.
Image files usually contain a lot of unnecessary metadata. Make sure you compress them to reduce their file size.
You can also compress images with a lossy filter. This will eliminate some pixels but images will load much faster.
🔨 Check imagemin.
5. GIF files are huge! You are usually better off replacing them with a video.
Take your GIF file and convert it into a video file using FFmpeg 🔨. Then:
<video autoplay loop muted playsinline>
<source src=“funny.mp4” type=“video/mp4”>
</video>
Now we are talking!
Take your GIF file and convert it into a video file using FFmpeg 🔨. Then:
<video autoplay loop muted playsinline>
<source src=“funny.mp4” type=“video/mp4”>
</video>
Now we are talking!
6. Use Content Delivery Networks (CDN) to serve your images.
A CDN specializes in transforming, optimizing, and delivering images.
They can dramatically reduce the time it takes to serve your images (up to 80%!)
A CDN specializes in transforming, optimizing, and delivering images.
They can dramatically reduce the time it takes to serve your images (up to 80%!)
7. Look into the WebP image format.
WebP images can replace JPEG and PNG images with up to 35% reduction in size!
Here you can see the browsers that currently support WebP: caniuse.com/#search=webp.
(Spoiler: all major versions do!)
WebP images can replace JPEG and PNG images with up to 35% reduction in size!
Here you can see the browsers that currently support WebP: caniuse.com/#search=webp.
(Spoiler: all major versions do!)
8. Use fewer images.
Images that don’t exist load really fast!
It’s always worth asking whether you really need *that* image. (Sometimes you can replace images with clever CSS.)
Make every image fight for its place, and remember that fast is usually better than pretty.
Images that don’t exist load really fast!
It’s always worth asking whether you really need *that* image. (Sometimes you can replace images with clever CSS.)
Make every image fight for its place, and remember that fast is usually better than pretty.
Do these and you'll be blown away by how fast your site will load!
Check Lighthouse for a tool that will help a lot: developers.google.com/web/tools/ligh…
If you want to learn more about optimizing your images and making your websites load faster, take a look at:
web.dev/fast/
Check Lighthouse for a tool that will help a lot: developers.google.com/web/tools/ligh…
If you want to learn more about optimizing your images and making your websites load faster, take a look at:
web.dev/fast/
And now let's go and optimize that JavaScript code!
