Image SEO Optimization: The Ultimate Guide for 2023

Every website owner strives to create content that retains visitors and encourages them to convert into clients. They use various “hooks”, such as images, videos, polls, etc. Let’s focus on pictures.

Images improve the website rankings. How? They contribute to text readability, leading to a better user experience. Another SEO opportunity is acquiring backlinks from images. Everyone placing your picture on their website should give attribution. More backlinks, especially from authoritative sources, mean more chances of promoting the website on search, multiplying visitors, and raising brand awareness.

But what about page loading speed? Indeed, images make the website slowlier. But they’re the most optimal choice for bringing life to your content as GIFs and videos are heavy-loading files. The good news is that image optimization can lessen its effect on loading speed. As a bonus, image SEO can make the content more discoverable. Read this guide to find SEO image optimization tactics.

The purpose of Image SEO

The fact that images harm your SEO may surface when you check the website metrics. For example, when you analyze the website on Google PageSpeed Insights. You may find some metrics connected to loading speed, such as TTFB (time to first byte).

It illustrates how fast users see the content on the screen. It may be unsatisfactory if static content loads from the server every time a user opens the page. So you may want to optimize TTFB by configuring website caching. It will let the images and other content stay in users’ browsers and increase the page loading.

Image SEO aims at achieving better discoverability by search engines, rapid loading speed, and finer Core Web Vitals (CWV) scores. It involves various steps, such as:

• creating Alt tags to describe the image for website crawlers and readers; 
• writing relevant titles;
• compressing images to the appropriate file size;
• choosing the right format;
• etc.

Why do you need to dedicate time to images and their rankings? Google expects the visual search to grow in popularity, introducing more ways to streamline it for users. A case in point is a new ‘multisearch’ option. It’s a combination of visual and text search. Users can utilize pictures and add more parameters to find the desired image. This news should inspire website owners to optimize images to appear high on searches and meet users’ requests.

Image SEO optimization: 8 best practices

1. Pick the needed file format

The most common image formats are JPEG, PNG, WebP, SVG, and GIF. What is the right one? The choice depends on the image and the way of using it. File formats follow different compression methods, so the size of the same image may double. Let’s take this image as an example:

I downloaded it in JPG with a size of 69 KB. Once I converted the image into PNG, it became heavier and grew to 401 KB. The WebP format weighs 42 KB and has good visual results.

Suppose you select PNG to preserve the quality. Then you should understand that it comes with bigger file size. Replace images with other formats that keep the quality and offer the best compression and the less size. Here are some options to consider:

• JPEG better suits realistic photos as it may spoil the quality of line drawings, text, and iconic graphics;
• PNG allows you to preserve the image quality, but the image size is greater. The format supports transparent background;
• WebP has a smaller size than PNG while offering high quality and transparency;
• SVG allows for background transparency, is suited for images with text, and ensures lossless compression, similar to PNG;
• GIF is mainly used for animation.

JPEG may be a clear winner with smaller file sizes and decent image quality than PNG and WebP. That’s why it may be perfect for professional portfolios. But if you can accept a little to no noticeable loss of quality, opt for WebP to reduce page size even more.

In most image editing programs, you can save images in JPEG, PNG, or GIF or convert them from one format to another. Or use screenshot apps, such as Skitch (Mac), Monosnap (Mac, Windows), and Lightshot (Mac, Windows).

2. Adjust images to website dimensions

Above is the screenshot illustrating how website dimensions determine the content size. The white space indicates the maximum width, which is 1100 px. It means images will stay within that frame. What if you upload a 3648 x 2736 image? The browser will resize it to the needed parameters but deliver its full size.

Loading a bigger picture when unnecessary eats up the page load speed. Such images are heavier due to the number of pixels, slowing down content emerging on the screen.

Check the maximum width. One option to do it is by studying CSS. The width may change depending on your website design. Responsive websites may have greater width on smaller screens than on larger ones.

Resize images and upload the needed dimensions. Be careful with regular resizing as it may distort the image. Smart resizing tools leverage AI to decipher the image contents and tweak it without stretching or squashing essential parts.

3. Reduce the file size by compressing them

Depending on the format, compressing images may reduce their size by 69%. At the same time, the quality of pictures will be almost as high as it was before the compression. You can utilize the following solutions to reduce the file size:

• open-source tools like Guetzli, MozJPEG (by Mozilla), and pngquant, which are command-line tools;
• ImageOptim (for Mac) or its alternatives for other OS;
• plugins, such as WP Smush;
• Shortpixel;
• TinyPNG;
• Imagify.io;
• Squoosh.

Some tools, such as ImageOptim, delete EXIF data to further dwindle the image size. Note that EXIF data is a potential Google ranking factor. So you may want to keep it and turn off the EXIF data removal in your tool.

