How (and Why) to Optimize Images for SEO

This is one of the most overlooked aspects of search engine optimization. Improve your on-page SEO with these steps.

Image for post
Image for post
Photo by Mitchell Luo on Unsplash

Your Website Has Images. Optimize Them.

Your website probably contains images. This is a good thing. Adding images to your articles makes them more engaging, easier to read, and can increase the time visitors spend on your page.

Images break up giant, intimidating walls of text and make your site content easier to scan. We all know internet readers have limited attention spans.

People tend to scan more than they actually read.

We’re like little kids with picture books. Half the time we’re just looking at the pictures and pretending to read the words.

The goal of well-optimized website images is to support the overall message and appeal of your site, increase traffic and visibility via Google image search, and make the site accessible to all users.

Images increase the likelihood of social sharing (side note: add OG tags to improve the appearance of link shares on social media).

Images can send additional traffic via Google image search, creates additional opportunities to increase the comprehensiveness and relevance of a particular page for a specific topic or search term, and helps increase time on-page.

Make sure the visual content is relevant to the topic of the webpage it appears on. Google says, “to boost your content’s visibility in Google Images, focus on the user by providing a great user experience: make pages primarily for users, not for search engines. Make sure that your visual content is relevant to the topic of the page.” (Emphasis added. Source: Google)

More from Google’s image guidelines:

  • Make sure your visual content is relevant to the topic of the page. (Pro-tip: the topic of the page should be related to the keywords you’re targeting.)
  • Display images only where they add original value.
  • Don’t embed important text inside images. Ever. Just don’t do it. Avoid embedding text inside images, especially important text elements like page headings and menu items.

File Size and Page Speed

Images are often the largest contributor to overall page size. Use the latest image optimization and responsive image techniques to provide a high-quality and fast user experience.

Google’s one and only goal is to provide the best possible user experience. Waiting for a website to load is boring. And being bored is basically torture for human beings with smartphones. You want your site to be as fast as possible.

Analyze your site with PageSpeed Insights and visit Google’s Web Fundamentals page to learn techniques to improve site performance.

Google cares first and foremost about the end user experience. As such, page speed is (arguably?) a ranking factor. There are specific guidelines for page load speed, ideal targets for file sizes (the smaller the better!), and tools you can use to compress image sizes without sacrificing quality.

The three types of image file formats that are relevant to websites are .jpg, .png, and .gif.

You want to use .jpeg for photos or images with lots of colors, gradients, shadows, or complex patterns; .png for simple or transparent images, and .gif for animated images.

Fun fact: animated .gifs load faster than videos.

Here are tools that can be used to compress images. You can use tinypng to compress .png and .jpeg files. Tinypng also has a WordPress plugin and a Photoshop plugin. Even though files can be compressed using PS alone, you’ll get significant additional file size compression using tinypng, with no noticeable loss of quality.

Photoshop also has an option to save images for web. Open your image in PS and go to File > Export > Save for Web. One website recommends selecting a quality of 60 is the best choice for your export quality, because it drops the file size below a megabyte without a noticeable difference in quality.

Be sure to Save for Web in Photoshop, because the regular save command results in a file that’s 2–3 times larger than using the Save for Web command. You can shave another 5–10% off the file size if you also use a compression tool after reducing the image size in Photoshop.

Again, because large images are the biggest culprit of slow-loading webpages, it’s important to make sure that every image has been compressed to the greatest extent possible to prevent our images from slowing down the website. Google suggests that a website should load within 2–3 seconds, so this is a good target to aim for.

Compressing images is one of the easiest ways to speed up a website. There are other technical ways to do this, such as caching and using a CDN, but compressing images is the easiest, most straightforward way to ensure page performance. (See the tools section of this document for image compression and other performance monitoring tools.)

Beyond compressing images, reducing the size of javascript and other code files on the website can be done through minification.

Alt Text

Alt tags (aka alt text or alternate attributes) are an alternative text that describes an image in case the image can’t be displayed due to a slow connection, an error, or other reason.

Some users visit websites with images turned off. Others are visually impaired and may be using a screen reader. Alt text appears if and when an image doesn’t and is read by screen readers.

