DO
NOT resize your images in your website design program.
The result will be a small image with the same file size.
DO resize your image in your image
editing program.
|
When you resize your image on your web page to the size of a postage
stamp, you really have not done anything to the image file size at all.
What you are actually doing is telling the browser to re scale the image
on the fly. This creates a lot of work for the browser. The image that
you thought is the size of a postage stamp is still that same large
8 x 10 inch image that takes over 2 minutes to download.
When you use an image editing program to resize the image, and you save
it as a JPEG or GIF, you have actually created a smaller image. Now
that postage stamp size image that you saved as a postage size JPEG
will now load quickly on your visitor's computer.
GIF and JPEG: Two Image Formats You Need to
Know About
If you want to optimize your images the first thing you need to know
about is the two image formats recognized by your web browser. These
are GIF (pronounced jif as in Jiffy Peanut Butter) and JPEG (pronounced
Jay-Peg). Both JPEG and GIF are compressed. That means that information
has been organized inside the file in a special way in order to minimize
the file size.
The difference between JPEG and GIF is the way that they compress the
data. JPEG compression is designed to optimize photographs or images
with fine gradations of color. GIF compression is designed to optimize
images with large continuous areas of color, such as illustrations.
Some Examples:
 |
 |
 |
Low
Quality
JPEG Image:
size 3KB |
Medium
Quality
JPEG
Image:
size 6KB |
High
Quality
JPEG Image:
size 8KB |
|
Notice
the more you compress a JPEG image, the more artifacts you begin
to see. This is because you are actually loosing information.
JPEG compression is therefore called lossy compression. You may
also notice that the color fidelity does not change. Colors are
not lost in JPEG images. When you use JPEG compression you
will trade off between image quality and image file size.
In the example above, the Medium Quality image is acceptable and
is 2KB small than the high quality example.
Note: if you had tried to use GIF compression on the rose, the
file size would be over 15KB.
|
 |
 |
 |
4
Colors
GIF Image:
size 0.9KB |
16
colors
GIF
Image:
size 1.1KB |
256
colors
GIF Image:
size 1.4KB |
GIF
is a lossless compression. Data is not lost. However, color fidelity
is not preserved. This is because GIF indexes or limits the total
number of colors to 256 or less. When using GIF compression,
you trade off between color fidelity and image size. In the
example above the 16 color image gives acceptable color fidelity
and its file size is almost as small as the 4 color image.
Note: that if you tried to use JPEG compression on this image, the
file size would have been over 2.3K .
|
|
