Mastering SEO Image Optimization for Better Rankings

This guide will walk you through optimizing images for SEO, ensuring they not only enhance our content but also help to drive traffic more traffic to our sites.

TL;DR

  • Use original, unique images over stock photos for better relevance, authenticity.
  • Use the WebP format for its advantages in file size, transparency support, and compression.
  • Make sure image dimensions are suitable for their use on the page, consider using responsive images to cater to various screen sizes.
  • Minimize file size and weight through compression tools to enhance page load speed.
  • Name image files with descriptive, keyword-rich names to boost SEO performance.
  • Use alt and title attributes in image tags for accessibility and SEO.
  • Consider employing lazy loading to only load images when needed.
  • Utilize a CDN to enhance image delivery and performance.
  • Implement Schema markup to boost visibility on the SERPs.

Choosing the right image

Unique, original images are generally better than stock photos for several reasons:

  • Relevance: Original images can be tailored to fit the content perfectly, making them more relevant and effective at conveying the message.
  • Authenticity: Original images can add authenticity to the content that stock photos often can’t match. They can help to personalize the brand and make it more relatable to our audience.
  • Competition: If you use a popular stock photo, other websites are likely using the same image. This can make the content less distinctive.
  • SEO: Original images can be more beneficial for SEO. Google’s algorithms are sophisticated enough to understand the content of an image and may give preference to original, unique images.

Image Format

The format of the image can affect its quality and load time. Google does recommend using next-gen formats like WebP over JPEG or PNG for two main reasons:

  • Smaller File Sizes: WebP images typically have smaller file sizes than their JPEG equivalents, even at equivalent or better quality. This can result in faster page load times, a ranking factor in Google’s search ranking algorithm.
  • Support for Transparency: Unlike JPEG, WebP supports transparency, similar to PNG files, but with much smaller file sizes. This makes WebP a more versatile format. Lossless and Lossy Compression: WebP supports lossless (like PNG) and lossy (like JPEG) compression, giving you more flexibility in balancing image quality and file size.

Image Dimensions

The image’s dimensions should be appropriate for its intended use on the page. Large images can slow down page load times, negatively impacting SEO. Responsive images are designed to work well on devices with widely differing screen sizes. They automatically adjust to fit the screen size of the viewing device. This is typically achieved using CSS and HTML. For example, the ‘srcset’ attribute in HTML allows you to specify different images to be loaded on different screen resolutions. Here’s a very basic example of how it works:

<picture>
 <source media="(min-width: 1000px)" srcset="large.webp">
 <source media="(min-width: 500px)" srcset="medium.webp">
 <img src="small.webp" alt="description">
</picture>

Image Size & Weight Compression

The size of your image files is crucial. Large, heavy files take longer to load. For users, this means a slower, less efficient website experience. For search engines, a slow website could result in a lower ranking in search results because site speed is a known ranking factor for search engines like Google. Image compression tools allow you to reduce the file size of an image without significantly compromising its quality. Compression works by reducing the amount of data needed to represent the image. There are lossless compression techniques (which reduce file size without losing any image quality) and lossy techniques (which discard some data). Squoosh is an image compression web app created by Google that allows you to compress and compare images with different formats, including WebP, but also resize them.

File names

File names are an often overlooked but important aspect of image optimization for SEO. A descriptive, keyword-rich file name helps search engines understand what the image is about and, therefore, what the page is about. Here are a few things to keep in mind when naming the image files:

  • Use Descriptive Names: The name of the image file should reflect what the image is. Instead of a string of numbers or nonspecific words, use clear descriptions. For example, “arctic-monkeys-concert.webp” is much more descriptive than “IMG1234.webp”.
  • Include Relevant Keywords: If there are specific keywords associated with the page, try to include them in the image file name. This should be done naturally and should make sense in context. For example, if the page is about healthy dog diets, a good file name might be “arctic-monkeys-concert-madrid-tickets.webp”
  • Use Hyphens to Separate Words: In most cases, search engines read hyphens in file names as spaces, so it’s a good practice to separate words in the file names with hyphens rather than underscores or other characters. For example, use “arctic-monkeys-concert.webp” instead of “arctic_monkeys_concert.webp”.
  • Keep It Lower Case: It’s a good practice to keep the file names all lowercase. This can help prevent issues with duplicate files due to case-sensitive paths on some servers.
  • Keep It Short But Meaningful: Long file names can be harder to read, both for users and for search engines. Try to keep the file names short but meaningful.