Using optimized image alt tags is good for SEO, and more importantly, it makes your website content more accessible to every person who visits.

Repeat: alt text plays an important role in accessibility. More on this below.

Browsers will display the alt text if there’s a problem rendering images. There are two types of alt attributes for images: alt and title.

Here’s what the HTML looks like:

<img src=“useful-image-name.jpg” alt=“detailed description of image” title=“image tooltip that shows up if you hover over an image”>

You should “focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content on the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.”

(Source: Google’s official guidelines, as reported in Ahrefs.)

Effective alt text succinctly describes your image in a way that if someone couldn’t see the image, they would understand what is in the image and understand what you’re trying to convey by including it in your website content.

According to W3 Schools, the alt text should describe the image if the image contains information, and explain where the link goes if the image is also a hyperlink.

Here’s a shortcut that helps — simply finish this sentence:

“This is a(n) image/photo/drawing of (fill in the blank).”

Example: this is an image of a “two white men in business suites sitting around a conference table.” Etc.

Alt text for product images can include product numbers or serial numbers, if relevant.

For more information about writing Alt Text this is an EXCELLENT overview.

Try to keep alt text to 125 characters or less, because the most popular screen readers cut off alt text at that point. Anything beyond 125 characters will not be read by many screen readers.

(Tip: don’t use the words “image of” or “picture of” since that’s implied by the fact it’s an image. This will cut down on some unnecessary characters, leaving more room to — hopefully — include keywords.)

Accessibility

Accessibility is an important aspect of website optimization, both for SEO and also for the visual/hearing or otherwise impaired. The alt text for images is what a screen reader will read out loud for the visually impaired.

Leave the alt text blank only if the image is purely for decoration, and provides no additional information or other relevant value to the page content. (You’d use alt=“”)

Don’t leave the alt attribute blank, because if it isn’t included, a screen reader would instead read out the name of the image file.

It can be hard to decide if an image is informative or purely for decoration. W3C’s Web Content Accessibility Guidelines (WCAG) working group offers useful information for determining whether an image is decorative (and should have a blank alt attribute) or informative.

Functional images are used to initiate actions, not to convey information. Examples include clickable buttons and other interactive elements. The alt text for functional images should convey the desired action rather than an image description.

Example: the alt text for a signup button should be “click button to sign up” rather than “image of grey button.”

Missing alt text, especially for functional images, can make a site less useful for users who use a screen reader. Without proper alt text, users will have a hard time understanding the action that will be initiated by the image. (It’s a button, but…what does it do if I click it?)

Read the Web Content Accessibility Guidelines page for a detailed overview of image concepts, to learn more about how to provide appropriate text alternatives based on the purpose of the image.

You can also use this decision tree to determine what type of image you’re using and the best alt text approach to use.

Image Captions

Google added captions to Google Image search results in 2018, displaying the title of the webpage where each image is published. “This extra piece of information gives [users] more context so [they] can easily find out what the image is about and whether the website would contain more relevant content for [the user’s] needs.”

Note: Google does NOT use the caption you add to an image as the caption in Google Image search. It uses the title of the webpage. (Effectively the meta title, which appears as the browser title and also the title in a Google SERP result.)

Photo captions can be added as part of the overall copy of the website, but in Google Image search, the caption that will appear is going to be the title of the page, not the unique caption written for an image, even if it’s tagged as a caption in the HTML.

That said, Google extracts information about the subject matter of the image from the content of the page, including captions and image titles. Make sure images are placed near relevant text and on pages that are relevant to the image subject matter.

Ahrefs recommends using image captions wherever possible.

Avoid Putting Text in Images

This has already been mentioned above, but people keep doing it, so I’ve added an entire section on why you shouldn’t be doing this. First, Google advises not to embed important text inside images. (If you want the Google robots to understand what your site is about, don’t put text inside images. The bots can’t read it.) Page translation tools won’t work on images.

Particularly avoid embedding important text elements like page headings and menu items in images because not all users can access them. To ensure maximum accessibility of your content, keep text in HTML, provide alt text for images.

