Scott Services: Image optimization for SEO: Everything you need to know for success

As of January 2019, there are more than 1.94 billion websites. That’s a lot of competition. What’s one great way to stand out? Great images. In fact, vision dominates all other senses when it comes to interacting with and absorbing information.

Here are three quick facts to help you understand how critical images are for people (and for SEO):

90% of all the data the brain transmits is visual.
The human brain processes one image in the same amount of time it would take to read 1000 words. (Yes, turns out the old adage is indeed rooted in scientific fact.)
The recall value of visual content even after three days is 65%, whereas the recall value for written text is merely 10%.

With the majority of search volume coming from phones — and coupled with the fact that people’s attention spans have reduced to eight seconds — it’s essential for websites to be able to deliver a quick, frictionless, and delightful user experience.

Image optimization serves as a major part of this puzzle.

What can image optimization do for my users (and for SEO)?

By shaving seconds off your site speed, it can reduce bounce rate and improve site retention.
It helps improve page loading speed, which is a major Google ranking factor.
It can help improve your keyword prominence. Read more on that here.
It helps in reverse image search, which can be a big value add especially if you’re a product-based business.
Many devices and desktops use high-resolution screens, which increase the need for good quality images.

Basic image optimization tips

These are some tips that anyone can apply for any type of site (even WordPress), so you’re not solely at the mercy of your developers and designers.

1. Choosing the right type of image: Vector or raster?

Vector images are simple, created by using lines, points, and polygons. Vector images are best applicable for shapes, logos, icons, and flat images. They have as good as no pixelation when you zoom in, making them apt for high-resolution devices. Additionally, you can use the same image file on multiple platforms (as well as for responsive website design) without having to use multiple variations.
Raster images, on the other hand, are images that are made of rectangular grids, each packed with multiple color values (pixels). Raster images provide depth to the imagery you would want to convey, giving it an emotional and psychological appeal as these images look real. However, if not handled well, these can heavily hamper your site’s loading speed! Plus, you might have to save multiple file variations to ensure they’re compatible on different platforms and fit for responsive designs.

Here’s a table that Google shared to help understand the pixel-to-byte relation. In short, you’ll get an idea of how heavy one image can get based on its dimensions.

Google's chart on image dimensions and file sizes

Source: Google

Google also mentioned that it takes four bytes of memory to deliver one pixel. Imagine if you had several images on a site with 800 X 800 pixels. our site would take at least something around 625 kBps. Or in simpler terms, imagine an elephant participating in a rabbit race.

Bottom line

I would suggest wisely using a mix of both. An ideal ratio could be 40% vector images and 60% raster images.

2. Picking the best image format – SVG, JPG, PNG, or GIF?

Best format for vector images:

SVG is the only, and the best, option for vector images. Due to its flat imagery, you also benefit from high quality that is easily scalable.

Best formats for raster images:

PNG: Produces high-quality images with heavy file sizes. It can be suggested only for times when you want to save every detail of the image.
JPG: Produces good quality images which aren’t heavy in terms of file size. However, these are lossy images, which means you’ll lose some minor image details permanently. JPG is undoubtedly the preferred image format, which gives you the convenience of hassle-free downloading and uploading of images. Because of this, they’re the most widely used — around 72.3% of websites use JPG image formats and most of the phones save images as “.JPG” files. They are especially suggested for ecommerce sites and social media.
Gif: If you’re looking for animation, GIF is an ideal choice as it supports 256 different colors chosen from the 24-bit RGB color space. As of now, just 26.6% of websites use GIF formats.

Here’s a chart that could help you take a call on which image format is best to use.

Chart on image formats and usage trends

Source: W3Techs

Note: The data in the above chart is of May 15, 2019

3. Resizing images

With a cloud full of devices it’s obvious why people get confused about ideal image sizes.

Note that image size and image file size are two different things. Here we’ll explain how you can get ideal image size (also called image dimensions).

As part of image dimensions, we’ll also discuss aspect ratios.

What’s an aspect ratio?

Aspect ratios tell the width and height of an image and are written in an “x:y” format.

Why is it important?

Remember the time when you tried scaling an image and literally blew it out of proportion? This is exactly what it saves you from. Referring to an image aspect ratio while cropping or resizing images helps you maintain the viability and beauty of the image’s dimensions.

You could refer to this image Shutterstock created to enlist some commonly used aspect ratios.

Chart of best image aspect ratios

Source for the image and the table data: Shutterstock

Aspect ratio	Typical dimensions (inches)	Typical dimensions (pixels)	Ideal for
1:1	8 x 8	1080 x 1080	Social media profile photos and mobile screens
3:2	6 x 4	1080 x 720	Photography and print
4:3	8 x 6	1024 x 768 pixels	TVs, monitors, and digital cameras
16:9	1920 x 1080 and 1280 x 720		Presentations, monitors, and widescreen TVs

With reference to the table above, it’s best to focus on the 1:1 and 4:3 image ratio that are apt for social media, mobile screens, photography, and print.

You might have your own dimension templates based on the content management system (CMS) you’re using.

According to Squarespace, the most ideal size for image optimization on a CMS is 1500 and 2500 pixels.

Here’s a quick and simple answer to spot the most common image sizes for the web.

Chart on most ideal image optimization sizes Source: Shutterstock