Experiment with formats and the degree of compression depending on how much speed or quality you’re ready to sacrifice. How much should you compress visuals? The most appropriate file size should be less than 100 KB.

Suppose you need to preserve the clear lines on the drawing. You may compress other images more and leave the drawing almost untouched because Google considers a total page size, not each image. So make some pictures 30-50 KB to keep space for more critical files.

4. Write alt text for every image

Describe pictures within an image tag in HTML code. Such descriptions are known as alt text. It substitutes a picture if it’s unable to display or see it due to the following issues:

• poor Internet connection;
• if users intentionally turn off images in browser settings;
• health problems. 

Adding alt text may be necessary according to countries’ laws. A case in point is the American Disabilities Act. It stipulates writing alt text to help the visually impaired and improve the user experience and accessibility.

The text appears in the upper left corner of the box where the image was supposed to be. It may look like this:

<img src=”women.png” alt=”three smiling women holding sunflowers”>

Alt text assists search engines in grasping the image and indexing it properly. The best practices to create alt tags include:

• inserting a keyword to improve image SEO (avoid keyword staffing);
• adding the full details to the description. The alt tag is correct if it lets you revive the picture in mind.

Check the alt text in the screenshot from Maybelline. The store classifies the product as “maybelline-mascara-lash-sensational-blackest-black-041554420616-o”.

5. Opt for adaptive images

Google considers mobile-friendliness a critical ranking factor. And images are part of this experience. They should appear quickly and adapt to the screen size to satisfy smartphone users and prevent them from leaving.

We’ve already covered why images should precisely match the website dimensions. It attributes to a wise usage of bandwidth and good display.

What if you need different sizes of images for mobile and desktop? The solution is to utilize adaptive pictures. They adapt to the site’s size, ensuring a polished user experience on various touchpoints.

Add the srcset attribute to the HTML code. This piece lets you describe different versions of the image that the browser will choose for different screens. Here is the example from Google:

Do you need to change the image dimensions and upload it several times? No, CMS like WordPress do the heavy lifting for you. WordPress adds srcset and creates several versions by default: thumbnail, medium, medium-large, large, and full.

6. Change the default file name

Another image optimization strategy is renaming files before uploading. Yes, Google improves its capabilities and leverages machine learning to identify photos. So if you upload a picture of your cat, it will recognize the animal.

But misconceptions may arise. Google may mistake one element for another and incorrectly index the file. Besides, proper image names remain a top SEO trick to include keywords and improve the rankings.

Help website crawlers comprehend your image. Replace the standard IMG_5839 name to better reflect your topic. Let’s assume you write about home decor and place a picture of a bath. Give it a descriptive name, such as a “freestanding-bathtub-installed-in-a-penthouse”. 

It may be similar to an alt text. The informative name ensures your image appears on the image search results page, which will drive traffic to your site. If you sell similar products, name them “dress-1”, “dress-2”, or give them an identifier, such as “forest-green-dress-with-sleeves”. Mytheresa overlooks this trick as you can observe it below.

7. Include image structured data

You may have heard of structured data in the context of Google web search. It revolves around rich results and looks like this:

Reach snippets present the information upfront, allowing users to study the product from SERPs (search engine result pages):

• ratings;
• features;
• availability;
• etc.

According to Google, structured data will barely boost your website positions. Nevertheless, reach snippets are likely to cause more clicks and traffic. So you should consider incorporating structured data into your pages.

Schema markup, another term for structured data, also aids in image SEO. Adding it allows you to display extended information under the photo, such as reviews, price, delivery terms, etc. Images also get a special badge, such as a recipe or product. These elements illustrate the page’s purpose and send better-targeted visitors to your store, boosting the probability of conversion.

Google displays structured data for four types of files. They are products, recipes, videos, and GIFs. How can you add it to your site? Embedding the code manually may be complicated if you lack experience. A Google Structured Data Markup Helper streamlines this task. Or use SEO plugins like Yoast SEO. The plugin scans pages for at least one image and adds it to a relevant structured data graph.

To sum up

Why do you need to make images SEO-friendly? Images are like a double-edged sword. They boost the page metrics, such as:

• the time-on-page, 
• average page depths, 
• etc. 

They engage readers and present words in a more illustrative way. Unique images can go viral and generate backlinks to your website, improving page position in SERPs.

At the same time, unoptimized images can lead to sluggish website performance. Search engines will downgrade the page if the content takes much time to appear. Plain text loads faster without any visuals, but who will wade through the wall of solid text? The key point here is not uploading plentiful pictures as placeholders. Images should be valuable to readers, such as illustrations in step-by-step guides or product photos from all angles.

Put optimizing images for SEO on the agenda. Image SEO unites various tactics, from preparing images before using them on the website to adding them to pages. Take them now to enhance website indexing by crawlers. It will result in better rankings, more traffic, and more chances of conversion.