Hello Sunil
Image-Optimization-Web-Performance

Image Optimization for Best Web Performance in 2022

There are two main techniques for image compression: Lossless compression and lossy compression.

  1. Lossless image compression: The image quality remains largely the same.
  2. Lossy image compression: Some loss of quality occur, even though, it’s almost never perceptible for the human eyes.

The lossless image compression method is almost only about getting rid of the metadata from the images. On the other hand, in the lossy image compression method your image will lose some pixels and therefore some quality.

❓ Should I use a lossy or a lossless image compression for my images?

SEO is all about finding a good compromise, BUT when it comes to image compression we can trick the human eyes and that’s why you should prioritize compression over quality. To some extent of course. Hence, lossy image compression is good to go.

There are many great tools for optimizing images, including:

Web Apps

Desktop Apps

Command-line Apps

API

WordPress

💡 Clean your WordPress Media Library

If you are looking for a tool to save space while also cleaning up your media library, you could use Media Cleaner to find unused media files.

The plugin will scan all your media files and list unused ones in the Media Cleaner Dashboard so you can browse through and delete them.

5. Name images with targeted keywords

The better a search engine understands the content on your site (text and images) the easier they can connect you with your target market. Since search engine robots can’t see your images, help them understand your image better by changing the file name to something a human or search engine can read.

For example, my-new-black-kitten.jpg is better than IMG00023.JPG.

Here’s what Google says about image filenames.

6. Organize multiple images for optimum viewing

How you organize your images is just as important as which images you choose.

Organize your images in a way that makes sense in the context of the user’s journey. For example, if you are showcasing an apartment for rent using a series of images, index them in the logical order by which a prospect would travel through the home.

However, it’s important to always test the effectiveness of the number of images you are using per page. It can be a bit of a balancing act as reducing the number of images will improve loading time and can lead to more click-throughs.

But at the same time, providing more images (such as different angles of a product) can improve user experience and lead to more conversions. You should always test multiple options to find the right balance for your audience.

7. Use descriptive alt text

Alt text (or alternative text) is text that appears in the place of an image if the image fails to load. Alt text is really important for SEO because it helps crawlers understand the image file and the content covered on a page, in order to provide more accurate search results.

HTML syntax:

<img src="sweet.jpg" alt="gulab jamun recipe with khoya"/>

Matt Cutts gives some equally good advice for alt text in this old, yet still relevant video:

Matt Cutts discusses the alt attribute

However, here’s a shortcut that almost always works perfectly—finish this sentence:

“This is a(n) image/screenshot/photograph/drawing of __.”

Remove any conjunctions or connections (e.g., a/an) from the resulting sentence and use the last part as your alt text. Here are a few examples:

“This is a photograph of a chocolate cheesecake.“

<img src="chocolate-cheesecake.jpg" alt="Chocolate cheesecake"/>

You may wish to deviate from this formula slightly when writing alt text for product images. For these, it can be useful to add the product or serial number, like so:

<img src="battery-tender.jpg" alt="Battery tender (022-0186G-DL-WH)"/>

Google has no official guidelines stating that you should do this. But it makes sense because Google clearly understands the relationships between product names and serial/product numbers.

Sunil Pradhan

Hi there 👋 My name is Sunil and I'm a front-end developer who loves to help others by simplifying web-dev related topics.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there 👋 My name is Sunil and I'm a front-end developer who loves to help others by simplifying web-dev related topics.