Optimizing Graphics
for the Web
by Anna
Hahn
Optimizing your photos and graphics
for the web can be tricky…you
want sharp images that won’t
make your site look like it was done
by an amateur. However, slow-loading
pages keep visitors from sticking
around to look at your site. For
this reason, you need to get the
right balance between image
quality and file size.
The best way to reduce page load
time is to weed
out needless images….only use images
that really contribute to the purpose
of your site. Sometimes less is more.
For images that are necessary on
your site, here are some ways to
keep file
size down and speed up page loading
time:
- use only web-safe colors
- reduce the size of your palette
- make the image only as large
as it needs to be
- keep resolution to 72 ppi (pixels
per inch)…anything higher just
increases page load time
- crop out all but the needed parts
of photographs
- include the height
and width properties for each image on your page so that
the browser can continue loading
the rest of the page while the image
loads
- don’t resize a graphic
after placing it on the page (it
slows
down your page load) – use
your graphics editor to do that job
and THEN place it on your page
- for product catalogs, use thumbnail
images (which are much smaller than
the normal image) and allow users
to click on them to see the full-sized
image; this speeds the initial page
load and gives the visitor some control
Now let’s talk about image
quality. The most commonly used file
formats for web graphics are GIF
(Graphics Interchange Format) and
JPEG (Joint Photographers Experts
Group). These formats are supported
by just about every web browser.
JPEG is the best format for photographs
or complex images with lots of detail.
this is a JPEG
|
the same image saved as a GIF
|
GIF is best for simple shapes and
line
drawings, such as logos, buttons
and banners. This format also supports
transparency,
which is good for irregularly shaped
objects where you want to see the
page background behind it instead
of a white rectangle.
this is a GIF with a transparent
background; the file size
is 1k
|
the same image was saved as
a JPEG; you can see what happened
to the image's background;
file size is 3k
|
Try experimenting with
images in your graphics editor. Many
times you will find that you can
decrease file size significantly
without a noticeable effect on quality.
|
