📷 All about images

In issue no. 20, we look at how to best optimize the images on your website for SEO.

Jun 28, 2021

Hello and welcome back. This week, it’s Jessie and I’m happy (thrilled! overjoyed!) to report that all of team WTF is SEO? is fully vaccinated!

Also happy to report that team WTF is SEO? had our first-ever in-person (outdoor) editing session this Sunday! Fizzy water was sipped! IRL jokes were shared! One of us forgot our debit card and relied on Shelby’s good graces for her caffeination needs!

A woman sits on a park bench while working on a laptop computer. — I, too, do my best writing on a park bench. **Christin Hume on Unsplash**

This week, it’s all about images. JPEGs, PNGs, those non-text elements that some say are worth a thousand words. However you refer to them, images are essential in news and an easy SEO win. Having search-friendly images also has the added bonus benefit of improving accessibility for your publication’s site.

Let’s get into it.

In this issue:

Why should you optimize images for SEO?
What image optimization tricks exist?

THE 101

Why should you optimize images on your site?

Most news stories on your site will carry images, and often more than one. Not optimizing those images for SEO purposes is a missed search opportunity. Correctly optimizing images creates a better user experience, faster page load times, improved accessibility and more opportunities for search ranking.

Plus – this is something you should consider as part of your Core Web Vitals work.

Images should, of course, relate directly to the content of a story – ideally custom art that your publication has commissioned or created yourself but stock images work in a pinch.

Big outlets: You’ll likely have access to Getty, iStock or Shutterstock wire images.
Small outlets: There are many free (or free-ish) sites that can provide better alternatives than images whose quality rivals Clippy the clip art guy 📎.

Try Unsplash (what we use for our newsletter) or Pixabay. A Canva account is cheap-ish and has thousands of templates for social-media ready graphics that could potentially work as featured or hero images.

Quality, unique images are better than stock photos whenever possible. Avoid rerunning the same stock photo on multiple stories. In the news, this is obviously tricky. And sometimes, there’s only that one image on the wires and you really don’t have a choice. That’s fine! Where possible, bring in fresh art. This provides a better user experience and, if properly optimized, can increase your odds of your images ranking on relevant searches.

THE KNOW HOW

What are common image optimization tricks for SEO?

Start with the basics: Choose the correct file type and file names for images. Only images that need transparent backgrounds should be PNGs. Everything else should be a JPG. Using WEBp for high-resolution images over JPGs or PNGs to preserve the quality.

PNG (Portable Network Graphics): High-quality images with transparent backgrounds. Best for logos or other images where you needa transparent background. Bigger file sizes.
JPG (or JPEG): Good to great quality images that are less heavy file sizes. JPG and JPEG are interchangeable. Most images on the internet are JPGs.
SVG (scalable vector graphics): Created by using lines, points, and polygons, these images don’t pixelate when you zoom in or resize. They can be used for logos or other graphics.

When naming files, include keywords in the filename. For example, if you have a photo of Canada’s Prime Minister Justin Trudeau at the G7 Summit running with a G7 news story:

Instead of: IMG_1232.jpg
Try this: justin-trudeau-canada-g7-june-2021.jpg

Try to include descriptive, SEO-considered keywords near the front of the file name. Use hyphens (–) over camelCase to separate words in the file name so that search engines can see/detect the words.

At scale, this might be tricky. If your site pulls Canadian Press, Associated Press, Getty or another service’s images directly into your CMS (content management system) it might be a task for your site team to investigate how this works for photos selected for stories. If establishing file naming conventions falls under the purview of your photo desk, ask about possible workflow or CMS tweaks.

Having meaningful file names for photos inserted or attached to stories makes it easier to find images around a particular event and can help boost traffic.

Check your file structure: Google takes the file path and file name into consideration when ranking images in search results. Instead of a generic /images/ or /media/ folder, if possible, structure subfolders into categories.

Instead of: site.com/images/justin-trudeau-canada-g7-june-2021.jpg
Try this: site.com/images/2021/06/08/world/justin-trudeau-canada-g7-june-2021.jpg

Optimize image files: Smaller file sizes mean faster page load time – aka a better user experience. Use smaller file sizes whenever possible. This is especially important as the share of readers coming to your site on mobile increases and those readers want fast, efficient news that provides a full experience.

If I’m hate-reading the latest Bennifer story in line to get a coffee, I don’t have an extra ten seconds to wait for a huge photo to load. I want the goss and I want it now!

Image optimization means:

