How To Optimize Images for the Web

Understanding the basics of image optimization gives your content the best opportunity to succeed with SEO.

What is image optimization?

Image optimization involves creating and delivering high-quality images in the ideal format, size, and resolution to increase user engagement. It also involves accurately labeling images with metadata so search engine crawlers can read them and understand page context.

According to HTTP Archive, in 2018, images made up 21% of an average web page’s total weight, and that share likely has grown as image use has grown in recent years – they consume more bytes than any other part of the website. Thus, image size and complexity heavily impact site performance.

When you can reduce the size of images without compromising quality, page load times and the overall user experience improves. That can have a positive impact on search engine rankings, which further improves customer engagement, conversions, and customer retention.

TIP: Optimized images take up less storage space on your server, so site backups are completed more quickly faster.

Now, I’ll detail 10 ways to optimize your images.

1. Resize your images

Image size and file size are not the same things. Image size refers to the dimensions of an image (e.g., 1024 pixels by 680 pixels). File size is the storage space (e.g., 350 kilobytes).

Images with higher resolution and larger dimensions slow your page load times considerably. While they work well for printed materials, they should be scaled down and sized for the web.

TIP: Check out this guide to identify the best image sizes for social media platforms.

Save appropriate format

PNG, JPEG, and GIF each have their benefits. I recommend JPEG for images with lots of color and PNG for simple images.

Image source

Choose the right compression rate

How well an image is compressed affects both file size and quality – the smaller the file, the poorer the image quality.

Experiment with file types and compression rates to see what works best for each image. Many image-editing tools, like Adobe Photoshop, have a save-for-the-web option that automatically minimizes the file size while optimizing image quality.

If you don’t use Photoshop, these tools and plug-ins can help:

Image optimization tools

• Affinity Photo
• FileOptimizer
• Gimp
• ImageOptim (Mac only)
• JPEG Mini
• Kraken (bulk compression)
• Photopea
• Pixlr (JPEG optimization)
• OptiPNG
• Trimage

WordPress plug-ins for image optimization

• EWWW Image Optimizer
• ImageRecycle
• Optimus Image Optimizer
• ShortPixel
• TinyPNG
• WP Smush
• Yoast SEO

Test speed

After you’ve optimized your images, how do you know whether your website page loading times are quick enough? Use one of these tools to test your site speed:

• GTmetrix
• Google PageSpeed Insights
• Pingdom
• WebPageTest
• WebWait

TIP: If your website content frequently changes, regularly check your load times.

2. Optimize image file names

Name the file with relevant, descriptive keywords to get the most SEO power. Include target keywords at the beginning and separate them with hyphens. Don’t use underscores because search engines don’t recognize them and won’t be able to “see” the words individually.

File names should make sense to both search engines and humans. For example, if the original name for an image of a woman in a hair salon is salon234.jpg, rename it with a clear and more descriptive title, such as woman-having-a-haircut-in-a-salon.jpg.

3. Use alt tags

Viewers may understand the image, but search engine spiders need clues. Without alternative text, search engines can’t index your image content accurately.

A good alt tag provides context and helps visually impaired users too. It’s also helpful when a glitch prevents an image from loading because search engines can read the alternative text to inform the page’s ranking. Write an alt tag in more detail than the file name. Aim for 10 to 15 to convey something about the image.

TIP: Brand-relevant terms can be in alt tags to boost visibility, but avoid keyword stuffing.

4. Make images mobile friendly

Google’s algorithm uses mobile-first indexing, so crawlers mainly look at a site’s mobile version. Thus, your images should be mobile friendly too.  How? The short answer is to ensure your images and website layout are responsive to the viewing device.

Some website templates and builders automatically resize images, but you can specify image size based on a device’s width. To do this, add a bit of custom CSS code to your website. Check out this simple guide to learn more about making your images responsive.

5. Optimize the image title

WordPress usually takes the image title from its file name. However, if you don’t use WordPress or the title doesn’t explain the image, update it with the appropriate keywords in the same way as file names.

Image titles are less important for SEO, but they can provide additional context to the alt text. Image titles are more helpful in terms of user engagement, so consider adding a brief call to action such as “buy now” or “download today.”

6. Include captions

Image captions – the words directly beneath images – may not directly impact SEO. But, unlike file names and alt text, captions are visible and can add to the website experience. Adding captions can have an indirect effect on SEO, improving the user experience and engagement metrics.

7. Use unique images

Using stock photos is fine, but they won’t necessarily help your search rankings because other websites likely use the same images. In the same way, unique written content is better for SEO, it’s a good idea to upload unique images.

8. Ensure text complements the images

The page copy can help search engines determine the relevancy of your images if your text doesn’t include enough information to explain an image, expand the description.

9. Add image structured data

Including structured data on your pages helps search engines display your images as rich results. Google Images supports structured data for product images, videos, and recipes. For example, it adds a badge to an image if it knows text, such as a recipe, accompanies it.

Use Google’s structured data general guidelines to learn how to add structured data to your pages within the search engine’s parameters.

10. Use site maps

Google explains a site map as “a file where you can list the web pages of your site to tell Google and other search engines about the organization of your site content.” In other words, it’s a file that contains a map of your site’s content.

Site maps are an important part of SEO because they tell search engines about your pages and website structure. To ensure that search engine crawlers notice every image – an infographic, meme, photo, video thumbnail, etc. – include them in your site map.

For each image entry, include the title, description, URL location, caption, and license information. For video entries, include the title, description, URL location, thumbnail URL, and raw video file URL.

If your website is hosted on WordPress, you can use Yoast SEO, which automatically adds visual content to a site map.

Make the most of your images

If you’re struggling to get your content noticed, keep these strategies in mind before you upload any image. These image optimization techniques will improve the likability of your content to both search engines and human users.

Please note: All tools mentioned are identified by the author. If you have a tool to suggest, please add it in the comments.

Cover image by Joseph Kalinowski/Content Marketing Institute