The way you handle images in your website can have a substantial effect on your site performance.
There are several actions you can take to make sure images are optimized and load as quickly as possible:

Compress images using Smush.it

One of the best image optimization tools available is Smush.it by Yahoo.

It lets you reduce image size without any significant quality loss.

To work with smush.it you first need to install yslow addon for Firefox and navigate to the page that contains the new images. Then:

  1. In Firebug panel, click on yslow tab and then go to Tools tab.
  2. Click on All Smush.it.

In Smush.it results tab:

  1. Click to download all compressed images.

    2. or

  2. Go over the images to see which one has a high percentage of savings and click on the image name to download it.

Detect image dimensions with Google Page Speed

Google Page Speed extension for Firefox is a bit different from yslow and has many useful tests integrated.
Besides optimizing image size in KBs, there are 2 more important tests to do in order to increase image rendition speed (by browsers):

  1. In Firebug panel, click on Page Speed tab.
  2. Specify image dimensions: it is important to specify Width and Height attributes for every image you add to your webpage. Otherwise the browser is forced to calculate these attributes for the image and this of course wastes time.
  3. Serve scaled images: detects whether there are any images for which you have set height or width that are different from the image real dimensions. For example, an image that is originally 100px*100px can be displayed smaller or larger, by setting different HTML or CSS height and width.

    This is not recommended because, for starters, scaled images always seem to have lower quality comparing to non scaled images. Secondly, when forcing an image that is originally 100*100 to be 50*50 by HTML/CSS, you send redundant KB that could have been saved.

    The only case in which you should scale an image, is when displaying the same image several times in various dimensions in the same page.
    For example, if you want to display an icon in various sizes in the same page (large-100px*100px, medium-50px*50px and small 30px*30px), you should add the 100px image and then scale it for the smaller versions.

google-page-speed-images

Two more image related tips

  1. Use CSS sprites when possible: do not use images for layout backgrounds, site wide icons and menus. Check out this post to read more about when CSS sprites should be used instead of images.
  2. Store images externally: websites and blogs that have mass traffic and plenty of photos (such as webdesignerdepot) use CDN to store their images. Others use image hosting servers such as imageshack and photobucket.

    If your site is hosted on shared hosting, the probability for bottlenecks is already high. Therefore, storing images in another server will ease up on the bandwidth load (of your main hosting), and will help your site load faster.

Do you optimize your images? Which tool do you use for image compression?

Additional resources

Topics:   |