How To Optimize Images On Your Business’ Website

Optimizing the images that you use on your website makes a substantial difference to your the user experience your website provides and its loading time as well. It has a direct impact on your SERP rankings, and aids to a lot of factors that can help search engines understand your website content better.

By optimizing images and using the right file size, you will have a website that is equipped to load faster and provide a better user experience.

Let’s consider this infographic from Think With Google.

Given this statistic, it becomes imperative to optimize the images you use, as they take up a large portion of your page weight, hence prolonging its load speed. But how do you go about doing that?

Here’s a step-by-step guide of actionable points to help you optimize the images on your website.

Step 1: Use Neat and Cropped Images

Reducing the size of your images as much as possible is one of the simplest and most effective ways to optimize them for the web, and here’s why.

Images are made up of pixels, and each pixel carries data that adds to the file size. Cropping these images to the lowest dimensions required eliminates a bunch of unnecessary pixels, thereby reducing the file size and consequently, the load time, without affecting image quality.

Step 2: Decide on lossy vs lossless compression

There are two basic types of compression techniques that are widely used by various file types, and they are lossy and lossless compression.

As the name suggests, lossy compression reduces file size by omitting pixel data wherever neighboring pixels are similar. This method takes advantage of how the human eye perceives color, and only omits data where it can go unnoticed. Due to this process, the compression rate is high, leaving you with a significantly smaller file size without any substantial difference in quality (unless you zoom in to a certain extent).

Lossless compression does not omit any pixel data, but rather compresses it as is. This results in a sharper image, but with no significant reduction in file size.

Depending on the quality you require and whether the user can zoom in, you can decide which compression method to follow. Image editing softwares like Adobe Photoshop use a combination of these two techniques to give you a high compression rate, based on the quality you choose.

Step 3: Choose the right file type

There are three file types that are widely used for images. They are JPEG(.jpg), `PNG(.png), and GIF(.gif) images. Choosing the right file type among these can help reduce the file size of your images to a great extent. Here’s a quick look at these file types to help you decide.

JPEG is the most commonly used file type, and for good reason. It has the highest color depth, and offers both lossy and lossless compression at adjustable qualities and file sizes. JPEGs are best used for photography and complex images.

PNGs use only lossless compression, so they produce rich images, but at the cost of a bigger file size. This file type is widely used for logos and other simple images.

GIF files are restricted to only 256 colors, and uses only lossless compression. They support animation, so are popularly used for low-quality animated loop images.

Step 4: Remove excess metadata

Images often contain metadata that is not required for your purpose. This metadata is nothing but details of the images’ geolocation, camera make and model, date, time, ISO, shutter speed, and a bunch of other settings.

If the sole purpose of the image is to use it on your website, then this data becomes nothing more than excess baggage. Here’s how you can remove this data.

• Right-click on the image(s)

         in

          your computer, and click on ‘Properties’.

• Go to the ‘Details’ tab and click on ‘Remove Properties and Personal Information’ at the bottom of the box.
• Select the properties you want

         removed

         ,and click on ‘OK’. You can also choose whether to remove data from the original file or save a copy, from this dialog box.

Step 5: Raster or vector?

Raster and vector are the two basic types of digital graphic images that are used everywhere. Knowing which type of graphic image you need is very important, but first, let’s take a brief look at what exactly they mean.

The primary difference between raster and vector graphics is that raster graphics uses pixels to portray an image, while vector graphics uses paths (lines, points, and polygons). This means that raster graphics are capable of delivering rich images that have fine detail, with a lot of irregular shapes. The catch here is that the file size is going to be considerably high. Additionally, images that use raster graphics will blur out when zoomed in.

On the other hand, vector images have a much smaller file size, and are resolution-independent, so they don’t blur out, regardless of zoom. But since they use paths instead of pixels, they’re suitable only for geometric images, like logos and icons.

Before you go ahead and upload any image on your website, you need to think about what the image contains, and its purpose on the site. This will help you decide whether to go with raster graphics or vector graphics for that image.