Sign in

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

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)

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)

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)

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)

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 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 SVG for: Photos, illustrations, etc.

🎥 Use videos instead of animated GIFs

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

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).

Some of the tools you can use:

🤏 Scale it down

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

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

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

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.

Alertdesk helps you keep track of your site’s quality & performance. Read more at Alertdesk.com and start your 14-day free trial.