How to optimize images for your website

Images on a website play not only the role of decoration or decoration. Images have long been an integral part of website SEO and require special attention not only from SEO specialists but also from web developers.

In this article, we’ll talk about image optimization, the peculiarities of working with images, and how seemingly ordinary images affect website SEO.

A few words about the importance of optimizing images on your website

Full-fledged image optimization for a website includes not only setting the title and alt meta tags, but also additional actions, which we will describe in more detail below. What tasks does a comprehensive image optimization for a website solve?

• Speed up page loading and performance. Large and optimized images can lead to problems with website performance, in particular, to a decrease in its speed. Search engines are very particular about the speed of a website, so image optimization is an effective way to improve website performance.
• User experience and interaction with content. Quality content includes not only dry text but also visuals, including pictures. Images on the website should correspond to the content of the article and be of sufficient quality. This will improve the user experience, make the user stay longer on the resource, and in the long run – return, because he already knows that the site offers not only useful but also interesting content.
• The impact of image optimization on SEO. Optimization of graphic materials will help not only to increase the position of the site in the search results, but also to rise higher in the «Images» section of Google Chrome.

These points describe the importance of image optimization quite exhaustively, but there are many nuances that will be discussed further.

Selecting images and optimizing them… Or do we?

You’ve created an article, uploaded it to your website, selected the right images… Is it time to roll up your sleeves and optimize? It’s not that simple. It turns out that not all images on your website should be optimized. Let’s find out what the problem is.

Images for design and content – what’s the difference?

Each image on the site has its own role. For example:

• graphs display some part of the text that contains statistics;
• The photo illustrates a yacht that won another race;
• a stylized image encourages the customer to take action.

All images on your website should be optimized, but each in its own way. For example, adding title and alt attributes to design materials doesn’t make sense in general. But their size and resolution should be taken into account and optimized if necessary.

Images and their formats

Globally, all image formats can be divided into two types:

• Vector – which include SVG, AI, EPS, PDF, and other formats. This type of image is created based on mathematical formulas and geometric shapes. Vector images have a great advantage: their quality does not depend on the scale of the image. That is, even if you use a strong zoom, the clarity of the lines will not suffer.
• Raster images are well-known formats such as JPEG, PNG, GIF, and RAW. Unlike a vector, raster images are made up of pixels rather than geometric primitives. This type of image depends on scaling, so too much «zoom» will reveal all the «features» of the image. A raster will not look equally clear on a small smartphone and a large monitor.

Each of these types of images is used for specific website tasks. Returning to the division of images by purpose (design and content), we can draw the following conclusions:

• Vector – ideal for logos, icons, diagrams, infographics, i.e. for those elements of the site that require high definition.
• Raster – real photos, textures, drawings.

An interesting point is that a vector can be converted to a raster using image export. In this case, the vector will lose its sharpness, but at the same time, the image size can become several times smaller, which will have a positive impact on the website’s performance.

Vector optimization

In some ways, optimizing vector images for a website is easier than a similar raster operation. And here’s why:

• The vector does not lose its visual features when scaled – that is, the original resolution of 1200×600 pixels can be reduced by up to three times, and the clarity will not drop.
• Compressing a vector also doesn’t affect its quality – «compressing» vector graphics is different from the same process for raster graphics, but the result is the same. You can compress a conditional SVG file using online services and significantly reduce its size, but the file quality will not be affected.

Optimize raster images

It may seem that raster images for websites have only one drawback, but this is far from the case. It is raster that makes it possible to create images with different levels of transparency, clarity, light, and shadows. However, their optimization has some peculiarities:

• You should be careful when reducing the resolution – the original resolution of 600×382 will look bad when zoomed in even twice, because all the artifacts will «pop up» on the surface of . It is better to search for or create a higher resolution image right away.
• Compression is different from vector compression – raster is compressed using a different principle. There are two types of raster compression, one of which will affect the image quality, and the other will not. Thus, the first type of compression will «shrink» the pixels, which will lead to a loss of clarity, but at the same time, the file size. The option without loss of quality suggests removing unnecessary meta-data that can be quite heavy.

