About Image Optmization
Article ID: KB101298
Graphic and image optimization is an important topic to consider when
creating graphics for web sites. While some of your viewers may have
super-high-speed internet, able to download all sizes of graphics without a
problem, chances are that several of your viewers may be on dial-up or slow
connections. The smaller your images are, the quicker your images will download,
and the faster the viewer can see your web site.
Many graphics programs provide web optimization tools. For example, in Adobe
Photoshop, there is the option to Save a File For Web, which provides you with
different "previews" so that you can test different file formats and qualities
to strike the perfect balance between image quality and small file size.
When saving a photograph or a photo-realistic image with many gradients
and colors,
JPEG is the graphic file format of choice because it can "compress" the data
while preserving the quality. When saving a jpeg, you can usually specify what
level of quality you want to save at. Pick a level that compromises between
keeping the file size small (usually under 20KB is a good size for a main
graphic) but doesn't degrade the quality too much.
When saving a file that has a lot of solid color spaces (think cartoons,
illustrations, and simple logos), the
GIF or PNG formats are usually best because they allow you to limit the number of
available colors - and thus, the amount of information stored in the image.
.jpg image optimization
Here is the original graphic, at 85.7 KB.
Saving the graphic at 80% quality cuts the file size
down to 44.9 KB, with no visual loss of quality. The file size, however,
is still rather large.
Saving the original graphic at 40% quality cuts the
file size to 15.3 KB. While the graphic is not as crisp, it is "pretty
good." This would probably be the preferred choice for a web page out
of the examples shown.
The original graphic at 5% quality is 6.39 KB, but
the quality is definitely awful.
Compare the jpegs' file sizes with the gif file sizes. Saving this image as a
gif is impractical because of the number of colors in the image, as the
following diagrams illustrate:
The graphic saved as a gif with 225 colors (the
maximum quality for a gif) is 43.4 KB, and looks okay (but the file size
is a little large).
Saved at 128 colors, the file size is cut to 36.3
KB. The graphic still looks okay, but is still a large file size
compared to the display size of the graphic.
With the original saved at 32 colors, the file size
is finally manageable at 22 KB, but you can see that the colors in the
graphic are starting to "dither" - that is, because the number of colors
are limited, you can see little dots for where the same colors start to
be used again.
Saved with 8 colors, the file size is 11.9 KB - just
under the ideal jpg (15.3 KB), but the quality is horrible. The
dithering is very obvious.
.gif image optimization
Here is a fairly simple graphic - solid blocks of
colors, and few colors, which is perfect for saving as a gif. Even when
saved at 256 colors, the file size is 7.19 KB.
Saved at 32 colors, the file size is a mere 3.95 KB,
with no noticeable depreciation of quality! This is probably the best
image to use in a web site out of the examples here.
At 8 colors, you can begin to see harsh edges separating colors.
The following illustrations will show why images with few colors and simple
lines are best saved as gifs instead of jpegs:
At 100% quality, this .jpg looks as good as the gif,
but the file size is almost seven times more than the optimized 3.95 KB
image above (the .jpg is 19.6 KB!).
At 50% quality the jpeg is 8.26 KB - still over
twice the size of the optimized gif. You can also start to see a
degrading of image quality in the green leaves - they look a little
smudged.
At 10% quality, the smudging in the solid colored
areas - even the white areas - is very obvious. And the file size is
still 4.48 KB.
Authors and Contributors:
Corrie Haffly
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1043/kb101298.htm
permalink to this article:
http://www.pixelmill.com/support/kb101298.htm
Back to top