Image Optimization for the Web

Posted on November 10, 2010

A very important aspect to have in mind when deploying a website or any other web application is the loading speed. Nobody wants to wait centuries before a web page is displayed.

One way to accomplish this is optimizing the size of all the files that are going to be downloaded by the user. And, as you know, images can be the most demanding files in a website.

A few months ago I found Yahoo Smush.it – an incredible web tool that lets you reduce the size of your images. Smush.it is a lossless tool which means that you can optimize all your images for the web without changing their look or visual quality.

Smush.it is very easy to use. All you have to do is tell it what image or images you want to optimize and download the optimized versions. You can do this using one of two available methods:

• you can bulk upload a set of images, or
• you can type a list of URLs with the online path of the images.

You can optimize JPG, GIF, and PNG images that are up to one megabyte in size. There is a chance that, when processing a GIF image, Smush.it converts it to PNG. The tool only does that when the resulting image is smaller in the PNG format. Most of the images in the GIF format could be smaller if you used the PNG-8 (PNG with 8 bits per pixel) format.

As an example, I saved the screenshots from the smushing that I did in the images of my previous post – Online Background Images Generators.

Here you can see how I saved 47.28 KB or 19.43%. This may not look much but imagine if you had 1000 visitors downloading these images every day.

Smushing your images has three big advantages:

• You give a better experience to your users by allowing them to surf a fast loading website;
• You get better search engine rankings because, at least Google, is penalizing slow loading websites;
• You save disc space and bandwidth;

As for the disadvantages, I can only think of one:

• You ‘waste’ about 45 more seconds every time you write a post using smushed images.

• Optimização de Imagens para a Web (Versão PT)

This entry was posted in Optimization and tagged file optimization, image optimization, web optimization. Bookmark the permalink.