Images and SEO

Using images in web design is an essential part of improving the visual appeal and user experience of a website.

Images can tell stories, convey emotions and make complex information understandable. There is a reason for the saying 'one picture says more than a thousand words'.

However, properly integrating images requires more than just adding pretty pictures. In this article we discuss how to use images effectively.

How do you choose the right image?

When choosing images for your website, it's important to focus on quality over quantity. High-resolution and professional-looking images make a better impression than an abundance of low-quality images.

Just make sure you choose the right resolutions. If you have a small image that doesn't exceed 500 by 500 pixels, you don't need a 3,000 by 3,000 pixel image.

In addition, choose the correct file format. Where you used to use JPEG and PNG images. Nowadays it is recommended to use WEBP or AVIF images.

Add your correct image attribute

The img tag in HTML has several attributes. It is recommended to use these where possible.

Alt & title

The alt and title attributes provide a description of what can be seen in the image. This is good for SEO but also for the user experience and screen readers.

The alt is used when the image cannot be loaded or for screen readers. The title is intended so that when you hover over the image with the mouse, a tooltip appears with information.

Srcset

When using images it is recommended to load the correct format where possible. With the srcset you can indicate which image should be loaded in which format. So you can load a small image on a mobile, but the larger version on desktop.

You can find a detailed explanation on mdn web docs.

Loading

By default, an image is loaded eagerly. This means that it is loaded as quickly as possible. However, this has the disadvantage that if the image is at the very bottom of the page it may not be necessary to do it directly.

To indicate that an image only needs to be loaded when it becomes (almost) visible, use the loading attribute. If you add the attribute with the value 'lazy' the image will only be loaded when necessary.

Please note that it is necessary to already specify the height and width of the image on the image. This applies to the size of the image, not the size you want. This would then give you the following img tag