Image Optimization

Visual search engine technology has improved.

Media plays a role in enhancing your page and has corelation to higher rankings.

Search engine crawlers have come a long way, and while images can be identified, crawlers still provide preference to keywords in an alt tag.

The text associated with the image helps the crawler relate it to the rest of the content of your website.

What is image optimization?

Image optimization is the process of reducing or compresing your images without sacrificing the quality of the images.

Image optimization is important because it ensures that your pages load faster. Faster page loads lead to better user experience.

The goal of image optimization is to ultimately help your page load faster and rank better.

There are multiple aspects that play a role in image optimization

Image size
Image compressions levels
Image aspect ratio, height and width
Image embedding and scaling

Images are usually the heaviest part of any webpage.

The page load is measured as the total time it takes to load all parts of the webpage. This includes the images.

How to choose the right image format?

Put simply, if it’s an illustration, use PNG, if it’s a photo, use JPEG. Output the image at the right size.

Oftentimes, I see scaled images on websites shown in 300PX with the actual image being 2000PX or more.

Some folks argue that WEBP is better than JPEGs. Jyrki Alakuijala, one of the creators of WebP, on WebP vs JPEG:

For high quality photography, I (and butteraugli) believe that JPEG is actually better than WebP.
Below JPEG quality 77 WebP lossy wins, above JPEG quality 77 JPEG wins (for photography).
This was based on the maximum compression artifact in an image — averaging from 1000 images.

However, in defense of WEBP, they also support transparency and animation.

From Chrome 76 and Firefox 74, you can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library.

Resize your images

Consider the guidelines laid by Google for page loads

Most visitors will bounce if your website takes more than 3 seconds to load. On mobile devices thats 2 seconds.
Top million sites have improved their speed dramatically in the last decade.
Google uses page load as a ranking signal.

Pro Tip

There are plenty of tools in the market both paid and free that will offer image compression.

Here is a great image resizer that uses your own browser to do the compression.
Obviously, there are other options like GIMP on linux that will also do the job well.
Photopea is another excellent in browser tool that is free.

Lazy load images

Use the loading attribute to completely defer the loading of offscreen images that can be reached by scrolling:

<img src=”image.png” loading=”lazy” alt=”…” width=”200″ height=”200″>

Use descriptive and concise titles

Descriptive, keyword-filled file names are important to helping search engine crawlers understand what’s in the photo.

This borrows from the concept of friendly URLs.

If the crawler can understand the subject matter of the image, it can quickly determine how relevant your content is to certain queries being searched by users.

Your filename may be “IMG_722011.JPEG,” so change your image filenames to reflect what they are about.

For example, an image about a wedding in Melbourne on a beach might look like “Melbourne_Beach_Wedding_2018” when it is renamed. This helps provide more SEO value to your images inherently.

You wouldn’t want to use “wedding-1.jpg” or “wedding-2018” as these are generic.