For accessibility purposes, WCAG recommends using actual text styled with CSS instead of putting text into an image format. “In those rare situations where images of text must be used, the text alternative must contain the same text presented in the image.”

If you must use images for readable text, the alt attribute text should simply be the same as the text in the image. There’s no need to describe the color, design, drop shadow, or other stylistic elements of the text as displayed in the image.

Image File Names

This probably should have been higher up. When you’re adding images to your website, give them descriptive names.

Why? Because search engines crawl image filenames.

Create descriptive names for image files. Instead of DSC_098390.jpg, use tahiti-beach-sunset.jpg or something similarly descriptive of the photo.

DO NOT attempt to stuff keywords in the file name. Or anywhere on the website, for that matter. Keep your file names descriptive and straightforward. So, lake-michigan-winter.jpg instead of best-winter-vacations-michigan-travel-winter-visit-hotel-snow.jpg. Etc.

URL Structure for Images

Google uses the URL path as well as the file name to help understand images. Organize your image content so that URLs are structured logically.

Also consider adding an image sitemap. Creating an image sitemap helps Google discover images it might not otherwise find on your website. Detailed information from Google about creating image sitemaps can be found here.

Other Considerations

Always make sure any visual content is relevant to the topic of the page. Google suggests you only include images where they add original value to the page. (Google particularly dislikes pages where neither the images or the text are original content.)

Place the most important image near the top of the page, and whenever possible, place images near relevant text. Captions can be helpful in this regard.

Stock photos are not a concern for negatively impacting SEO, but keep in mind that they’re unlikely to show up in image carousels or featured image packs in Google’s enhanced SERPs (search engine results page).

Because our goal is to drive the highest possible amount of RELEVANT traffic to the myhair website, the more ways we can show up on the first page of Google SERPs, whether it’s through featured images, featured products, featured snippets, and more, the better.

Google Images automatically creates a title and a snippet to explain each result and how it relates to the user query to help users decide whether or not to click on a result. Google uses a number of sources for this information, including descriptive information in the title and meta tags for each page.

Good content is just as important as visuals, and page content quality is a consideration for Google when ranking images.

Because more people search Google Images on their phones than a computer, it’s important to design your website for all device types and screen sizes.

You can use the mobile friendly test tool to see how well your web pages render on mobile devices and get feedback on what needs to be fixed to improve mobile-friendliness.

Useful Tools

Here’s a list of tools you can use for image compression, or to monitor page speed and performance. You might also want to check out Google’s Mobile Friendly Test Tool.

Sources

Sources for these guidelines, in order of trustworthiness, authority, and recency.

  1. Google Image Best Practices
    (Source: Google)
  2. Image SEO: 12 Actionable Tips (for More Organic Traffic)
    (Source: Ahrefs — Updated April 3, 2020)
  3. 11 Important Image SEO Tips You Need to Know
    (Source: Search Engine Journal — Jan 6, 2020)
  4. SEO — Alt Text
    (Source: Moz — date unclear)
  5. How to Optimize Images for Web Performance without Losing Quality
    (Source: WP Beginner — updated Jan 2, 2020)
  6. Page Speed Optimization: Metrics, Tools, and How to Improve (Best of Whiteboard Friday)
    (Source: Moz — July 3, 2020)
  7. The Complete Guide to SEO for Images
    (Source: WPMU DEV — Sept 6, 2019)
  8. How to Write Perfect Image Alt Tags in WordPress
    (Source: WPMU DEV — Sept 3, 2019)
  9. Minification
    (Source: Imperva — date unclear)
  10. Optimizing Images for Web: A Practical Guide
    (Source: A Better Lemonade Stand, Jan 25, 2019)
  11. Image SEO: Optimizing images for search engines
    (Source: Yoast — July 2, 2019)
  12. SEO for Images: Your Ultimate Guide and Best Practices
    (Source: Hostgator, Updated August 6, 2019)
  13. 10 Tips for Optimizing Your Images for SEO
    (Source: Laura Kelly on Moz — Nov 3, 2015 **may be outdated**)

Written by

There's no such thing as too good to be true. Superconnector :: Writer :: SEO Strategist

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store