Reduce file sizes without losing image quality. This will help keep page load times under the 2.5 seconds we’re aiming for. Logos and smaller images should be sized down.
However, large images are more likely to be featured in Google Discover. Google says images should be 1,200 pixels wide and enabled by the max-image-preview:large setting.
Check the HTML container for an image – your code should define the image dimensions. Image dimension attributes are also important for preventing Cumulative Layout Shift (CLS) issues that can interfere with Core Web Vitals.
Try responsive images: The srcset attribute on image HTML tags can be set to display different size images based on different screen sizes. This is great for mobile devices where utility might matter more than huge, beautiful art.

There are multiple plugins, including Yoast SEO and WP Smush for WordPress, that can help optimize image sizes correctly. Or, maybe you can use an image CDN (content delivery network) that checks the user’s device and optimizes the image before it’s rendered.

Check your pages for uncompressed images that are slowing down your site with Google’s PageSpeed Insights. Remember from our Core Web Vitals newsletter, Google wants pages to load in under 2.4 seconds. Don’t let images hog that time.

Always, always, always: Use alt or alternative text for images.

The alt text attribute for images should be descriptive text that outlines what is contained in an image. This text is used by search engines to rank your images, but also by people who use screen readers or other assistive technology to determine the subject matter of the image.

For readers with slower internet connections, some images may not load. Rather than a weird blank grey box, descriptive alt text should appear and describe the intended image.
Providing alt text to describe the visual element helps ensure no information for the story or functionality of the page is lost.
Where appropriate, brand-relevant keywords should be used – but don’t stuff it in unnecessarily.

Good alt text should describe what’s in the image so people – and search engines – can make sense of it. Alt text should:

Provide semantic meaning to an image. Tell users the type of image to help understand context (if it’s a headshot, illustration, chart, screengrab, etc. - those details are useful).
If a screenshot includes text, transcribe it in the alt text (unless it leads to repetition).
Be specific: Think about how you would describe what’s in the image in a conversation.
Not include words like “image of” or “photo of” XYZ thing. When screen readers pick up alt next, users know it’s an image. Don’t make “image of” “image of” “image of” the common refrain. It’s not helpful.
Be succinct. Make it about 125 characters.

For example, alt text for a photo of Justin Trudeau at the G7 (EXAMPLE):

Try this: Canadian Prime Minister Justin Trudeau waves at a crowd as he arrives at the G7 Summit in Cornwall, England on June 23, 2021.
Avoid this: justin trudeau

Also populate the title tag of the image: For every image used in a story, be sure to fill in the title text.

Try this: Use supportive text
Avoid this: Copy and pasting what’s in the alt text

Titles are less important than alt text so consider this a “nice to have.”

Add captions for all images: As readers scan news articles, they often stop to read (among other elements) the captions for photos. Sometimes captions are read more than the body of the article itself!

Try this: Use supportive or secondary text for the image. Rather than simply explaining what’s contained in the image, provide context for the image. Use relevant keywords as it contextually makes sense.
Avoid this: Copy and pasting what’s in the alt text or title tag.

While captions do not have a direct SEO impact, using captions correctly – ie., adding additional information or context for readers – can improve overall user experience on your site. Not doing so is a missed opportunity.

More HTML stuff: Add structured data to your webpage to help your images show up better in images search results (although it’s worth noting that Google only supports structured data for products, recipes and videos).

Images themselves can rank, but SEO is a team effort – everyone (and every HTML element) needs to work together! Review other on-page factors like your headline (h1 field), sub-title or meta description, URL, body copy, and structured data.

Best practices:

Use the correct file type and use keywords in file names
Reduce file sizes as much as possible without losing quality
Write descriptive alt text, and provide title text and captions

✔️ Action item: Adding images to stories is likely one of many items on your checklist for publishing a story. Ensure your workflow makes time for writing purposeful alternative text and useful keywords in image file names, so that photos added to stories help lift on-page SEO efforts.

The bottom line: Images are an essential part of most news stories. Considering SEO when adding images to articles – and using accurate, descriptive alt text, captions and title text – can help boost your presence in search results.

SEO quiz

What percent of Google searches click on a link from the second page of search results?

0.78%
1.78%
7.8%
78%

RECOMMENDED READING

Google Images SEO best practices

NEXT WEEK: What should we cover next?

Have something you’d like us to discuss? Send us a note on Twitter (Jessie or Shelby) or to our email: seoforjournalism@gmail.com.

(Don’t forget to bookmark our glossary.)

FUN + GAMES

The answer: Less than one percent – just 0.78% – of people using Google search click on page two results.

Written by Jessie Willms and Shelby Blackley