OPTIMIZE IMAGES SEO

How to do it and improve performance

Optimizing SEO Images is never a waste of time and can certainly yield results in terms of indexing and traffic.

Images make the text more fluid, improve readability, evoke emotions, encourage sharing, add dynamism to otherwise flat and monotonous articles, and help communicate quickly and effectively.

However, the usefulness of images goes beyond the mere visual aspect; it also gains value from an SEO perspective. In fact, Google has already shifted towards a more “visual” search mode.

Even though image content analysis technologies and algorithms still have a long way to go, just take a look at Google Images filters to realize the significant steps taken in that direction.

In recent years, images have become an excellent resource, even for e-commerce. From recent studies, it has been found that the product image positively influences about 50% of users during the purchasing phase.

We can therefore state that images increase conversions for an e-commerce. In the following page, I will show you the fundamental elements to optimize images for SEO.

Curious to know how to work in the digital world? The SEO Certification Course will make you the most sought-after professional in the market!

Search engines and images

Explaining how image recognition and coding occur from an SEO perspective requires defining some technical elements that make it possible to optimize images for SEO.

The main element of this process is called Spider, a program that scans content on behalf of a search engine.

In reality, these software programs cannot decipher and understand the content of images, but they can read essential elements of graphic content necessary for image indexing.

This will be represented and recognized by a code, defined as the IMG tag (image), and is represented as follows:

sample tag code

What follows the alt tag, namely the alternative text, is what carries the most weight for Google, as the primary source of information about the image for the spider that will analyze your page, a topic we will address later.

Google itself states that images are a relevant signal for indexing. It is crucial that they are chosen strategically so that search engines consider them as relevant resources that not only provide a better user experience but also add value to the content.

Therefore, to ensure that our images are taken into account, simplifying Google’s crawl and index activities is essential.

This will increase our chances of appearing in Google image search results and have our media appear in SERPs as valuable resources for users.

Images on Google

We have seen that SEO-optimized images can be used to showcase your site’s content. There are various sections on Google where media can appear:

Google search

I’m referring to traditional search, where a query is entered into the search engine’s bar, and among the usual SERP results (snippets), three or four preview images are displayed.

Google images

Google Images helps users find web pages through visual search. When a user searches using Google Images, they are shown images relevant to the query they entered.

It is essentially a container displaying images, encouraging users to click and explore the topic directly on the page.

Google discover

Another way to be discovered is through Google Discover. Again, if image optimization SEO is done correctly, there is a chance to appear in the personalized feed, also known as queries.

Now that you’ve discovered the benefits that Google Search, Images, and Discover can bring to your site through images, all that’s left is to learn how to optimize them for SEO.

This way, your media will be reviewed by the search engine, allowing you to generate more traffic or increase conversions for your e-commerce.

optimize images seo tool

Why optimize images for SEO?

Optimizing images for SEO is important because images are among the ranking factors and, as mentioned earlier, they attract organic traffic to the website and increase conversions.

Despite these positive aspects, it remains an activity that is often underestimated even by experts in the field.

It’s essential for those who produce online content to dedicate time to optimizing images, just like a webpage needs to appear among the first in the traditional search engine results page (SERP).

The images within it need to rank high on Google Images SERP as well. Therefore, it’s crucial to understand the rules, techniques, and tools that can help us perform this activity.

How to optimize images SEO

Before inserting a photo into our content, it’s necessary to understand what we want to achieve with that image.

Since images can be previewed, it’s advisable to choose them carefully and preferably make them unique. One best practice is to ask questions such as:

“If our users are visually searching for our content, how can they perform the search? What preview would be helpful for them to explore the topic further?…”

Once the purpose is understood, we can optimize images for SEO.

It’s finally time to describe the fundamental and essential elements that effectively contribute to the indexing of SEO images.

For an overview of the SEO course offered by the number one Digital Marketing School, click the button below!

SEO COURSE

File name

Renaming Images for SEO means giving them an identity. Once the image to be used is chosen, image optimization for SEO starts with choosing the file name.