Photo sizes, resolutions, formats and where to use them

Here are some tips on how to actually use graphic elements on your website.

Image file size

The Internet is much faster and more accessible today than it was ten years ago, but that doesn’t mean you should abuse the power of modern networks. The file size directly affects the loading speed of the entire site, so you shouldn’t use images larger than 3-4 MB.

If we are talking about raster images, namely the JPEG format, you can reduce the file size to 100 KB without much loss of quality. Some people think that 100 kb is not enough, but we will draw your attention to the real reasons for using small file sizes.

For example, website builders, such as WordPress, don’t like heavy images, and therefore the page loading speed suffers. Even self-hosted sites may have trouble processing large images, so we recommend choosing the perfect file size for you.

The main thing is that the page load speed should not exceed 2-3 seconds for desktop and 3-4 for mobile devices.

Image resolution

There is no unshakable standard for image resolution, but there are a number of recommendations for the resolution of certain images on websites. For example:

• Background image – 1920 x 1080 – 16:9
• Image size for blog – 1200 x 630 – 3:2
• Site logo – 100 x 100 – 1:1
• Favicon – 16 x 16 – 1:1

However, it is sometimes recommended to create the same favicon in a 32 x 32 or even 64 x 64 resolution. When it comes to the «back», some sites may have a different aspect ratio – instead of 16:9, it may be 21:9.

Image and photo formats for the site

Let’s divide all formats by their likely areas of use as follows:

• Illustrated materials (photos, images for articles) – JPG (JPEG), PNG or WebP. In terms of performance, the best option is a compressed JPG. If you need a clear image with a medium file size, then pay attention to modern WebP. PNG has the highest clarity, but at the same time, the largest size. If you don’t need any special features that are specific to PNG (transparent images, shadows, etc.), you should refrain from using uncompressed PNG.
• Design component (logos, buttons, functional images) – SVG, AI, EPS, sometimes optimized PNG. The modern standard is SVG. AI and EPS may have problems with visualization on some systems or browsers. Often, favicons and technical images for websites are created from PNG images, despite the fact that this format is raster.

Services for image compression

Here are some services that can help you reduce the size of images:

• Compressjpeg.com – supports JPEG, PNG, GIF, and PDF. It also supports batch processing of a large number of files at once.
• JPEGMini is a JPEG compression service. It also supports batch processing.
• TinyPNG – supports WebP, PNG, and JPEG formats.
• Compressor.io – can process JPEG, PNG, GIF, and SVG images.

The MacOS operating system has a built-in photo and image compression feature. To do this, open the image in the built-in Viewer app, open File, and then click Export. After that, a window will appear where you can choose where to save the new version of the image, its format, and set its quality. The future file size is shown below.

SEO optimization of images

High-quality, small-sized images that are in their proper place on the website are only part of the overall SEO optimization of graphic materials.

Meta tags and image optimization features

We have already found out that for design elements such as logos, blurred backgrounds, and elements that have only a visual meaning, you can leave out Alt and Title. The situation is different with the main images that are integrated into the body of the content. Here are some tips.

Alt tag

The Alt meta tag is used to describe the content of an image or photo. Search engine crawlers don’t have eyes, so they can only rely on textual explanations when scanning pages. And it is the Alt meta tag that helps robots figure out how an image relates to a specific topic.

Moreover, the Alt tag is responsible for ranking images in Google Image. When a user submits a query to the search engine and goes to the Images section, Google pulls up relevant images based on the Alt description. Tips for creating a working Alt:

