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 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 is18fig6.htm
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.htm. 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.htm. 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.htm.
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.
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
