Image Optimization
What is the best way to optimize an image to boost a page load time?
10 Replies
- Use
.webp extension instead of .jpg, .png etc.
- Compress them (which means you reduce file size but quality stays almost identical). You can use this website to compress .webp images.
- Use width and height attributes in you <img> tags.
- Use lazy loading (<img src="..." loading="lazy" />) so that image loads only when they appear in your viewport. Basically they won't load untill you scroll to them. (I wouldn't use this on images you can see as soon as you open website)
There's still lots of thing you can do, but these are basic things that help a lot.TinyPNG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!
just to clarify that first point, because I know some beginners misunderstand that: Save your images in webp format or convert them to it using software, you can't just rename the file
One other thing to consider is screen size. Nowadays most websites are visited through mobile devices. Downloading a full size picture that doesn't physically fit in the smaller screens is a waste of bandwidth and hurts loading times.
In addition to converting images to formats like webp you can also resize them to their appropriate viewports, and have the browser decide which one to download. You can do this easily with the HTML <picture> element:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
This can also serve to provide fallback images in the rare case that, for some reason, webp cannot be loaded or is missing from the server, etc.
1. As others have suggested, having your images in .webp and .avif would help a lot.
Use can use squoosh.app to convert your images to .webp format.
This alone is not enough. You should also use the...
<figure>
<picture>
<source>
<img>
... tags in that order.
This helps you to have 100% control on your image responsiveness. With the <picture><source> tags, you could specify different sizes of your image for specific device breakpoint.
Use squoosh.app to resize your images too.
Always use the right image size for the right breakpoint.
2. To achieve this automatically in all your builds, you can use ShortPixel API, or subscribe to Cloudflare Image Optimization. It's $5/m and comes with extra features.
If you're building with WordPress, you can use EWWW Image Optimization plugin. The pro version comes with extra features and very cheap.
Wow…thank you all. All these solutions are very useful and I have used tinyPNG before making the previous post, but I wasn’t satisfied with most of the sizes I got. I was getting 500kb and some 600kb plus. I am looking to work with 100k max. I tried using Adobe Illustrator to resize but it just wouldn’t install on my Linux OS, that’s why I put out the post to see if there would be a better solution
If you are on Linux, give
imagemagick a try. It's a CLI tool for image manipulation that can do both image conversion from one format to another and resizing. It can do a lot more but these are the two main factors that affect loading speeds for websites.
If you prefer a graphical interface there's a program called GIMP. You can crop, resize and convert images as well, although there are so many options that it's a bit daunting at first.I stg, if imagemagick ever dies, half the internet will break
I use
convert all the timeI thoroughly recommend
.webp. I have had some issues loading .avif on Edge and Safari.Yeah, avif is not quite there yet in terms of browser support. But it looks like it's a big improvement in image formats. The same was true not too long ago about webp and that's why using the picture element with a fallback to a reliable format is a must.
Thank you everyone. With my eyes open to optimization, I now use pexels.com for downloads. It gives me options of resolution, so I just go for good resolution then I use the squoosh.app to convert to webp format, which gives me quality images way below 200k which I believe is great for performance. I am grateful everyone. You’ve all made my time on this app so far worthwhile
@joao6246 I will try out the app you suggested. Thank you