Images are one of the most commonly used instruments that usually go hand in hand with any text. These not only help in emphasizing those text parts that we want to highlight, but they also improves readability, making your text much nicer and enjoyable. Images help, undoubtedly, to provide your users with the best experience possible. However, why do we sometimes forget to optimize images to fit Google’s guidelines, considering that it focuses on pampering users to promote continuous interaction?
No doubt, investing some time in working on images is worth it to make the most out of them. Have a look at these 9 elements to keep in mind to start with image SEO.
1. General considerations for image SEO
We often put all our effort into ranking our SEO-valuable URLs in SERPs. However, as we mentioned before, optimizing images is important to rank higher in the Google Images search results and increasing our possibilities of attracting organic traffic through them.
Google bots cannot “read” images. They are meant to read code on a website, not on a particular animation or picture. For this reason, we need to provide them with this information by following a simple set of SEO guidelines. This will determine whether the bots can interpret the information we are trying to show, evaluate images and rank them higher in the Google Images section.
2. Image size and weight
Two of the main factors to consider when optimizing images are their weight and size.
Weight:
Using heavy images on your website can increase loading time for the URL where they are implemented, and therefore, the entire site. Loading time is one of the factors that affect desktop and mobile organic ranking, making image optimization essential.
Tools to reduce image weight:
There are many tools we can use to reduce image weight. Even if we don’t have professional image edition software like Photoshop or Illustrator, we can use online platforms like:
- ImageOptim or TinyJPG, which reduces image weight without affecting quality.
- Website Speed Test Image Analysis Tool enables downloading new image formats easily.
Size:
Additionally, it is also important to implement several image sizes for each site to display the most appropriate one depending on the device it’s viewed in. Even if there are plugins that adapt image size, this option may not be the best in practice. The reason is that, for example, a 1000px picture can be rescaled to 400px, reducing its visual size, but the picture will still be as heavy as a 1000px image, affecting your web’s performance and speed.
Tools:
The most important factor when choosing images is knowing the platform we will work on. If we work on WordPress, for instance, we can use SmushIt, a plugin that enables defining a maximum width and height for our images before rescaling, compressing and uploading them to the server.
If, on the contrary, we work with a platform of our own code, we must create a manual or automatic process that permits optimizing images before uploading them to the server.
3. SEO-friendly image format
Currently, the most optimal way to save web images is using one of the next four formats:
- WebP: It can reduce an image’s original weight by 25-35%. It is one of the most recommended formats at the moment; although some versions of browsers still cannot read them, it is one of the formats that allows more compression without affecting image quality.
- PNG: It’s the best choice for pictures with a few colors and transparent backgrounds. It’s widely used in logos.
- JPG: The format that should be used for photographs and images in general. A little quality gets lost when compressing them, but colors and tones are kept the same.
- GIF: Used in animations and moving pictures.
Recommendations:
- Always use the most suitable image format in terms of weight and compatibility.
- Always compress images, either manually or through an automatic processing tool.
- If the web contains several icons, group them into a single image through CSS Sprites in order to reduce the number of server requests and improve your web’s performance.
4. Image SEO Fields
Every image comes with a set of associated fields to provide search engine robots (and users, of course) with improved accessibility.
Image name
Image name refers to the file’s name. It’s the title of the image, which uses hyphens and underscores in between words. It is recommended to include the keyword for which we want to rank our image higher, avoiding unusual characters (such as “ñ”, “?” or accented letters, “á”, etc.)
It is also advisable to omit prepositions or other non-essential characters in the image name to shorten the URL and make it as SEO-friendly as possible.
Title
It’s the text that appears when placing the cursor on the image. We recommend filing it in to add a semantic title to the image, including the keyword we want to rank higher.
This can be the same as the alt text, although rewriting this attribute with slight modifications does not take long.
“Alt” attribute
This is the most important element, as it is the one Google reads. It must contain the main keyword for which we want to rank our URL higher and it’s supposed to contain short descriptions.
Its syntax is the following:
<img src=”IMAGE LINK” alt=”IMAGE ALT DESCRIPTION” />
Example of an optimized image:
Let’s see how each field could be optimized for this image based on the target keyword “ciberseguridad pymes”, whose monthly search average is 90 (in Spain):
File name:
- Wrong: 04745892595295.jpg
- Right: ciberseguridad-pymes.jpg
Title: Consejos de ciberseguridad para empresarios y pymes. (Cybersecurity advice for companies and small businesses.)
Alt text: Ciberseguridad para pymes y empresarios: consejos. (Cybersecurity for small businesses and companies: tips.)
This way, we will optimize all fields and obtain an image that is ready to fight for the top positions. Of course that optimizing images does not guarantee that they will appear first, but it’s a first step to achieve it 🙂
5. Semantic context
Google considers that the most relevant images are those that go in line with the content surrounding them. Therefore, it is recommended to include related text. This way, we will expand the total semantic context in the URL.
6. Image-specific sitemap
To help Google’s bots track our images more efficiently, it is necessary to create an exclusive sitemap.xml with this kind of file. On WordPress, it can be automatically created with tools (plugins) such as Yoast or RankMath. If you’re not working on WordPress, you can use alternative tools or manual programming tools (URL tracking).
Next, you will see a sitemap example with two images within the article:
<?xml version=”1.0″ encoding=”UTF-8″?> <urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1″> <url> <loc>http://example.com/sample.html</loc> <image:image> <image:loc>http://example.com/image.jpg</image:loc> </image:image> <image:image> <image:loc>http://example.com/photo.jpg</image:loc> </image:image> </url> </urlset>
Some of the most commonly used tags when creating an image sitemap are:
→ Image title → The URL or the path where the file is saved → The footnote → License type → Geolocation information
- Documentation: A large amount of information can be found on Google’s blog about image sitemaps with examples, implementation tutorials and more.
After finishing the implementation, we will be able to verify the indexation coverage status on Search Console.
7. Image Lazy Loading (On-Demand Load)
Images are some of the most used resources on websites, because, “a picture is worth a thousand words”, they say. That’s why the visual aspect of every website is carefully developed using these multimedia elements. However, not optimizing them can have a negative impact on user experience and the web’s loading time. For this reason, lazy loading is advisable.
Thanks to lazy loading, images are only loaded when they appear on screen. For instance, if they are on a lower part of the page that is not yet visible on a device’s screen, these won’t be loaded until the user scrolls down. This greatly lowers the number of HTTPS requests and reduces loading times, making your page more likeable to Google.
Plugins to implement Lazy loading on WordPress
If you are managing websites on this software platform, there are a set of plugins that will attract your attention if you want to optimize images by implementing lazy loading. Remember to check if the installed theme includes this function. If not, here are a few interesting ones:
- BJ Lazy Load: easy to install and set up, it’s one of the most popular tools, with more than 90,000 installs. Thanks to this complement, you can scale images to adapt them to different screen sizes.
- Lazy Load by WP Rocket: simple and easy to set up (basically because it doesn’t provide different options), this plugin’s advantage is not using a JavaScript library like jQuery.
8. Using a CDN for images
A CDN (Content Delivery Network) is a set of servers distributed all over the world that facilitate a cached website’s content depending on where the requestor is located. Thanks to this hosting network, that server which is closer to the requestor will provide a copy of the requested website.
Therefore, using a CDN helps in making our URLs download faster, reducing our site’s loading times and promoting its organic ranking.
If we use a CDN (for example, Cloudflare) to show images, these will be downloaded and displayed faster. This straightforward flow will directly improve our SEO.
9. Other considerations
SEO-valuable images, that is to say, those we want to rank higher, must be included in the URL’s source code. Those implemented as a background property on CSS won’t be visible for Google, as it cannot comprehend this type of style sheets.
Additionally, there are other unmissable details to keep in mind when optimizing our images:
Read Also
- Exif: With every image, a set of attributes is saved, such as the date when the picture was taken and other data relevant to professionals in this field. However, this information is not SEO valuable and only takes up space. Deleting this information can help in optimizing images and making them less heavy.
- “longdesc”: This attribute is usually forgotten, but it can be interesting to implement in our images. This is a long description of the image.
- Linking: Link-building plays a fundamental role in our pages’ organic growth, but also in our images’. These can also be linked and, therefore, achieve a higher recognition in search engines.
