Home
>
Customer-led SEO
>
Visual Content & Accessibility
:
Images

Optimizing images for search and accessibility

Tamara Hellgren
Feb 3, 2023
Read in
6
min

Learn which four image attributes you MUST optimize for search, including examples, tips for best practices & three other web image factors to keep in mind.

Images, web accessibility, page speed & SEO

  • Google values original images more than stock
  • Optimize images before uploading them to your website
  • The best format is WebP, followed by PNG
  • Compress & resize images before uploading
  • Optimize image filenames and alt tags
  • Image captions are optional, image title tags don't matter

Currently, search engine algorithms are not able to fully interpret the content of images at scale. They still rely on image alt tags <alt> to learn what an image is about. Image tags contribute to a search engine’s understanding of not only the image itself, but the topic of the page as well. Image tags also provide a description for screen readers – usually used by people with vision disabilities.

Google values unique images more than images that are found across multiple websites, so avoid using stock imagery for featured images whenever possible (it’s not as important for background imagery). Your audience will appreciate this too.

Optimize images as much as you can before uploading them to your site or embedding them in a post or page. You should also get familiar with Google’s image publishing guidelines. Quality, original, optimized images can help your web pages rank better and they can also lead more people to your content via Google Image Search.

The best image formats for SEO 

Choosing the optimal format for your website images results in a quality image on all screen sizes and can improve page speed.

For website images, PNG (.png) is a better format than JPEG (.jpg) because it’s optimized for screens (not printing) and uses lossless compression, so you won’t lose any quality when you compress it.

WebP (.webp) is an even better format than PNG because it was developed by Google to have a smaller file size and better web compression. With WebP you get faster downloads without losing image quality. WebP also supports transparency (which PNG does, but JPEG doesn’t).

WebP is supported by the latest version of most desktop and mobile browsers, including Chrome, Firefox, Microsoft Edge and Safari. Please note that older versions of Safari do not support WebP images.

Additionally, our research shows that WebP images that are used in Open Graph images (<code>og:image</code>) do not work on LinkedIn posts.

There are many different online tools that can convert JPEG or PNG image files to WebP, like TinyIMG. Adobe, Webflow, Adobe and many other software platforms have built-in WebP converters.

eCommerce product image checklist for SEO

  • Product images should be 1x1 ratio (square)
  • The product should take up between 75% and 90% of the image frame
  • Product images should use white or transparent background
  • Optimize image resolution & resize images before uploading to the server
  • Use the image alt to accurately list the product name, type, and any important attributes (like color) that are apparent in the image
  • Test product-only & lifestyle shots
  • Opt for pictures that you take or own—unique is better for SEO than using manufacturer-provided or stock photos
  • Use multiple images of the product, ideally in crawlable & indexable carousel
  • Product images on PDPs should exist above the fold on desktop & mobile devices
  • Mix product images with video, if possible
  • Don't use the same product image on multiple PDPs

Image sizing & SEO

You should compress images before uploading them to the CMS, if possible. Never publish uncompressed images on your website because it will tank the page loading speed (an SEO ranking factor) and annoy users.

Don’t rely on CSS or HTML height and width attributes to size an image. The best image size depends on where you’ll use it: as a background image, hero image, banner image, blog image and more. You should search for image size guidelines for the CMS your website is built on to find out what the default sizes are and how to change them. Here’s the WordPress image size guide. Most website CMS will also automatically make images responsive so they’re sized appropriately on different devices.

There’s no specific size requirement to get an image to show up in Google search results. It just has to be indexable and publicly accessible. 

There are many different image sizing guidelines for specific elements, page types, and SEO goals. 

Cheatsheet: best image sizes for SEO in pixels (and aspect ratio)

Image sizes for Open Graph Protocol

We like 1,600 x 900 (16x9 aspect ratio) the best, but other minimum viable options include: 

  1. 1,200 x 675 (16x9)
  2. 1,200 x 1,200 (1x1)
  3. 1,200 x 900 (4x3)

Google Discover: best image size

Use all three aspect ratios (16x9, 4x3 and 1x1), and mark them up in the structured data by using an array. Minimum sizes are: 

  1. 1,200 x 675 (16x9)
  2. 1,200 x 900 (4x3)
  3. 1200 x 1200 (1x1)

Google News: best image sizes

Use all three aspect ratios (16x9, 4x3 and 1x1), and mark them up in the structured data by using an array. Minimum sizes are: 

  1. 1,200 x 675 (16x9)
  2. 1,200 x 900 (4x3)
  3. 1200 x 1200 (1x1)

Blog or Article hero image sizing

The best image sizing for blog or article hero images is completely dependent on the design of your website. Here's what we typically recommend:

We like 1,600 x 900 (16x9 aspect ratio) the best, but other minimum viable options include: 

  1. 1,200 x 675 (16x9)
  2. 1,200 x 1,200 (1x1)
  3. 1,200 x 900 (4x3)

