51. Post web images in choice of
formats
By Mark Alberstat
When building a website, choosing the right images to go along with the
text and layout is essential for the site to be well-received. If the site
is about your recent trip to Disney World, the choice of pictures will be
obvious. What many people don't realize is that there is a small variety
of image formats to choose from and they are not all ideally suited to all
uses.
With the popularity of digital cameras, people can easily now post many
images to a website showing each stage of their vacation, home-building
project or whatever else their site is designed for. Most cameras,
however, save pictures in tiff format, a file type which is not acceptable
for web pages. These pictures have to be saved in another format for
viewing on the web.
Basically web pages use three types of images: GIF, JPEG and PNG. A fourth
type, SVG, can also be used and is growing in popularity. It is a vector
image, while the other three are bitmaps, but it has not yet been widely
accepted. Bitmap images are pixel based and are dependent on the
resolution the image was created at. Vector images, however, are based on
mathematical formulas that define the image. Because of this, vector-based
images are often smaller than bitmap images and zooming them in and out
does not diminish their quality because the underlying mathematics
understands that a circle is still a circle no matter what resolution.
GIF (graphics interchange format) was developed for CompuServe and is an
eight-bit format type. This type can compress bitmaps down to half their
size without any loss of quality, a so-called lossless format. GIF images
may have transparent areas for background textures or images to appear
through them. They are best used for images of 256 colours or less.
JPEG (Joint Photographic Experts Group) was developed as an alternative to
GIF because it can handle photographs so much better. This image type is
24-bit and supports millions of colours. JPEG, or JPG, is a "lossy"
format, meaning that compression takes away from the quality of the image.
If you are posting images from your digital camera, it is best to do any
editing to the images before you save them as JPG, where they can lose
some of their depth and quality.
PNG (portable network graphics) is also a reaction to the drawbacks
associated with the GIF format. The biggest drawback to this format is
that only the most recent web browsers support it so anyone viewing your
website with an older browser will not be able to see these graphics. One
of the biggest advantages of PNG format is related to its ability, like
GIFs, to have transparent areas. PNG has the ability to have pixels that
are partially transparent, allowing an image to have better transparent
areas in shaded portions. Unlike GIF, PNG does not allow animation and is
considered a single-image format.
SVG (scalable vector graphics) is the most recent of the image formats and
is being created by W3C, the international organization that oversees
standards for the World Wide Web. SVG images are vector, which allows them
to be zoomed in and out without losing any detail. The format can
accomplish this while still maintaining a small file size, important when
web users are on slow links.
With this brief introduction to website graphics, you should now be able
to make some educated choices about the graphic formats to use on your
next web page.
The following are some related links:
entropymine.com/jason/testbed/pngtrans/
shows a variety of PNG images and how they are shown in different browsers.
www.w3.org/Graphics/SVG/ is
the home page for SVG.
The Mousepad runs every two weeks. It's a service of Chebucto Community
Net, a community-owned Internet provider. If you have a question about
computing, email mousepad@chebucto.ns.ca. If we use your question in
a column, we'll send you a free mousepad.
Originally published 16 January 2005
