Image optimization

Optimizing images for the web involves scaling them down both in image size (dimension size in pixels) to fit screen sizes for which the website was built and their file size (in KB kilobytes) so that they can be lightweight without losing any visible definition. This process is quite complex and is done manually as all images are different and automatic optimization tools cannot adapt to different images.

When optimizing an image, you have to take into consideration those two major factors:

1 – Image size – There is no point in using a 4000 pixels wide picture for your site when it is designed for 1200 pixels and lower. High-resolution images will slow down the load time of pages.

2 – File size – Large images are mainly used for headers and smaller ones for illustrating articles and pages, in line with texts. Those images, when resized and scaled-down, get also reduced file size. Ideally, file sizes should not exceed 120KB and, in most cases remain well below 100KB (100KB = 0.10MB).

Purpose

The main purpose of optimizing your images is to reduce the size of the picture to the lowest size possible while ensuring that the quality remains as good as the original for the human eyes and computer screens.

There are two ways of doing this:

• Automatically
• Manually

When you use automatic tools to reduce the size of images, it will help to minimize the load time, but you risk lowering the quality of the images too when you compress them. Compressed images will not be very attractive to your viewers.

But with manual image optimization, the image load time will be reduced, while the performance of the image will be enhanced. Manual optimization includes:

• Lossless compression method – In this case, the quality of the image will not be compromised. However, file sizes will still be important and load time will be slow. This will work well for websites that do not use a lot of images.
• Lossy compression method – In this case, the quality of the image will be slightly reduced, but load time will be increased. This is the best approach if your site uses lots of images.

Image size is reduced as a result of some of its header detail being removed. This allows you to save the image in JPG file format (PNG format is only used for logos and graphics because it allows background transparency). You will be able to control the size and detail of each image.

For right image optimization, you need to find a balance between the image format, compression size and image dimensions.

Most photo editing tools have an inbuilt image compression feature that you can use to compress images. There are also online tools that you can use to compress images manually.

You can use these manual tools to compress your images before you upload them to your site. This will help you save space in your hosting account. Your load times will also be shorter since you will optimize each image before uploading it.

Example

This is a 500 x 280 pixels thumbnail of the original picture which has a dimension of 6,240 x 4,160 pixels and file size of 4,473,642 KB (4.4 MB). Click on the image to see/download the original image in full size and zoom in for details.

Conclusion

Optimizing all images that are used in a website not only reduces the pages’ and site’s overall load time but, at the same time, offers your visitors a pleasant experience and will also boost your SEO ranking. Use the tips discussed in this article to optimize and scale down your images without compromising their quality. This will leave you with pictures that are still attractive enough to be displayed on your site, plus shorter load times.