How to optimize your images for performance

Images are a big part of a web page. Not only do they take up a lot of “screen real estate”, but they also account for a large chunk of the total page size.

As of January 2021, images made up on average 45% (Desktop) and 48% (Mobile) of a page’s total weight (HTTP Archive).

Optimizing images can therefore reduce your total page size by a lot, and as a result, speed up your performance.

☑️ Use the right image format

Choosing the right format for your images is like a craftsman selecting the right tool for a job.

He can build a house using an ordinary hammer, but using a nailgun instead will accelerate the process significantly.

The same goes for images. If you wanted to display a picture of a cat, you could use PNG, but a better and faster solution would be to use JPG.

Let’s go over some of the most common image formats and when to use them.

JPEG / JPG (Joint Photographic Experts Group)

The JPEG-format has, since its introduction in 1992, dominated the web.

JPEG uses a lossy compression which means that the file size decreases as the image quality decreases.

JPEG doesn’t support transparency – it must have a solid background color.

NOTE: JPG and JPEG are the same image format. The ‘E’ was removed to support the three character-limit in early Windows-versions.

You should use JPEG for: Photos and artwork.

PNG (Portable Network Graphics)

In contrast to JPG, PNG displays higher color depths (meaning millions of colors) and also supports transparency.

PNG uses a lossless compression which means that the compression doesn’t affect the quality of the image.

PNG is great for illustrations and images with text (e.g., comics) since it doesn’t pixelate like JPEG.

NOTE: Since PNG is a lossless format, file sizes can get huge.

You should use PNG for: Transparent graphics, illustrations, images with text.

GIF (Graphics Interchange Format)

GIF goes all the way back to 1987. It almost died out in the 2000s, but thanks to its animation support, it had its renaissance when the meme-culture exploded.

It soon found its way into pop-culture, and now animated GIFs are everywhere (for instance, nearly all messaging apps have a GIF-section where you can send animated GIFs).

GIF-images often look pixelated since they only support 256-colors (this can be tweaked).

NOTE: An animated GIF is really just a collection of separate images; therefore, file sizes can get huge.

GIF also uses a lossless compression.

You should use GIF for: Animations and simple graphics.

SVG (Scalable Vector Graphics)

SVG is an XML-based vector format, which means it’s automatically scalable. You could scale it 1000x, and it wouldn’t affect the resolution nor the file size.

It works great for logos, icons, and text and often gives you a smaller file size than JPGs or PNGs.

By adding some code, you can also animate SVG and make it interactive.

You should use SVG for: Illustrations, logos, and icons.

WebP (Web Picture format)

WebP is the new kid on the block. Developed by Google, it is looking to bring smaller and richer images – making the web faster.

WebP is 25-35% smaller in file size than JPEG and PNG, supports lossless and lossy compression, animation, and transparency when lossy compressed.

So why isn’t it everywhere? Browser support.

Even though support has grown steadily, it is still (as of February 2021) “only” 92%. We’re getting there, though.

But this doesn’t mean you can’t use WebP – you just need a fallback image.

By using the <Picture>-tag, you can provide a fallback image – e.g., JPEG if the user’s browser doesn’t support WebP. If you’re using WordPress, you can use a plugin like ShortPixel for this.

You should use WebP for: Photos, illustrations, etc.

🎥 Use videos instead of animated GIFs

As mentioned earlier, animated GIFs can be huge in file size – some going up in the double digits megabytes.

Luckily it’s relatively easy to convert your GIFs to video files, and thanks to the “autoplay” attribute in the <video>-tag, it can still have the same look and feel as a GIF.

You can use a service like CloudConvert to convert your GIF to MP4-format.

🗜️ Compress, compress, compress

Compressing an image is one of the easiest and fastest ways to reduce your page size.

What is image compression?

“Image compression is an application of data compression that encodes the original image with few bits. The objective of image compression is to reduce the redundancy of the image and to store or transmit data in an efficient form.”

-Source: An Introduction To Image Compression.

There are tons of excellent image compression tools out there – both web-based and plugins. Most of the time, you won’t be able to tell by the image quality that the image has been compressed, but the saved kilobytes tell another story.

Some of the tools you can use:

• TinyPNG (both PNG and JPG)
• Squoosh
• Kraken.io (Web & WordPress / Magento plugin)
• Compressor.io
• ShortPixel (WordPress plugin)
• Smush (WordPress plugin)
• Crush.pics (Shopify plugin)
• Compress-or-Die
• …And many more

🤏 Scale it down

Bigger is definitely not always better. It can be tempting to upload an image in as high a resolution as possible since you want your image to look as good as possible for the user.

Don’t.

You are wasting the users’ bandwidth by serving them oversized images and damaging your site’s performance.

We’ve seen images with a 3000px – 4000px width before, which makes absolutely no sense. If you’re using WordPress, you can use a plugin like Imsanity to scale images down to a sane size automatically.

So be sure to serve your images in the correct dimensions.

If you use icons, it can also be a good idea to check which size they are uploaded in. If the maximum dimensions you are showing them in are 32×32 px, then you should shrink anything above these dimensions down.

📱 Get responsive

Back in the days, when we all were browsing the web in an 800×600 resolution, it was easier to serve images since we all had roughly the same screen size.

Today, not so much. Screen sizes vary from the tiny Android phone with the 320px width display to the insane 49-inch monitors.

So instead of using a “one-size-fits-all” approach for your images (the same image gets served to all devices), it can be a good idea to use responsive images.

By serving scaled-down versions to smaller devices, it can save 2-4x data.

So how many versions should you serve? There isn’t a correct answer to this, but it’s common to serve 3 – 5 different sizes of the image.

We won’t go into the technical details on how to serve different sizes for different resolutions, but Mozilla has a great resource here explaining it.

You can also use a cloud service like Cloudinary (they also have a WordPress-plugin) to serve responsive images.

😴 Lazy load images

We already know that images take up a considerable chunk of our total page size. But what if you didn’t have to download all the images right away?

Lazy-loading does just this. When enabled, it won’t download or render the images before they are visible to the user.

This essentially means that you can have an infinite amount of images below the fold – and it won’t affect your performance.

In the past, you needed custom JavaSript to enable it, but in early 2020 it became a web standard, meaning you can simply enable it by adding loading=”lazy” to your <img>-tags. Pretty cool, right?

Moreover, since WordPress 5.5, all images will be lazy-loaded by default.

Unfortunately, it’s not all sunshine and rainbows. Since it’s a relatively new feature, not all browsers are supporting the attribute yet. For instance, the always late to the party, Safari, doesn’t support it yet. You can see browser support for the loading-attribute right here.

🔍 Use Alertdesk to analyze your content

In our performance reports, you’ll find a breakdown of all your content – including images.

Get a better understanding of how it impacts your performance and quickly identify load-sinners.

Start analyzing your content today with Alertdesk. Try us free for 14 days.