The image’s name should contain keywords, be short and descriptive of its content, unique to avoid sequential file naming with meaningless numbers and labels, and the words should be separated by hyphens.

renaming files based in seo

In practice: for a photo of a dog, the file name might be: “dog-labrador,” providing specific information about the image’s content, all separated by hyphens in the case of multi-word titles.

All of this helps create a stable and descriptive URL that immediately assists Google in understanding the image’s subject matter based on the main subject of the photo or illustration.

If Google deems it relevant to the query, it could position our file among the top results.

Alternative text, title attribute, and caption

While the focus of this content is on optimizing images for SEO, we cannot overlook the importance of optimizing the text associated with these images.

This includes titles, captions, file names, and more. It’s essential to understand that when Google analyzes a page, it extracts information to understand what the image represents.

To assist Google as much as possible, we need to optimize the accompanying text for these files. Providing a descriptive title for the content is one of the first useful suggestions for image SEO.

Not only does it relate to the page, but it also enhances the user experience. This title is recognized as “Alt Text,” which aims to provide information about the image.

It enhances accessibility for users in case the image is not available due to loading issues or browser limitations and increases its attractiveness while facilitating the reader’s call to action.

The alt tag plays a significant role in image optimization as it is the text scanned by Google’s spider.

What to write in the alt text?
To have an image perfectly optimized for search engines, the alt tag must describe the content of the image briefly, clearly, and precisely.

Only when context allows, the inclusion of keywords for positioning is useful. Note that, unlike the file name, this text should not use underscores to separate words.

The alternative text should always describe the content it replaces.

The second essential element to optimize is the “Title Attribute,” which is the image title revealed by placing the mouse cursor over the image.

The small window that appears, overlaying the image and containing the title, is called a “tooltip.” To write a good title attribute, follow the same instructions I provided for the alt text.

A best practice is to differentiate the text in the Alt tag from the text in the title attribute, both of which should be grammatically correct and offer different information.

Finally, the caption is essentially a brief but highly explanatory comment that can be added in some cases at the bottom of an image.

Although it does not directly impact the positioning of images in SERPs, it helps to contextualize the uploaded image file and support the search engine while providing additional information to the visitor.

Optimizing Images for the Web also means writing the title attribute consistently with the image content, alternative text, and file name, possibly adding some additional information.

Filling out the caption is useful when you intend to insert variations of the keyword that contribute to image optimization.

Here’s where you enter the text to optimize images in WordPress, along with the alt tag, you’ll find the title attribute and caption.

optimize image in wordpress

A piece of advice I can offer is to place the most important images at the top of the page to emphasize their importance and immediately capture the reader’s attention.

It’s a good practice to optimize the alt tag and the title attribute of images considering the keyword, aiming for a good position in the SERP.

Care must be taken to use the keyword in the text only if it is relevant to the image; otherwise, it may lead to penalties (keyword stuffing) and the site could be recognized as spam.

File size and dimensions

Optimizing SEO images provides added value to the page and improves the user experience for the reader, which could be negatively affected by excessively heavy images, resulting in slow loading and display errors.

The file’s heaviness indicates the space it occupies on the hard disk and is expressed in Kilobytes and Megabytes.

From an SEO perspective, it’s crucial to consider that the actual size should be less than 100 KB, even though WordPress allows a maximum of 2 MB.

Of course, if your content includes twenty images, don’t insert all of them at maximum size, as it will affect loading speed and negatively impact user experience.

Equally important are the image dimensions, which are expressed in Pixels, a term derived from the combination of the words “picture element” and can commonly be translated as a dot.

An image is created by a series of dots, which are the constituent elements of the photo itself. File dimensions are indicated with the height and width attributes.

I can’t provide you with standard sizes for all images because, given the user’s ability to view the photo from different devices, what might work for a desktop could not be displayed correctly on smartphones.

Some browsers can automatically resize images, and in these cases, I would recommend not exceeding 800px in width and 400px in height, especially if the container in question is a blog.

Image loading speed

Loading, file size, and user experience are interconnected. The heavier an image is, the slower it loads, and it’s less appreciated by users (especially in mobile browsing).

