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
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
Lossless compression does not omit any pixel
Depending on the quality you require and whether the user can zoom in, you can decide which compression method to follow. Image editing
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
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
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)
inyour 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
On the other hand, vector images have a much smaller file
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.