Webmaster Guide >
Optimizing Website Graphics and Photographs
Optimizing Website Graphics and Photographs
by Patrice Roarke
How long do you wait for a website to load before clicking away and trying
another URL? Most people won’t wait longer than an average of 8 seconds with a
56K modem. Although many things can effect the load time of a website,
improper and overuse of graphics and images is one of the more frequent
problems.
Optimizing website graphics involves discovering the balance between image
quality and image size. To optimize your website images follow these three
steps.
Resize the image
Reduce the colors used in the image
Save the image in a compressed file format
Step 1 – Resize the Image
Use an image-editing program to resize your photograph or graphic to the exact
size that you will need for your website. For example, if you have a
photograph that is 7” wide by 5” high or 504 x 360 pixels, but want it to
appear on your website at 150 x 107 pixels do not place the larger image on
your website and resize it using your web building software. The image will
still load (slowly) at the full pixel size and force the browser to resize it
to 150 x 107 after the image has loaded.
Always include the height and width attributes. This will tell the browser
what size the image is going to be and allow for a quicker page load.
Step 2 - Reduce the colors used in the image
Eliminating unnecessary colors is another way to reduce your image size. A
graphic saved with 2 colors is logically going to be smaller than one saved
using 256 colors. Utilize your image editing software to experiment with
different options to locate the optimal balance in image quality and size.
When the number of colors used in an image are dramatically reduced it will
result in color banding. The gradations in areas where colors have been
eliminated are filled in with solid bands of color.
Dithering can help reduce the color banding. Although dithering will increase
your file size slightly, it can help the image quality by combining existing
colors to replace eliminated colors in the banded areas. This actually tricks
the eye by giving the appearance of more colors in your image.
Step 3 - Save the image in a compressed file format
Let's begin with understanding the correct types of image files to use on your
website. The two common file types that you will find on a website are GIF and
JPEG.
GIF (Graphics Interchange Format) pronounced Jif.
GIF files are loss-less compressed image files. This means that when the image
file is compressed data is not lost, however the file is limited to 256 colors
or less. This format optimizes images with large continuous areas of color.
Since you will loose some color fidelity with a Gif image, use them for simple
line drawings, shapes, small icons or other non-complex graphics.
When optimizing an image as a GIF you will need to determine how much image
quality you are willing to sacrifice to obtain a smaller file size.
GIF files also allow you the option of setting transparent backgrounds. This
is necessary if your image is being placed on a patterned or gradient
background. Otherwise you will end up with a solid block of color surrounding
your image. This does not look attractive or professional.
Use the interlaced option for larger GIF images. This will cause a blurry
image to appear first which will then load to the final image. Although the
load time will not decrease this does give the impression of a faster loading
page, as the image appears gradually.
JPEG (Joint Photographic Experts Group) pronounced Jay-Peg.
JPEG images use a lossy compression technique. Every time you save an image as
a JPEG it will loose some data. To avoid this, be sure to save your original
image in a lossless format (such as PNG) for editing purposes.
A JPEG image is saved in a 24-bit format, which allows for millions of colors.
This is why JPEG files should always be used for photographs or complex
graphics that use many colors or gradations. Most image editing programs offer
three levels of JPG compression. You may need to experiment to find the
correct balance of image quality and size.
For larger images use the progressive option, again to allow the image to load
gradually giving the viewer the impression of a quicker loading page.
Remember to reuse the same image as much as possible to utilizing the Cache
(pronounced cash) feature on the hard drive. This way once the image has
loaded, it will store on the hard drive and be readily available for the next
request.
Author Bio: Patrice is the Creative Director for Artisan Design Studio, an
Internet based full-service graphic design firm. Previously Patrice worked as
the Art Director for a marketing communications company and as a freelance
graphic designer. http://www.artisan-ds.com/
This article is reprinted with permission from www.WritingCareer.com