Infographic image sizing

We like 600 x 2400 (1x4) the best.

Google Business Profile image sizes

  • Image for Google Business posts: 1,200 x 900 (4x3)
  • Image for Google Business logo: 720 x 720 (1x1)
  • Other Google Business photos: 1,200 x 900 (4x3), 1,200 x 1,200 (1x1), or 1,200 x 675 (16x9)

Product images on eCommerce websites

We like images of products to be at least 1,500px x 1,500px (a 1x1 aspect ratio) where the product takes up between 75% and 90% of the frame.

Product images for Google Merchant Center (Google Shopping)

Images need to be at least 1,500px x 1,500px and 1x1 aspect ratio

How to optimize image filenames for SEO

Image filenames should be optimized before uploading the image to the site. Once Google crawls your images it probably won’t crawl them again for a while. So there’s not much point in changing the filenames of images that are already on your website—just adhere to best practices going forward.

The filename isn’t as important of a signal compared to the alt text, but filenames do contribute to Google’s understanding of the image, and every little bit helps. 

Best practices for optimizing new image filenames:

  • Include a target keyword in the filename to add a little boost of relevancy. 
  • Keep image filenames short and place keywords towards the beginning. 
  • Use words that are descriptive and relevant to the image’s context.
  • Use all lowercase letters.
  • As with URLs, use dashes instead of spaces or underscores to separate words in the filename.
  • If you publish your content in multiple languages, remember to translate your image filenames too.

Best practice example: karrie-lane-headshot.jpg

Alternative (alt) text for images

Image alt text—commonly called the alt tag—serves multiple purposes:

  • Alt text describes an image so search engines understand what it is.
  • Alt text appears on the web page if the image file fails to load.
  • Alt text is read aloud by screen readers to assist users with visual impairments.

Alt text was originally used back in the days of slow dial-up connections to convey the content of an image to users who disabled images in their browsers.

Since search engine crawlers cannot see the content of an image, alt text is a relevant signal of the image’s content. You can tell the search engines exactly what an image is by using the alt tag, but remember to keep it short and to the point. Google has said that alt text is the most important image attribute, so don’t skip this one!

Image alt text best practices:

  • Be descriptive and relevant.
  • Don’t use “picture of” or “photo of”.
  • Use target or semantic keywords near the beginning of the tag if natural, but don't keyword stuff .
  • Keep it as concise as possible.
  • Use specific language whenever possible, for example “Honda Civic” instead of “car”.
  • For images that don’t have specifically recognizable people, places or things, include context based on the page topic. For example “SEO expert analyzing data in GA4” instead of “person looking at computer screen”.
  • For image icons (like the LinkedIn icon or a PDF icon) the alt tag should convey what the icon symbolizes, for example “Visit LinkedIn page” or “View PDF”.

Best practice example: Karrie Lane's 2023 professional headshot

The problem with using text in images 

Whenever possible, avoid using images of text or images with text overlay, because they don’t meet accessibility guidelines: people with visual impairment can’t read the text by zooming in, and screen readers can’t read it either. 

If you must use an image with text that a user is expected to read, use the image alt tag to repeat verbatim what the text in the image says.

In the past, it was also wise to avoid embedding text in images because search engines couldn’t read it. But now Google can easily extract text from images. You can try Google’s Cloud Vision API for a demonstration, or upload an image in Google Keep, click the three dots and choose “Grab image text.”

Do image captions help SEO?

Unlike image alt tags, image captions are visible to web page visitors and provide more context  for images used on the page. Image captions don’t directly affect SEO, but they can improve UX and engagement. 

An image caption is a great way to provide additional details that aren’t already in the page text. Most visitors won’t read all of your content; they’ll scan headings, bulleted lists and images and only read carefully when they find the specific content they’re searching for. Because eyes are drawn more to images than to text, well-crafted image captions are a good way to emphasize your main point or keep users engaged by providing useful information.

Google will also use the information in image captions to better understand the content of the image.

Image caption best practices:

  • Decide whether adding an image caption is necessary or helpful.
  • Do not use the same text in the image alt tag and image caption. The image alt tag describes the image; the caption provides context and helps relate the image to the written page content. People using screen readers will hear both.
  • Capitalize the first word and proper nouns, but there’s no need for an image caption to be a complete sentence.
  • Don’t use a period at the end of the image caption.

Image title tags: Not the same as alt tags

A title tag is the text that appears when you hover over an image or link. Image title tags are not required, do not affect search engine rankings, and will not be seen by mobile users (which often represent the majority of a site’s traffic).

If you choose to use the title attribute for web images, make sure any text in it is purely supplemental and not essential, since most of your visitors will probably never see it, and people using smartphones and screen readers cannot access it.