​Read on the web.

​

Back in my day (in the before times), many websites were mobile-unfriendly. Large images took forever to download. or stretched beyond the viewport of the device. And don’t even get me started on websites using thin cursive-type fonts, making words and text illegible - one of my pet peeves. Please don’t make me squint, pinch, or stretch my screen to read your content.

Fortunately, blogs and websites have improved over the years with responsive web design. Now, we have media queries, image optimization techniques, and Sans Serif Fonts. Readability for the win!

Many small business or creative professionals use their blogs to inform, teach, or promote products and services, but most importantly, to build and engage with their audience.

A typical blog post may contain anywhere from 3 - 5 photos or graphic illustrations with long-form content articles featuring approx. 10 - 17 images for every 100 words, according to Orbit Media. These images add up to weigh your website down. With search engines beginning to emphasize the importance of visual content, it's essential to consider your website’s image optimization.

In this post, we’ll discuss how to help search engines understand your photos and graphic illustrations and how they relate to your blog posts in this powerful 5-step image optimization workflow.

And for all of you who TLDR (“too long didn’t read”), learn how to batch, edit, and optimize your website images using some of the free and premium plugins and tools discussed on my blog. ⬇️

So, without further ado, let’s get started!

How Search Engines Index Content

Though search engines use various methods to index images and websites, here is the process in three stages:

• Crawling - robots called crawlers or spiders search the web for new or updated content such as images, videos, webpages, forum posts, etc.
• Indexing - the bots collect the content and begin to store and organize it.
• Ranking - the search engine returns applicable content that best fits the query. Results are ordered from least to most relevant. The higher a site ranks, the more relevant the search engine considers that site.

Additionally, search engines consider image metadata. Information such as file name, alternative text (or alt text), and textual content surrounding the image is indexed by search engines.

Why Image Optimization Matters for SEO

Image optimization is essential for SEO because it affects how fast your website loads, which can affect how well your site ranks in search results. Optimized images can improve your website’s SEO in the following ways:

• Reduced image sizes mean users aren’t stuck in limbo waiting for image assets to download.
• Accessing your site would require less bandwidth for people with a limited data plan.
• Enhances user experience for people accessing your site on various devices
• Reduces your stress levels and clears up your skin

Fast-loading websites and improved user experience make search engines such as Google happy. After all, it’s search engines' business to help visitors find what they're looking for on the web. It's in everyone’s best interest to be as fast, efficient, and as user-friendly as possible.

So, with that said, let’s jump into this workflow that will help you boost your SEO game and enhance your website's visibility.

Step 1 - Reduce image file sizes with photo compression

First up in the workflow is optimizing the file size of your images without sacrificing quality. Large image files can slow your website's loading speed, negatively impacting your user’s experience and SEO.

Use image compression tools or plugins to reduce file sizes. JPEG and PNG formats are commonly used for web images. Let’s discuss the main types of file formats and specific compression techniques.

Understanding Image Formats

There are other image file formats, such as WebP, TIFF, and GIF. We are focusing on JPG and PNG image file formats for this article.

The two main types of image formats you’re more than likely to be working with on your website:

• JPG or JPEG (or Joint Photographic Experts Group) is used for photographs and complex images. It uses lossy compression and can reduce file sizes while maintaining adequate image quality. JPGs have small file sizes when compared to other image formats.
• PNG (or Portable Network Graphics) is used for simple images with transparency, photos with text, solid blocks of color, and graphics. It uses lossless compression, which means it will retain all the image data during compression and decompression without any loss of detail. It has larger image files compared to JPGs.

In short, you should generally use PNG for simple image files and JPG or JPEG for complex photos. Set your photo size to be as large as it needs to be, and optimize your photos by decreasing the file size while retaining image quality during compression.

Resizing images to fit intended displays: The ideal file size and dimensions for your images will depend on where you intend to use that image on your website. However, in general, when resizing images, keep the file size 100 KB, or at around 1200 x 600 pixels, but no larger than 500 KB.

Step 2 - How to choose an SEO-friendly image name

Take a moment and consider what your content is about and how your image adds to the topic and context of your page. Let’s say, for example, you run a dog training site and write an article about helping families and their adopted dogs get settled into their new forever home.

What reads better - a generic photo file name like: “img_1234.jpg” or “small-brown-dog.jpg” - if the image is actually of a small brown dog?