ALT & Title attributes

ALT attributes are used within the HTML of a page to describe the appearance and function of an image. These descriptions are important for several reasons: Accessibility: Alt text is used by screen readers, which are browsers used by visually impaired people. A good alt description will convey the image’s content to those who can’t see it. SEO: Alt text is a signal to search engines about the content of the image. It provides context and helps search engines understand what the image (and by extension, the page) is about. This can help the images appear in image search results. Fallback content: If an image can’t be loaded for some reason, the alt text will be displayed instead. This ensures that users still understand the context of the image. When writing alt text, try to be descriptive and succinct. Also, if it’s natural to do so, consider incorporating the target keywords, as this can help SEO. Example:

<img src="arctic-monkeys-concert.webp" alt="Arctic Monkeys performing live in concert in Madrid" title="Click to view more Arctic Monkeys concert photos">

Lazy loading

Lazy loading is a technique that delays the loading of resources, such as images, until they are needed. This means images will only load when they’re about to scroll into view rather than all at once when the page initially loads. Why lazy loading images is important:

  1. Performance Improvement: By loading only the necessary images at the start, the initial load time of a web page can be significantly reduced, which can lead to a better user experience, especially for users with slow internet connections.
  2. Reduced Bandwidth Usage: Lazy loading can conserve bandwidth by only loading images as they’re needed. This can be beneficial for users with limited data plans and can reduce server load.
  3. Native HTML & JavaScript: Lazy loading can be implemented using JavaScript or, in modern browsers, using the native HTML loading attribute on img elements. Example:
    <img src="image.webp" loading="lazy" alt="An awesome picture">
  4. Not Suitable for All Content: Lazy loading isn’t ideal for all content. It’s best used for images below the fold. Critical content and images above the fold should be loaded immediately to prevent a delay in content availability, which could negatively impact user experience.

CDNs

A Content Delivery Network (CDN) can significantly enhance the delivery and performance of images on a website, leading to indirect SEO benefits:

  1. Faster Image Loading: CDNs speed up image load times by serving files from servers near the user’s location. This can boost page speed metrics.
  2. Image Optimization: Some CDNs provide automatic image optimization, selecting the best format and compression level for each image based on the user’s device and browser, which can reduce file sizes and improve load speed.
  3. Improved User Experience: Faster, high-quality images delivered by CDNs can improve user experience, a factor that Google considers in its ranking algorithm.
  4. Bandwidth Reduction: By optimizing images, CDNs can reduce a site’s bandwidth usage, improving performance, particularly for users with slower or capped data connections, potentially enhancing user engagement and SEO.
  5. Scalability: CDNs can handle traffic spikes and ensure consistent, fast image loading, contributing to a reliable user experience and positive SEO signals.

Structured data

Structured data, also known as Schema markup, is a standardized format for providing information about a page and classifying the page content. It helps search engines better understand the content, which can enhance the visibility on search engine results pages (SERPs). For images, structured data can play a critical role in how the images are represented in SERPs, especially when it comes to Google’s rich results (like Google Images and Google Discover), where the images can appear. Here is an example of how you could structure the JSON-LD data for an Arctic Monkeys concert event taking place in Madrid:

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Event",
 "name": "Arctic Monkeys Live in Madrid",
 "startDate": "2023-08-25T20:00",
 "location": {
 "@type": "Place",
 "name": "WiZink Center",
 "address": {
 "@type": "PostalAddress",
 "streetAddress": "Avenida de Felipe II",
 "addressLocality": "Madrid",
 "postalCode": "28009",
 "addressCountry": "ES"
 }
 },
 "image": [
 "https://www.yourwebsite.com/photos/1x1/arctic-monkeys-madrid.jpg",
 "https://www.yourwebsite.com/photos/4x3/arctic-monkeys-madrid.jpg",
 "https://www.yourwebsite.com/photos/16x9/arctic-monkeys-madrid.jpg"
 ],
 "description": "Join us for a thrilling evening of live music with the Arctic Monkeys at WiZink Center in Madrid!",
 "performer": {
 "@type": "MusicGroup",
 "name": "Arctic Monkeys"
 }
}
</script>

This structured data provides all the key details about the event, including the name, date, location, image, description, and performer.