Image Optimization Methods for Web Developers

There is a lot of buzz on the Internet these days about image optimization. Optimizing images for the web aims to achieve three goals: improve the appearance and quality of the images, speed loading time and facilitate search engines to find them. These three aspects are connected. Images that look good, load quickly and are easily searchable, attract more visitors and they also stay longer on the website, indicating search engines that this page is popular, thus improving the page ranking.
In this post, I’ll cover why you need to optimize your images, the three main methods for optimization, and some extra tips to make your website look better, load faster and attract more visitors.

The Need for Image Optimization

Image search represents over a quarter of all queries generated on Google every day. Moreover, the Google update of including a “visit [page]” option to the Image Search button, increased sessions generated from image search, which results in content visibility for the host pages. Therefore, images constitute a source of traffic and we should leverage it.
However, it is easy to go overboard with high definition images, resulting in longer page load times. The average time a user waits for a page to load is just two seconds, thus the quicker your page loads, the higher the chances the visitor will stay around.
This fact was noticed by Google, which started prioritizing faster sites and penalizing slow sites. Therefore, optimizing your images can help you to speed your page load, and boost your page rank. Let’s see a couple of methods for image optimization.

Methods for Image Optimization

You can optimize your images by using one of these three methods: caching, resizing and compressing. You can also use a web image optimization solution to automate these functions, making your work much easier. Here I will explain these methods further.

Caching
It refers to the process of storing image files in the browser cache or a proxy server to access them more easily. Caching on the browser effectively reduces application requests and the page’s download size.
On the other hand, caching in a proxy involves storing the images on point of presence (PoP) servers, thus speeding page loading times because it serves the images from the closest server at hand. Browser-side caching reduces application requests and a given page’s download size.
For application services, you can use image service caching. This method improves the performance of image services by creating cached tiles to they will be ready to serve when needed. When you cache an image you have an image with a dual purpose: to provide the fastest access to the image while giving access to the data associated with the image, for queries, downloading and analysis. Since this method preprocesses the images before caching, you can effectively reduce your page load times. The benefits of a cached image service are:

• Improves the performance of static images—such as backgrounds, that don’t require users to modify any property of the image or querying it.
• Improves the performance of slow formats—generating a cache is a good method for highly compressed or low-performing formats since the cache will give faster access to the images.

Compression
This method makes the images smaller in size by reducing the number of bits required to store the information. There are two kinds of compression: lossy and lossless.

• Lossy compression—makes the file smaller eliminating redundant data. The program pools together similar pixels that are next to each other, then makes them be the same. For example, all the green for the bird’s feathers on the following picture:
  
  Image source: Wikimedia Commons
  The downside is that once you compress an image using the lossy method, you cannot recover the lost bits. Hence, you cannot restore the image to the high-quality original.
• Lossless compression—compresses the file without losing quality which allows the original file to be restored if needed. Therefore, you cannot compress images as much as with lossy compression.

Compressed image file types
Some compressed image files are lossy and some are lossless, including the following:

• PNG— it is a lossless compression type, a high-quality image type. While it is larger than other image types, it’s useful where the graphic may require changes or when the image consists of layers of graphics (background, main image, text) that need to be separated.
• JPEG—it is the most popular format used for camera images since it has a relatively small file size while keeping a high-quality. However, JPEG is a lossy format, which means you can compress it to a smaller size than PNG, although at the cost of image degradation.
• GIF—compresses the images to a maximum of 256 colors, 8-bit color depth, thus it is not a good fit for high-quality pictures. The most popular use is for simple animations that don’t require a high-quality image.

Resizing
When you cannot compress your images all the way, you still want to balance size and resolution. Keep in mind that the higher the resolution, the larger the file size. For websites, high-resolution images slow down your website page load speed. In turn, your visitors get annoyed at the waiting time and don’t stay at your site, even more, if they are checking your website from their mobiles.
Using low-quality images can give a poor appearance to your web, especially for places requiring large-sized images such as page backgrounds or covers. There are three aspects to consider for resizing:
The optimal file size—in short, the number of bytes the image takes up on the computer. This is what slows your website down, as a two-megabyte image will take ages to load while a 125 kilobytes image will load really fast. The file size works as an indicator that the image dimensions or resolution are out of proportion.

• Image dimensions—if the image size is too large, you should look at this factor. This refers to the dimensions of your image, measured in pixels, for example, a typical blog image might be 795x300 pixels. High-resolution images tend to have larger dimensions.
• Resolution—this is the quality of an image, measured in dots per inch (dpi). Most computer monitors will display images 72dpi or 92dpi. Therefore, anything higher than that is too high and will make your image too large.

Tips to Optimize your Images

What can you do if your image is too big for our website? Here a few tips:

• Tweak the dimensions—for example, reduce the width from 3000 to 1200 pixels, reducing the file size. Try to keep the proportions to avoid distorting the image.
• Reduce the resolution—most compressing programs can automatically reduce the resolution to a 72dpi or 92dpi. You can also use the “save for web” option in most image editing programs.
• Change the format—this will effectively compress the image, reducing the size. Keep in mind lossy and lossless types to avoid unnecessary image degradation.

Wrap Up

Optimizing your images for the web nowadays is a necessity for websites trying to survive the competitive environment of the web. With users demanding instant gratification, loading speed is a key factor when choosing to visit your site or your competitor’s. Therefore, using these techniques will help you improve your user experience, effectively increasing conversion rates and boosting page ranking.