The traditional methods for reducing your image file sizes have
been either to reduce their dimension or reduce their resolution.
CSS (Cascading Style Sheets) provides some other great techniques
and tools for optimizing your graphics. Depending upon your
design, this method can be used to construct some quite complex
page layout schemes that use a fraction of the bandwidth that would
be needed without CSS.
The two most common file formats for images on a web page are
GIF ".gif" and JPEG ".jpg". GIF reduces the number of colors in an
image down to a maximum of 256 and then uses several
compression schemes (LZW is the most common) to compress the
image. A GIF image can only be reduced in size by reducing its XY
resolution or by reducing the number of colors used. In either case it
is simply a method that throws away image information.
JPEG uses several Loss/LessLoss compression schemes. With JPEG
an image's file size can be reduced while maintaining its resolution
and color depth, again by throwing away picture information.
Like JPEG, CSS will allow you to reduce an image's file size while
maintaining its resolution. Although the quality of a complex image
such as a photograph will be reduced, some simple images will
experience little or no degradation at all. CSS can be used to display
any image format at any size.
I have posted several examples without CSS resolution adjustment
at http://www.imswebtips.com/is18fig1.htm. Each image displays
the same picture using GIF or JPEG formats at different resolutions.
The GIF files must be smaller to reduce file size. The JPEG images
can maintain their resolution as the file size is reduced but loose
information or quality.
CSS allows you to specify a screen resolution when displaying an
image regardless of the resolution of the image. This is
accomplished by placing the image tag within a <DIV> tag that
includes the resolution. An example is:
In this example, the image will be displayed at double the resolution
of the image file resolution. I have posted an example at is18fig5
that displays the same file scaled to several different sizes. In each
case, the original file resolution is the same.
Now we can take this one-step further to display several different
files at the same size. is18fig3. In
each case the file resolution is used to define the output quality of
the image. By using CSS, you can reduce the resolution of your
image while maintaining the design needs of your page.
Each of the examples displays the same picture using different file
formats and resolutions. Using CSS can precisely control the
tradeoff between quality, resolution and design. What is more, it
works equally as well with all image file formats.
These examples scale an image by a small amount. There is in fact
no practical limit to how much an image can be scaled. Two
Thousand percent works just as well as 2%. Knowing this it is
possible to create quite complex page layout schemes that use a
fraction of the bandwidth that would be needed without CSS. Take a
look at is18fig4. Although this
web page appears to contain a lot of graphics, in fact it contains less
than 7k with the Dwarf icon and less than 3 k without. The images
for this page can be viewed at actual size at: is18fig5
As I have stated in previous articles, a web designer's primary
objective should not be to create fast loading web pages. Your
primary objective is to create a web page that encourages your
visitors to explore your site and products. All else being equal
however, finding ways to optimize your graphics and reduce
bandwidth is a valid goal of every web page author.
"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on
creating, maintaining and promoting their web sites.