Also, consider using your target keywords if it relates to the image and context of your webpage or blog post.

Decide on a format style or naming convention and stick with it. Name your image files with dashes or underscores instead of spaces (i.e., small-brown-dog.jpg or small_brown_dog.png), and follow the same style for all your site images.

Be mindful - do not keyword stuff! Search engines are intelligent, and sites like Google may penalize your website or flag it as spam.

Assigning descriptive and relevant file names to your images helps search engines understand your image’s content, not to mention helps keep your media library organized.

Step 3 - Write compelling and descriptive photo captions and alt text

Continuing from file name formats, our next step in this workflow is writing descriptive photo captions and alt text.

Photo captions are short descriptions that are usually displayed below the image. Descriptive captions help your website visitors understand the photo’s significance in your article or blog post context. Captions may contain the location, date, and names associated with the image.

As such, when writing image captions, it’s essential to keep them clear, concise, and relevant. Choose images related to the page or blog topic and describe what’s happening in the photo, if possible.

Example A, photo caption - a small brown dog named Otis finds his forever home

Alternative text (alt text or alt tag) lives in the <img> HTML markup. It’s the text that will display when photos fail to load. Screen readers will also read the alt text aloud. Similarly to writing the photo caption, try to describe the image naturally while incorporating your relevant SEO keywords into the alt tag. Keep it concise - or at least no more than 120 characters.

Limit your use of punctuation unless it’s necessary for clarity. If the image is purely aesthetic and adds nothing to the context, leave the alt text empty (i.e., alt = “ “)

And lastly, remember you are writing your image alt text for people and not entirely for search engines. So, avoid keyword-stuffing your alt text.

Step 4 - How to create an image sitemap

Next up, create an XML sitemap for your website and images. Sitemaps help search engines discover and index your photos more efficiently. The sitemap file is straightforward to generate.

To create an image sitemap file:

• You can make it manually (in a file with a .xml extension) or with a sitemap generator
• Add all relevant image URLs you want to be indexed by search engines in your image sitemap. The URL should point directly to the image - no web pages or galleries. Include the following: image URL, title, caption, image license, geo-location, and publication date, if applicable.
• Submit your sitemap to the search engines (i.e., Google Search Console, Bing Webmaster, etc.) or via their webmaster tools or search console.

Regularly update your image sitemap as you add or update new photos.

Step 5 - User experience and responsive image optimization

In this step, we’ll discuss a few approaches to making images responsive on your website.

Responsive design is a web design strategy that enables page assets to render well on different viewport sizes.

The methods used to make photos responsive can vary depending on the type of graphics (logos, icons, illustrations, etc.) you use on your site. Here are a few options to consider:

• Responsive CSS. Use CSS media queries that allow the user agent (web browser) to resize images when it detects a specific screen size.
• Set image dimensions. Define the width and height attributes for your images in HTML. This method enables the browser to allocate space for the image before it finishes loading, preventing layout shifts and optimizing the rendering process.
• Leverage srcset and sizes attributes. The srcset attribute allows you to provide multiple image sources with different resolutions or sizes. The browser can then choose the most appropriate image to load based on the device's capabilities. The sizes attribute specifies the available space for the photo at different breakpoints, assisting the browser in making accurate decisions.
• Responsive design framework. Employ plugins or frameworks that automatically serve appropriately sized images based on the user's device.
• Lazy load your images. Lazy loading delays the loading of images until they are about to enter the visible area, reducing the initial page load time and improving the overall user experience.

Using some of these methods, you can deliver an optimized and visually pleasing experience to your website visitors and improve the performance of your website on various devices.

Conclusion

Woohoo! You made it to the end of our Image Optimization 5-step workflow.

To summarize, we’ve covered the following topics in this post:

1. Described the main types of image file formats you’ll use for your website
2. Went over image compression techniques and the pros and cons of each method
3. Discussed how to choose relevant photo names, captions, and alt text
4. Listed tips on how to create image sitemaps for your website
5. Outlined how to improve user experience on desktop and mobile with responsive images

Remember, image optimization isn’t just about improving your website's visuals; it's about enhancing user experience, increasing page load speed, and sending relevant signals to search engines.

Monitor your website’s performance and adjust your optimization strategy as necessary. Stay consistent; with time, you'll undoubtedly be well on your way to supercharging your SEO efforts.