PIXELALLEY.COM HOME PIXELALLEY SECTION LINKS PAGE
File Size and Image Quality Demonstration
Saving Images for the Web with
Decreased File Size and Loading Time

by Jinny Brown  e-mail
copyright 1994 - 2002, Jinny Brown

NOTE: Please be patient while this page loads. It contains several images, some of them large in order to demonstrate JPG image compressions at various levels of quality.

Thanks!


After we've spent hours, days, or even weeks creating an image, it's understandable that we want to show it off in the best condition possible. That can tempt us to upload and display an image file that's both too large and too slow to load (display). Large files can quickly eat up precious server space, just as they eat up space on our hard drive, and when they load too slowly, the viewer may become impatient and even leave without waiting to see our masterpiece.

Below are five versions of the same 300 ppi (file size 880 kb) TIFF file after using Photoshop's Save for Web to open Image Ready and save an optimized JPG.

NOTE: Since images can only be displayed on the screen at around 72 ppi or 96 ppi, there's no need to save them for the Web at 300 ppi, whatever software is used to prepare images for the Web. 

These five images should demonstrate how much a JPG file can be compressed and still retain reasonable visual quality while greatly decreasing file size (equals less server space used) and decreasing loading time (equals making viewers happy). 

The settings used in Image Ready are listed below each image. The first image is as close as possible in visual quality to the original TIFF image and it's included for comparison only as the file size is unnecessarily large for use on the Web.

JPG
Maximum
Quality: 100
Filesize: 153.8 kb
Loading time: 56 seconds @ 28.8Kbps


JPG
Maximum
Quality: 80
Filesize: 82.78 kb
Loading time: 30 seconds @ 28.8Kbps


JPG
High
Quality: 60
Filesize: 49.74 kb
Loading time: 19 seconds @ 28.8Kbps


JPG
Medium
Quality: 30
Filesize: 26.88 kb
Loading time: 10 seconds @ 28.8Kbps


JPG
Low
Quality: 10
Filesize: 17.55 kb
Loading time: 7 seconds @ 28.8Kbps


When saving your images for the Web, try to find a happy medium between large file size and loss of image quality. Out of these examples, I'd probably pick the one saved at: 

JPG
High
Quality: 60
Filesize: 49.74 kb
Loading time: 19 seconds @ 28.8Kbps

It's good to also consider image dimensions as some viewers won't have large screens.
For instance, on a 17" monitor set to a screen resolution of 1024 x 768, an image about 800 x 600 pixels displays without forcing the viewer to use scroll bars.

If you're displaying images in a message board, try to keep your image dimensions no larger than 640 x 600 pixels. Message boards will vary in width, but this should allow readers to print the message thread on an 8-1/2 x 11 inch paper or PDF file page and also prevent forcing the message thread's text to spread past the edges of a viewer's screen.

Happy Image Making!

Jinny_____


Jinny Brown, December 1, 2002

©1994 - 2002, Jinny Brown
e-mail

All Corel Painter screen prints on these pages are used with permission from Corel Corporation.

PIXELALLEY.COM HOME PIXELALLEY SECTION LINKS PAGE