Jump to content

How to Resize and Optimize Images to Speed Up Web Pages

+ 1
  simonstl's Photo
Posted Oct 29 2009 02:42 PM

More megapixels! That is what digital camera manufacturers are hawking these days. As a consequence of this pixel pushing, photographs destined for the Web have become larger in size and higher in resolution. We see sites with full-size unoptimized or partially optimized JPEGs resized into small thumbnails with height and width dimensions. These files can be more than 1 MB in size and yet occupy only 100 x 100 pixels in screen real estate. One megabyte is around a hundred times larger than these files need to be.

A better way is to crop and resize your images to the final dimensions that you want them to assume on your page. Then optimize them in a good-quality graphics program such as Photoshop or Fireworks. You can achieve higher compression ratios using specialized graphics tools from companies such as BoxTop Software, VIMAS Technologies, xat, and Pegasus Imaging. The idea is to reduce the image to the lowest acceptable quality and resolution for the Web (72 dpi).

Tip

JPEG Wizard from Pegasus Imaging is one of the few graphics optimization programs that can recompress JPEGs without the generation loss introduced in a decompress-compress cycle. It does this by working within the JPEG Discrete Cosine Transform space to avoid the decompress step.

You can often switch formats to save even more bytes. For example, you can often substitute PNG-8s used with or without dithering for JPEGs or GIFs at smaller file sizes. The image below, "Image file size versus format" shows the effect that file format and quality have on file size.

Image file size versus format

Attached Image

TIFFs, BMPs, and maximum-quality JPEGs are unsuitable for the Web (see the first row of the image above, "Image file size versus format", all greater than 40 KB saved from original in Photoshop). Switching to a different format can make a significant difference in file size. The PNG in the image above, "Image file size versus format" is 13% smaller than the GIF at equivalent settings. Although this smooth-toned balloon is an extreme example, for most flat-color images PNGs are 10% to 30% smaller than GIFs due to PNG's superior compression algorithm.

Here is a summary of the techniques you can use to fully optimize your images, available from http://www.websiteop...c-optimization/:

  • Plan ahead to maximize file size savings (e.g., simplify background images).

  • Contextually crop to show only the most relevant parts of the image.

  • Resize images to the exact pixel dimensions that you want for each web location.

  • Combine images to save HTTP requests, and optionally create a usemap or CSS sprite.

  • Blur backgrounds for JPEGs. Experiment with "surface blur" settings to see which ones give a clean yet simplified appearance.

  • Use CSS borders or backgrounds instead of embedding borders in images. Don't leave blank background borders of one color to achieve layout goals. Instead, use a tightly cropped image combined with a coded background color.

  • Replace GIFs and JPEGs with PNG images where appropriate; dither where necessary.

  • Specify image size in HTML with width and height attributes.

  • Use Smart Sharpen in Photoshop CS2 or later to make your images pop.

  • Overlay text with CSS or a transparent GIF or PNG instead of embedding text in JPEGs to allow higher compression.

  • Minimize noise in all images before optimizing. Typical savings are 20% to 30% off the file size. We recommend Noise Ninja (http://www.picturecode.com/) and Neat Image (http://www.neatimage.com/) to reduce noise.

  • Minimize dithering for GIFs and PNGs.

  • Minimize bit depth for GIFs and PNGs.

  • Use weighted optimization (regional compression) using alpha masks to optimize backgrounds more than foregrounds.

  • Use "lossy" compression for smaller GIFs and PNGs (where available).

  • Reduce or eliminate drop shadows in layered images. Adjust layers in Photoshop to reduce the width and depth of drop shadows to make images more compressible.


Website Optimization

Learn more about this topic from Website Optimization.

Is your site easy to find, simple to navigate, and enticing enough to convert prospects into buyers? Website Optimization shows you how. It reveals a comprehensive set of techniques to improve your site's performance by boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users, and measuring your site's effectiveness (before and after these changes) with best-practice metrics and tools.

See what you'll learn


0 Replies