How to Optimize Images for Websites: Without Losing Quality
People of the internet, you're obsessed with cats.
One of the most famous internet cats is Grumpy Cat on Instagram.
He has over 2.7 million followers. 2.7 million!
There is a problem with this. These cats are slowing down the internet.
Well, the cats are not slowing down the internet. Pictures are slowing down the internet.
These images are getting bigger in file size. Which means they are slowing down webpages.
In this post, I will show you how to keep your webpages fast and your image files small, without losing quality.
One common question I hear is, how many images can I put on a page? Let's answer this first.
How many images is too many?
The short answer:
There is no one rule for how many images you should have on a page.
It very much depends on the content of the page and the image quality.
Often the largest files on a webpage are the image files.
During the last post, we talked about how you can set a budget for your site.
You may have noticed that the largest budget category was imaging.
The calculator gave us a default budget of 300kb for images, and this is a good starting point.
So how many images fit under 300kb?
Unfortunately, it’s not as easy as asking how many.
Attributes of the image, such as, how many colors, pixel size, etc. Will all affect the image quality.
As a rule of thumb, you want to stay under 10 large images per page. To stay somewhere in the region of 300kb.
This would mean that each image on the page needs to be under 30kb each.
To keep the image under 30kb we need to optimize it. For this we use a technique called compression.
What is compression?
When we talk about compression we are making something smaller. Which is how we optimize the images.
With image compression, we are taking a larger image file size and we are compressing it to make it optimized.
One thing we need to mention is that compression does not reduce the quality of the image. The image looks the same as before. We are making the file size smaller.
Remember, the smaller the image file size, the faster your page will load on your website.
Let’s take these two identical images of a cat.
Which one is smaller in size A or B? Is the quality the same?
A) JPG vs PNG
B) JPG vs PNG
Even though both of these images look the same, A is smaller in file size.
- A uses JPG compression, with a file size of 12kb
- B uses PNG compression with a file size of 249kb
As you can see, even though we have used compression on both files. JPG compression has produced a much smaller file than PNG.
So why would you ever need to use PNG compression? Well PNG has one major advantage over JPEG and that is transparency.
Transparency means that you can make parts of the image see-through. So there are occasions when you have to use PNG.
What we need is an image compression that can create transparent images and reduce file size like JPG.
Best of both worlds.
That is exactly what Google has done.
WebP the Google Image Compression
Google has released WebP to solve these two issues:
- Create files smaller than JPG
- Allow for transparency like PNG
Why not use WebP for all our optimized images?
There is a snag. Apple does not currently support this format in the Safari browser.
This means that when browsing the internet on your iPhone or Mac you won’t be able to see any WebP images.
All is not lost.
Netflix, Amazon, Quora, Yahoo, Walmart, eBay, The Guardian, Fortune, and USA Today, all use WebP.
For Apple users, they show a JPG or PNG. For all other users, they show a WebP.
Let's take a look at how.
Using the HTML picture tag with a fallback image
Using the HTML below on your page you can tell the browser:
“if you support WebP then use it. If not then use the JPG file instead”
The HTML markup would look like this:
<picture>
<source type="image/webp" srcset="cat.webp">
<source type="image/jpeg" srcset="cat.jpg">
<img src="cat.jpg" alt="Cat">
</picture>
Let's compare the two best compression techniques JPG vs WebP.
Again, the quality of the two images will be the same.
Which one do you think is which?
A) JPG vs WebP
B) JPG vs WebP
- A uses JPG compression, with a file size of 25kb
- B uses WebP compression, with a file size of 19kb
(remember if you are on safari you won't be able to see the WebP image)
On average, WebP will give you a file saving of 20-30%. Which means faster cat pictures and quicker webpages!
So we now have a way of showing WebP images and then falling back to JPG or PNG if needed.
How do we create these files?
How can we compress images?
To help us create these images Google recently released a free tool called Squoosh.
Squoosh is an online app that can create optimized images in all the 3 compression formats we have discussed.
JPEG, PNG and WebP.
The tool is very intuitive. You can view the image you are compressing side-by-side with the original. This allows you to compare the quality of the optimized image.
The slider in the middle of the image allows you to check the before and after of the image.
Once you’re happy with the quality, go ahead and hit the download button.
Squoosh also works offline, so you can compress images without an internet connection.
Before I finish this post let's do a lighthouse audit to see how if your site could be faster with WebP.
How much data could you save?
Running Google Lighthouse from Chrome will audit the images on the page and point out those that could benefit from optimization.
For each image, it will see if there is a saving from using WebP. It sets the compression level to 85 and then compares this with the original image.
If the saving is bigger than 4kb then it will flag the image as optimizable.
How to Optimize Images for Website, Final Thoughts
I'm aware that we have had many images of cats so to finish let's have a cute dog for balance.
We all want to see these cute animal pictures as fast as possible.
You want your site's images to be as fast as possible. Which in turn provides your users the best website experience.
Using the techniques I have shown, you can optimize the image file size. This will speed up the display of those images on your website.
Using the picture tag you can swap WebP images with either JPG or PNG files. So users with browsers that support WebP get a fast experience.
Remember to use PNG and WebP when the image needs transparency.
Use JPG and WebP when the image does not need transparency.
If you need help finding the images that would benefit from optimization, run a Lighthouse Audit.