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.

There are many great tools for optimizing images, including:

Web Apps

• Optimizilla
• ImageOptim
• TinyPNG
• jpeg.io
• Squoosh
• Image Compressor
• Caesium Image Compressor
• Compress-or-die
• Compress Jpeg

Desktop Apps

• ImageOptim (Mac)
• FileOptimizer (Windows)
• Caesium (Windows)
• Pinga (Windows)
• OptiPNG (Windows)
• Trimage (Linux)

Command-line Apps

• pngquant
• ImageMagick
• GIFsicle (For Gif)

API

• reSmush.it

WordPress

• Imagify (Free & Paid)
• ShortPixel (Freemium)
• Optimole (Free & Paid)
• Optimus Image Optimizer (Free & Paid)
• WP Smush (Free & Paid)
• TinyPNG (Free & Paid)
• Imagify (Free & Paid)

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:

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.