How To Optimize Images For Web Performance

Intro

Isn’t it frustrating to build a new website that cannot organically reach your customers?

Maybe Google Insights are all glowing red?

Maybe you realized that your website takes a long time to load and your reach is actually shrinking instead of increasing with each new post added?

Well, there is a huge chance that your images are not optimized the right way and they are actually slowing your website down, and harming its performance.

So in this article, I will show you how to optimize images on your website, to improve the speed, user experience, and SEO rankings of your website.

I divided the article into three parts:

• Part I: The “no-code” way
  I will show you what we can do with pictures without writing a single line of code.
• Part II: The programming way
  I will tell you how we can optimize images with the help of code.
• Part III: Optimize for SEO
  I will show you how to optimize images for better Google rank

Let’s get started!

What is Image Optimization?

Shortly, image optimization is about delivering the highest quality images in the correct format, size, and resolution while keeping them in compressed size. 

If you optimize your images correctly, it will not only improves your site’s performance but also some other metrics such as:

• Page loading speed
• SEO rankings
• User experience

How to optimize your images without coding?

So let’s start with the first way of optimizing your images, which is simply formatting.

The primary purpose of formatting images is to find a balance between the smallest file size and acceptable quality.

Here’s how to do it step-by-step:

Choose the image format

The first, and most important step is to choose the correct image format. 

The most popular formats are: 

• JPG: Suitable for complex color images. JPG images have small file sizes, which allows you to store more of them at once and improves page load times.
• PNG: This format is higher quality than JPG images, therefore larger than JPG images, so using them will have a worse effect on loading times. PNG files can also provide transparent backgrounds.
• SVG: This format is used for vector graphics such as logos or icons. The advantage of the SVG format is that it does not lose quality when scaled.
• WebP: a modern image format that offers excellent compression while maintaining excellent quality.
• AVIF: is the newest image format that has gained popularity. AVIF is noteworthy because it surpasses JPEG in a significant way.

If you are struggling with choosing when you should use which format, here’s our advice table:

Compress Images

The next step is to compress your images. Image compression is the process of encoding image data using fewer bits than the original image. That is, reducing the file size.

We divide compressions intolossless and lossy:

• Lossless compression compresses the pixel data so that the image quality remains the same, but the file size is reduced.
• Lossy compression eliminates some data. This degrades the image, so you need to be careful how much you reduce it. The file size can be significantly reduced.

Reduce the size of the image

The next step is to simply reduce the size of the image, i.e. cut/crop the element we are interested in, so you won’t upload photos from 5000px to 4000px on the page

Use a CDN server 

Another way to optimize our images is to use a CDN server, i.e. servers that help speed up page loading times by reducing the distance between the website visitor and the server.

From such no-code things that we can do to optimize our images, that’s all and now we’ll move on to the programming perspective.

How to optimize your images with coding?

Use responsive images

Responsive images – in other words, it’s a practice of adjusting the image so that it takes up the available space to its maximum size with keeping the proportions.

Since last year, web browsers are reserving adequate space for an image before loading it – if the image element has width and height attributes.

This avoids Cumulative Layout Shift (CLS).

Use lazy loading

Lazy loading – a technique in which the browser does not download all resources from the server at once (when the page is launched) but does it when they are needed.

Lazy loading of images in the future may be greatly facilitated by the new CSS attribute – content-visibility, which enables the user agent to skip an element’s rendering work until it is needed.

element {
content-visibility: hidden; 
}

Use modern image formats

Modern image formats – if possible, we should try to use modern image formats and add fallback with support for older browsers.

    <picture>
		<source srcset=”image.webp” type=”image/webp”>
		<source srcset=”image.jpg” type=”image/jpg”>
		<img src=”image.jpg”>
	</picture>

Use asynchronous decoding

Asynchronous decoding – The attribute will tell the browser that it is possible to decode the images at a later time so that the browser can continue displaying the content even if the images are not fully loaded.

<img decoding=”async”/>

Enable browser caching

Enabling browser caching – it can help by storing some of these files locally in the user’s browser. 

So when you visit the website for the first time, the data about the pictures will be saved locally with the visitor, but when this user visits the website again, he already has some files that he needs locally.

And finally, let’s go to optimization for SEO.

How to optimize your images for SEO

Use correct naming

The first and most important thing is the correct naming of our pictures, so we do not leave a name that will be exported to us, for example:

The name of the picture should describe what is on it, without unnecessary characters and letters.

Add image alt

Another important thing is to add an image alt as it helps web crawlers understand the image file and the content described on the page to provide more accurate search results. 

Alt must be short – no more than 16 words and around 80-125 characters.

Mind the image size

Image size – as long as most images are less than 500KB, depending on the dimensions, it shouldn’t affect the loading time.

Choose the right image format

Choosing the right image format the same way as described in the no-coding chapter.

Final words

Optimizing images is a great way to easily speed up your website, and make it more SEO efficient with probably the least effort.

As you can see, there is still a way to use great quality pictures and images on your website, without compromising the speed and performance. It’s all just a matter of the right optimization.