Back in my day, many websites were mobile-unfriendly. Large images took forever to download or stretched beyond the device’s viewport. 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.
According to Orbit Media, a typical blog post may contain 3 – 5 photos or graphic illustrations, while long-form content articles feature 10 – 17 images for every 75 – 100 words. These images add up and 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 – these robots are 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 the business of search engines 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, which will help you boost your SEO and enhance your website’s visibility.
Understanding Image File Formats
Other image file formats exist, such as WebP, TIFF, and GIF. For this article, we are focusing on JPG and PNG image file formats.
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. Compared to JPGs, PNGs have larger image files.
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 photos will depend on where you plan 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 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.
Reduce file sizes using image compression tools or plugins. JPEG and PNG formats are commonly used for web images. Let’s discuss the main types of file formats and specific compression techniques.
Step 2 – How to choose an SEO-friendly image name
Take a moment to consider your content and how your image contributes 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 homes.
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 they relate 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 their content and keeps 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.
Image captions must be clear, concise, and relevant. Choose images related to the page or blog topic and describe what’s happening in the photo, if possible.
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, 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 = ““)
Lastly, remember that 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 search engines to index 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:
- Described the main types of image file formats you’ll use for your website
- Covered image compression techniques and the pros and cons of each method
- Discussed how to choose relevant photo names, captions, and alt text
- Listed tips on how to create image sitemaps for your website
- Outlined how to improve user experience on desktop and mobile with responsive images
Related: How to Source Free, High-Quality Images in Your Blog Writing.
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.
Image Optimization Tools
Note: you’ll need to experiment to find the proper compression and image quality balance that works for your needs when using image optimization software.
Web apps
- EZGIF.com is a browser app that makes GIFs from videos, converts photos into different formats, and optimizes images. It supports GIF, JPG, and PNG.
- According to its website, Pic Resize is the “internet’s original picture resizing” tool. You can resize and edit photos with Pic Resize in your web browser.
- Image Resizer—This free tool allows you to resize images in bulk easily and convert them into different file formats, all from your browser.
Software
- Gimp is a free and open-source raster image manipulation and graphics software. Available on GNU/Linux, macOS, and Windows.
- Photoshop is a premium photo editor and design software on Macs and Windows OS.
- Affinity Photo is a fully-loaded premium photo editor for macOS, Windows, and iPad.
- Image Optim is a premium web service for resizing images and image compression. The app is available on Mac only.
- Paint.NET is a powerful yet simple image and photo editing software for Windows PCs.
WordPress Plugins
- Imagify Image Optimizer resizes and compresses images in bulk via its WordPress plugin. Imagify can also convert pictures to WebP.
- Optimus is a WordPress plugin that automatically optimizes images uploaded to your website for a hands-off experience. It can sometimes reduce image size by up to 70%, depending on the format.
- TinyPNG can be used for JPG and WEBP image files. It uses lossy compression techniques to reduce the file size of your image.
- Smush optimizes, resizes, and compresses image files. It features lazy load and bulk compression with one click. It’s an easy plugin for beginners, as it will optimize all photos on your website upon activation.
Additional Tips
- Determine the search engine you want to rank for and follow that engine’s best practices.
- Set a reminder to test your site speed using PageSpeed Tools
- You can also use a slow network connection emulator to test and audit your website for accessibility.
- If you’re using WordPress, the Media Cleaner plugin can help you free up space on your site and use your hosting resources more efficiently by cleaning out unused media files and fixing broken links from your media library.
- Employ a CDN. Check with your web hosting provider. They may offer plans that include a CDN or a content delivery network.
