Every once in a while I will run across a web page containing photographs that take forever to load.  Almost every time the problem is that the author of the page has taken some giant sized photograph (a jpg file) and resized it within the web page.  The size of the source file is many times larger than the displayed size.

Webmasters, take heed.  Not everybody has a DSL or cable connection.  A lot of us still crawling along in the right lane with one of those 56k telephone modems.  If you've got a bunch of pictures on a page or blog that display somewhere around 400 x 300 pixels but the jpg files themselves are still at whatever size they were when they came out of your camera, you probably need to resize your images.  I've seen relatively small web pages with four or five photographs take up to twenty minutes to load.  It's because the photographs are almost a megabyte in size... each.

Here's an example.  Look at this page (opens in a new window).  If you're on a dial-up connection, click on the link, go get some lunch or something, then come back.  (If somehow you've been to this page before, clear your browser cache before loading the page so you get the full effect).  The first time I went to this page, it took ten minutes and thirty seconds for all the pictures to load.  Once it's done loading, scroll down and right click on the first photograph below the heading, "First Jam, Approximately 250 people attended".  The filename is "jam1.jpg".  It's displayed size within the web page is 457 x 307 pixels.  You want to see what the actual source photograph looks like?  Click here.  Big, huh?  It's 2160 x 1440 pixels and is a whopping 865,359 bytes in size.  Although not quite as large, every photograph on the web page is like this.

What can you do?  If you are taking a very large sized photograph and putting it on a web page at any size less than what the original picture is, resize the picture itself.  For instance, if you are going to take a picture that is 1600 x 1200 pixels and show it on a web page at half that size which is 800 x 600 pixels (still even a little large for a web page), if you resize the original image to that same size you would reduce the file size by approximately 75%.  Changing the size of your images to the exact size they appear in the web page will not only take up less space on the server where they live, it will greatly decrease the amount of time it takes for your page to load.

How to Optimize Your Pictures for the Web

• Scanning Resolution

  Another factor that affects the size of your image is resolution (expressed as dpi - dots per inch).  If you scan your photograph, scan it at the highest resolution possible.  If you want to be able to print the photograph you'll want to keep it at the highest resolution.  For viewing on a monitor, such as a picture intended for use on a web site, you should reduce the resolution to 72 dpi.  Anything more is just adding unnecessary bulk to the file itself.  Scan at high resolution first, though, then reduce.

• Resizing and Sharpening

  After scanning your photograph or downloading from a digital camera you may have a picture that, when viewed at 100%, is enormous.  Now you'll want to start reducing the size.  Do it in 50% increments.  Let's say the size at which the picture will be displayed on a web page is a width somewhere less than 400 pixels and your original width is 1600 pixels (1600 x 1200 perhaps?).  As a first step, resample the image at 50% of the original which will be 800 x 600.

  Notice anything?  Did your picture get blurry?  Unchecked, this blurriness will only get worse as the picture gets smaller.  To fix it, after each 50% reduction in size (and after the final resizing), I use a sharpening tool called "Unsharp Mask" with radius set to "1", threshold at "0".  Continue to resample using 50% increments with the Unsharp Mask (your finished size may not be an exact 50% increment).  After the final Unsharp Mask, use a tool called "Gaussian Blur" at a 0.2 pixel radius setting.  The Gaussian Blur will add an imperceptible blur that will help reduce your finished file size without any noticeable loss of image quality.

Resized from 1280 x 960 to 202 x 152 pixels without sharpening.

Resized incrementally using Unsharp Mask and Gaussian Blur

The above picture started out as a 328,106 byte JPG image that was 1280 pixels wide and 960 pixels tall.  I could have used that picture for the image on the right but, by resizing the original image to the same size as what was going to be displayed by the browser (202 x 152 pixels) I reduced the size of the file to 14,390 bytes.  That's less than 5% of the original file size.  That means that the picture on the right will load about 20 times faster than the original full-size image file.  That's a big difference.

Important:  When resizing your images be sure you make any needed resolution changes first, then change the actual pixel size (width and height) of the image.  Also, make sure you keep the aspect ratio (Width:Height) the same in the final size.

• What Kind of File to "Save As"

  For photographs, save the files as JPG's.  For graphics that have less colors than photographs (usually anything that is not a photograph), use GIF's.  Here are some examples:

JPG file, normal compression

JPG file, overcompressed

GIF file

Some graphics programs allow you to adjust the level of compression for jpg files.  The higher the compression, the smaller the file size, but the image quality will suffer so you have to find a happy medium.  For the web I've found that a compression setting somewhere between 15 and 20 (for Corel Photo-Paint, the actual values used by your program may vary) does okay most of the time.  Too much compression and you get a significant loss of detail, particularly around borders between light and dark areas.

• How Do They Do That With HTML by Carl Tashian is loaded with great tips like effective image resizing.  In fact, that's where I found the tips above.
• Web Graphics Basics by Mark Bakalor.
• Web Pages That Suck - A funny site that shows you how to keep your web page from... well... sucking.