Your task is to find the right balance between image quality and file size to avoid hindering its loading. One solution to improve performance is lazy-loading below-the-fold.

By lazy loading, we mean loading resources asynchronously, which means loading images only at a specific moment and when useful to the user.

image loading speed

The term below the fold refers to the invisible part of the display. In simple terms, when a user accesses your content, not all images are loaded at once.

Instead, they load gradually in the lower section of the page and appear when the user scrolls to that portion.

Be cautious, as improper implementation can negatively impact image indexing. That’s why relying on Sitemaps (which we’ll delve into later) is important.

Image compression

There are two types of compression: Lossy (with loss) and Lossless (without data loss).

To explain further, the former reduces dimensions but results in a loss of image quality, while the latter preserves image quality without loss.

There are several free tools that allow you to optimize images for the web online. You simply visit their website, upload your images, and download the optimized versions; easy, right?

Here are some well-known ones:

  1. Optimizilla: once you upload files (JPEG, GIF, and PNG), they are previewed with a value indicating the percentage of data loss in the image.
  2. Compressor: this is perhaps the most comprehensive option. In addition to optimizing JPEG, PNG, and GIF files like the previous ones, it also allows optimization of SVG and WEBP files. You can choose the type of compression: lossy, lossless, or custom (PRO version).

To optimize WordPress images, you can use various plugins. These plugins not only optimize existing images on your site but also optimize those uploaded in the future.

Keep in mind that if you decide to use these tools, always reduce the image size and dimensions before uploading, so the plugin can further optimize it.

This is important because uploading too many large images (2MB) could quickly consume your web host’s disk space (if you’re using WordPress, a plugin that can help you clean up media is Media Cleaner).

Here are the top 4 plugins for optimizing images in WordPress:

  1. Imagify
  2. WP Smush
  3. EWWW Image Optimizer
  4. Optimus

Please note that their function is nearly the same; choose the one you think is more suitable and easy to use.

Are you curious to know if the SEO world is right for you? Find out by taking the SEO Specialist test below!

sample code

Responsive images

Using responsive images that adapt properly to mobile devices (mobile-friendly) is crucial for SEO.

Images that do not display correctly and do not provide a good user browsing experience increase the bounce rate, which is why search engines penalize them in terms of content indexing.

Responsive images solve the issue of slow loading. Let’s say you’ve created a blog and inserted several desktop-sized images.

For those viewing the content on a smartphone, there will be loading issues because large-sized images require more data. How can responsive images solve this problem?

If the browser’s automatic media reduction function is not present, you could consider creating 3-5 different sizes of an image and implementing them so that the correct files are displayed based on the user’s device.

Keep in mind that even though it will improve performance, you’ll need to insert additional HTML codes, which take up more space on the server.

Another solution would be to use CSS and set the image width with the code “max-width:100%” or alternatively use <img> tags including srcset, sizes, and src.

Did you know that the SEO Specialist is the professional who optimizes SEO images?

DISCOVER THE SEO CERTIFICATION!

Resize images

As I mentioned earlier, even experienced individuals often underestimate the power of optimizing images and they frequently make the mistake of not resizing the image before uploading it to the website.

Google provides two types of approaches that use CSS units, allowing you to enhance performance without compromising quality:

  • Good approach: start with relative units that enable resizing images to a suitable measure for all possible devices, and then switch to absolute units. Thus, depending on the device used, the two units find a match and display the appropriate image to the user.
  • Better approach: the first step is to set absolute units using srcset and sizes, and then, by inserting responsive images, set relative units. In this case, it is assumed that the original image (suitable for large screens) will be useless for small devices, a problem corrected thanks to the presence of responsive images.

The web offers various resources, some of which are open source, allowing you to optimize image sizes for SEO.

Among these, it is worth mentioning free photo editing software like Gimp or online editing tools like Pixlr, which enable you to compress and scale image dimensions.

For resizing images, you can also use Photoshop and Fireworks, both from Adobe, although their incredible editing capabilities come with the downside of being paid tools.

Image quality