• The length is 100-150 characters. The image description can be longer, but Google will scan the first 150 characters, so it’s important to use them to your advantage.
• Alt should reflect the meaning and theme of the image. You need to describe the content of the image in simple words. For example: «Footage of the test of the sailing yacht Fountaine Pajot New 44».
• Do not duplicate the text from the H1 or Title heading of the page itself. The use of these sentences or words can have a bad effect on the ranking of an image in Google Image, because the search engine will not understand the content of the image.
• Each Alt should be unique. If you have several different images on the page with the same Alt description, it can confuse search robots.
• Avoid keyword spam. You shouldn’t repeat or deliberately duplicate the main keywords of the article in which the photo is located in the Alt description, especially several times.

A good option is to create different Alt-descriptions for the same images in different language versions of the page. Of course, the language of the description should match the language of the page.

Title tag and file name

The Title meta tag does not affect the SEO promotion of an image. However, it can be used for practical purposes, such as organizing images of different types. For example, the Title for all site backgrounds can contain some such construction:

example_name_bg.jpg or bg_example_name.jpeg

This approach will allow you to find files faster by searching on a server or CMS.

For example, raw photos often have names like «IMG_2089.jpeg» that don’t give any clues about what’s inside. Change the name to something clearer: «photo-yabluka-na-stoli.jpg».

What is IPTC and how can you use it to optimize your images?

IPTC is a set of meta-data that allows you to identify the copyright of an image on a website. The advantage of using this meta-data is that the owner of the photo can prove authorship (or rights) in case of legal problems. Here are the fields contained in the IPTC:

• headline;
• Description;
• Keys;
• Author;
• property rights;
• date of creation;
• the place where the image was created.

This data can not only protect your images from misuse, but also provide additional information about them for search engines.

Why should you use Lazy Load carefully?

Lazy Loading is a useful option for additional optimization of your website pages, including images. The essence of the technology is simple: elements (any, but including images) are displayed only when the user «reaches» them while scrolling the page.

Lazy Loading is useful on website pages that contain a large number of graphical objects. To activate this mode of loading content, add the loading=”lazy” parameter to the element initialization line in the HTML code. Example:

<img src=”epiphone.jpg” alt=”Six-string electric guitar and amplifier” loading=”lazy”>

You should pay attention to «lazy loading» in the following cases:

• if images are uploaded via JS scripts;
• if src or srcset are written in HTML, and not through data-src or other non-standard attributes.
• The DOM structure displays images without additional conditions.

In all other cases, normal crawling of pages and images by search engines is guaranteed by almost 99%.

In a nutshell, about image uniqueness, Google Image, and how to avoid problems

In similar materials on the same topic, you can see a call to use only unique images or buy them from stocks. Unfortunately, life makes its own adjustments. But it’s hard to disagree with the idea that using photos and graphic materials on a website that have a lot of copies on the web will not lead to any positive result.

Check a photo found on the Internet for uniqueness – just run it through Google Image search. Research how many times the photo or graphic has been used on other websites and how it is ranked. It’s likely that the free photo you’ve chosen is too popular, so you should look for an alternative.

Besides, you shouldn’t overload articles, especially factual ones, with pictures. Some sites, even large ones, often publish their content with a minimum of graphic elements and have no problems.

You should be especially careful with photos and materials that are marked with a copyright sign or have an obvious author’s origin. We live in an era of free exchange of information, but the use of such graphic elements without permission can theoretically lead to not very pleasant consequences.

Results

So, let’s summarize what techniques you should use for SEO image optimization:

• Separate images into design and content.
• Choose image sizes that match the style of your site and its design.
• Keep track of image file sizes and website speed.
• Give your images clear names, simple but meaningful Alt descriptions, human-readable titles, and explicit URLs.
• Remove unnecessary meta-data that does not contain useful information for search engines – the file will become smaller.
• Categorize all your images and organize them for easy searching.
• If possible, use unique images – either create them yourself or use stock images. There are several free stock images, but you shouldn’t abuse the use of photos that you’re not sure are free.

And remember that even with optimization, you can overdo it, and instead of a beautiful design, you’ll get a compressed mishmash of colors.

Oleksandr Shmidko

SEO Specialist

Author's page