Search Engine Optimization (SEO) requires a well-planned strategy to achieve successful outcomes. Optimizing images is just one part of a broader strategy that includes technical SEO, on-page optimization, content creation, and link building.
Let’s dive into image optimization for SEO. The goal is to improve your search visibility by optimizing your images. This is achieved by considering the different ways that images are searched for and presented within the search results. In addition to text results, that are visible in Google Search, there are a variety of visual elements that are shown within the search results. These visual elements provide additional context and features, enhancing the search experience and creating opportunities for increased visibility.
Here is a list of the common types of search result visual elements:
Why Optimize Images for SEO?
Potential to Increase Traffic from Google Images
Images can enhance traditional text-based search results and contribute to featured snippets and rich results. For instance, many users rely on visuals for context when browsing search results.
The image below demonstrates the significant space dedicated to displaying visuals within the search results, showcasing the potential for user engagement and clicks. By strategically optimizing images, you can improve your organic visibility and drive more traffic to your website.
Here are a few examples of images being used in the search results:
Branding: Logos and branded visuals help create a recognizable identity in search results.
Category Pages: Images on category pages provide visual cues that guide users to the right products or services.
Product Pages: High-quality product images engage users and enhance the shopping experience.
Let's not forget that many users will be using Google Images and Google Lens to identify, view, and source images.
These are just a few examples to help illustrate the presence of images that boost organic visibility of a brand and their products.
Boosts Website Speed and User Experience
Although we now enjoy 5G connectivity on mobile devices and blazing broadband speeds, encountering slow websites that deliver a poor user experience is still not uncommon. However, these advancements in technology are no excuse to neglect the user experience for visitors accessing your website on mobile devices using a limited network.
It has been proven that if websites are slow to load, users will often bounce back to the search results and seek an alternative. To mitigate this, several strategies can be employed to improve loading times. For instance, implementing lazy loading ensures that images below the fold only load when users scroll down, conserving resources for visible content. Additionally, optimizing mobile viewports ensures your website adapts seamlessly to different devices, providing a tailored experience for mobile users.
Google’s core ranking systems actively reward content that delivers a strong page experience. A key component of this is Core Web Vitals, a set of metrics that measure real-world user experiences in three critical areas: loading performance, interactivity, and visual stability.
Another equally important aspect is adhering to Web Content Accessibility Guidelines (WCAG). These guidelines are the universally accepted benchmark for web accessibility and include best practices for using images. Ensuring images comply with WCAG not only enhances accessibility but also aligns with Google’s emphasis on user-centric content.
For more information on WCAG guidelines and image accessibility, visit Web Content Accessibility Guidelines (WCAG) - W3C.
Image Best Practices
Now we have covered the benefits of increasing exposure using images within the search results, here are the best practices that should be adhered to, where possible.
Use HTML Image Elements to Embed Images
Google recommends using standard HTML <img> tags with proper src attributes to help crawlers identify and process images effectively.
Choose the Right File Format
There are several file formats supported by Google Search: BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF. Each format has a purpose, therefore it’s important to understand which format performs best for each scenario.
The most used formats are:
JPEG: Ideal for photographs and complex images, balancing quality and file size.
PNG: Best for logos and images requiring transparency, though file sizes are larger.
WebP: A modern format that provides excellent compression without sacrificing quality, making it suitable for both photos and graphics.
For the best performance on a website that supports responsive design, WebP is the ideal choice. It offers superior compression, reducing file sizes without sacrificing quality, which improves loading speeds. Additionally, WebP supports both lossy and lossless compression, as well as transparency, making it versatile for various types of images. Its compatibility with responsive design ensures optimal display across all devices and screen sizes.
Optimize File Names
Use descriptive file names that help search engines understand what is contained within each image (e.g., "small-canvas-print.jpg"). It is considered best practice to avoid spaces and use hyphens to separate each word, and generic names like image1.jpg.
Reduce File Size & Compress Images
As touched upon, faster loading times are essential, and this can be achieved by reducing the file size for all images as much as possible. But there is a balance to be found by reducing the file size without compromising the quality of the image. High-quality images are expected, and any images, or photos, that appear blurry will provide a poor experience for users.
We recommend testing to see if this provides performance improvements. The PageSpeed Insights tool works great for this. Run each page to create a benchmark before making changes, then re-run the test to determine if it has improved load times.
There are many different online tools that provide image compression.
Use Alt Text Effectively
Alt text provides text that can be used when the image cannot be displayed and provides context for search engines and screen readers, therefore improving accessibility and SEO.
Consider the following when adding alt text:
Describe the image or the purpose of the image
Do no add unnecessary keywords
Do not use phrases like “image of...”
Be specific and concise
Implement Structured Data
This is typically added to pages that serve a specific purpose where an image can be included. Google provides the following description:
“Google uses structured data that it finds on the web to understand the content of the page, as well as to gather information about the web and the world in general, such as information about the people, books, or companies that are included in the markup.”
If you are not familiar with structured data, here are some examples that exist:
Article
Book Actions
Course Info
Event
FAQ
Image Metadata
Job Posting
Organization
Product
Recipe
You can view the full list here:
There are three different formats that are supported:
JSON-LD
Microdata
RDFa
Use Responsive Images
Designing each web page to be accessible on different devices is important, and this extends to the images on the page. Responsive design allows images to automatically adjust in size based on the user’s viewport. This creates a smooth experience regardless of device. More information can be found here: https://web.dev/articles/responsive-images
Many CMS platforms like WordPress and Wix have this enabled by default. But it worth checking that the feature has been enabled and that it acts correctly.
Avoid Embedding Text into Images
Avoid embedding essential text, such as headings, into images. This prevents the ability for search engine crawlers and screen readers from accessing this information. It can be common to encounter category pages that have embedded the <h1> heading into an image that doesn't follow image or SEO best practice. Another issue with this implementation is that the image will not be responsive without significant labor required to create bespoke sizes for each viewport.
Conclusion
Optimizing images for SEO isn’t just about improving your rankings; it enhances the user experience, boosts website performance, and expands your brand’s visibility across multiple search platforms. By following these best practices, your website can leverage the power of images to drive organic traffic, retain users, and ultimately achieve better results.