Have you ever noticed that while scrolling through social media feeds, you stop at a certain point because a media has particularly captured your attention?

The image details, colors, and elements that compose it lead you to read the accompanying text.

Well, if it has happened to you too, you will understand that using high-quality and sharp images helps attract users to content, making them ignore competitors’ content.

However, remember that, as we have seen, the higher the quality of an image, the larger its file size.

My advice is to maintain a balance between 80 and 85; these are images with good quality that still allow you to compete with others.

Formats

An image on the web can come in a variety of formats, each suitable for different uses. The most commonly used formats for optimizing SEO images are:

  • JPEG (.jpg): it is the most common format, also known as SEO-friendly, offering a good balance between definition, color rendition, and file size. Recommended for photos and screenshots.
  • PNG: maintains higher quality than JPEG, ideal for preserving transparencies. Recommended for images with high details and resolutions.
  • WebP: developed and recommended by Google, provides quality comparable to PNG with 20-30% less weight. Used by YouTube and Facebook for faster site loading.
  • GIF: supports transparency and animation. Used for graphic animations and small images.
  • SVG: standard for vector logos and icons (scalable without loss of quality).
  • BMP: uncompressed format for high-quality images on Windows.

Compressing and using various formats, as well as optimizing image meta tags and file names, facilitates search engine scanning of the image and increases the likelihood of a page ranking in SERPs.

 

Want to delve deeper into the role of an SEO Specialist? Download the e-book for free!

SEO-SEM Specialist ebook guide

Structured data

Structured data, also known as structured data, is meta information inserted into HTML code to provide additional data to help search engines classify the content and understand the concept better.

There are different types of structured data that can be used based on the content type, such as Recipes for recipes, Products for e-commerce, and News articles for news articles.

Structured data not only attracts more targeted traffic but also allows a badge or icon to appear below your image in Google Images results.

optimize products

Image sitemap

Using a Sitemap for images significantly increases the chance that images will be displayed in Google Images search results.

The Sitemap suggests to Googlebot (Google’s web spider) the images we want to index in the most widely used search engine by users.

CDN

CDN (Content Delivery Network) aims to deliver media to the user without any delay in loading. It speeds up a website by transforming, optimizing, and delivering images to the user in customized versions when necessary.

There are various CDN networks online; it’s up to you to choose which one to implement. Always consider factors like price, support, documentation, speed, and ease of installation. 

Optimizing performance through better user experience

Let’s now delve into other elements that contribute to optimizing images on the web, beyond SEO.

Remember, first and foremost, to ensure your images gain visibility in Google Images, you must enhance user experience, which we can achieve in 6 steps:

  1. Provide a good context. As we saw earlier, besides inserting relevant images, it’s crucial that they add value to the content. If our article is about recipes, we can’t include pictures of vehicles, as they aren’t relevant to the topic.
  2. Optimize placement. Choose where to position the images wisely; they should be near relevant text. Remember, placing the most relevant images that can capture the user’s attention at the top of the page is a best practice.
  3. Avoid adding too much text within images. Google itself advises against inserting important text inside images because not everyone can access it, and translating the content is not possible.
  4. Optimize the website. Not only should the images be of quality, but the website they’re placed on should be too. Creating informative and high-quality sites forms the foundation to ensure that images are at least considered by Google Images.
  5. Create websites compatible with various devices. With technological advancements, searches are no longer limited to desktops. This has led to the creation of websites compatible with different devices. The most commonly used device is smartphones, which is why Google positively evaluates mobile-friendly sites.
  6. Create stable URLs with good structure. If it’s necessary to change an image, a best practice is to use a 301 redirect (which falls under HTTP status codes) to avoid changing the URL multiple times in case modifications are needed.

Conclusion

The world of SEO is complex and multifaceted; nothing should be left to chance, as highlighted in the previous paragraphs.

Providing a guide for those starting to optimize images for SEO can be an interesting challenge, significantly expanding the scope for those looking to specialize in a new field or adapt to the demands of the professional market.

 

We are at your complete disposal! Request information, clarifications, brochures, and price lists for our courses through the form below!