A picture is worth a thousand words. It’s a communication vehicle which determines whether people grasp something or disregard it. Think about it like this; humans are genetically wired to notice and respond to images more than anything else. Hence, the pictures you use on your web pages is your opportunity to make a first impression and first impressions matter. However, this is not as easy as it sounds.
Naturally, websites are anticipated to load in less than 2 seconds, or people lose interest and move on. This applies especially to gifs used on social media. This is why image compression is necessary. To prevent your website from slugging behind, you can compress your images and still maintain their quality. This process technically involves running your image through an algorithm that reduces the image file size. And there are several online tools you can use to do this, some of which include:
● TinyJPG/ TinyPNG
Types of images
There are two main algorithms applied in image compression – lossy and lossless. Lossy compression results to lower quality images, and the smaller the picture, the more noticeable the differences. On the other hand, lossless compressions don’t discard any information—instead they find a better way to store information which results in the image maintaining its high quality. GIFs, TIFFs and PNG image file formats are lossless compressions.
All the file types come with their pros and cons, and knowing which one to use can make all the difference in the performance of your website. Let’s take a look at some of the most common image file formats:
This the most popular file type on the web. The scale of compression on these file types decreases the image file size significantly by deleting data not noticeable by the naked eye. However, the smaller the image, the more obvious pixilation would be. JPEGs use lossy or irreversible conversion algorithms.
GIFs compress images by either reducing the number of colors or replacing large patterns with smaller ones. GIF images consist of an 8-bit palette and a maximum of 256 colors. When compressing these file types an image with less than 256 colors will maintain its quality while a full-color image may lose up to 99% of the color. GIFs can either use lossy or lossless compression algorithms.
Although very flexible, TIFF file types are not compressed. Thus their high quality makes them great for storing graphics and printing. Images with this format are huge because they have all the details of the storage algorithm and all the colors, which prompts for long transfer time, slows loading time and uses a substantial amount of disk space. TIFF files can either use lossy or lossless compression algorithms.
The PNG file type finds patterns in the image to use for compressing the size. Compressions for this file type are entirely reversible, meaning images will be recovered precisely as they were. The PNG file type uses 256 colors and supports 8-bit transparency. Unlike JPEG, PNG uses lossless or reversible compression algorithm. However, the extra data expands the file size.
How to compress images before uploading?
A general rule of thumb to use when it comes to compressing images is your images should never be larger than 1MB. You can opt to use third party software to compress your images for your website while still maintaining quality. This software includes:
1. Adobe Photoshop
This is the most popular image editing application since it allows you to keep the optimum quality of your images while reducing the file size. Images that consist of full colour look great in the JPEG format while those with fewer colors can be compressed to PNG-8 or PNG-24 file types. While using Adobe Photoshop, you can personalize the colors, image resolution, and most importantly the image file size. Also, you can preview the compressed image and the file size at the bottom left corner in the preview window.
This is a free, downloadable, open source software that is compatible with Windows, Linux and Mac operating systems. GIMP enables you to see the estimated actual size of the file after compression once you click on the show in the image window.
This is a free image compression tool that enables one to compress multiple files in one go. Using this tool is simple, and all it requires is for you to upload the images you need to be converted. Once the compression completes, you can download these versions.
How to compress images that have already been uploaded?
If you uploaded pictures on your website without compressing them first, you still can! And they won’t lose image quality either. Here’s how to do this:
1. Using Google Pagespeed Insights
Besides providing optimization suggestions for your website, Google’s Pagespeed Insights tool provides alternative compressed images that you can download and replace with your existing web pages.
2. EWWW Image Optimizer
If you are a WordPress user, you can use this plugin to compress image file sizes in WordPress automatically and optimize images you uploaded some time back. You will need to upload the EWWW Image Optimizer plugin on WordPress first. The process will begin with a scan, once it ends your images will be optimized.
Why should you compress your images?
The main reason for image compression is for website optimization. Uncompressed images cause the website to lag and take much longer to load which causes people to leave your page and move on to the next site.
To avoid this, always aim for images with the right dimensions. If the image is too large your page time will be affected and if your pictures are too small, your pictures will be blurry and of poor quality. Using square shaped images will guarantee that the display remains correct and looks great regardless of the orientation.
Additionally, when your website images are substantially big dimensional, then the same images can be scaled down and used throughout the site including in collection images or even thumbnails.