One way to draw visitors into your Web site is to make it look as attractive as possible. But what's the best image format to use?
Following Marc Andreessen's addition of the tag to HTML in the early 1990s, Web pages could be transformed from drab, utilitarian files into more interesting documents. At the same time, poorly optimised images have been the curse of the unwary Web browser, slowing download times and clogging up modems ever since.
It takes two
For most Web pages, the main choice is whether to use JPEG (Joint Picture Experts Group) or GIF (Graphics Interchange Format). JPEG is by far the most common file format encountered, and it's easy to see why. Capable of displaying more than 16 million colours, combined with high compression rates, this is the easiest way to produce bright images that will download quickly.
In most cases, the older GIF specification compares very unfavourably. Restricted to 256 colours, its lossless compression rate often results in larger file sizes. So why are GIF files still so common on Web sites? The key word here is "lossless".
JPEG achieves high compression by discarding information, a process often referred to rather quaintly as being "lossy". In a colourful photograph, this is unlikely to be noticed. But where there are large areas of a single colour, it can result in the appearance of noticeable speckles or artefacts. GIFs are more efficient when dealing with graphics such as logos or backgrounds, often producing smaller, cleaner files than equivalent JPEGs. Another advantage is that the GIF 89a format can be used for animated images (though this has lost ground to Flash animation) and transparency. By the end of the 1990s, the PNG (portable network graphic) format had also appeared, an open-source format that combines the best features of GIF and JPEG. JPEG, GIF and PNG will satisfy the requirements of most Web developers, but all of them are raster or bitmap formats that describe the actual pixels of an image. Vector drawings, familiar to most PC users from applications such as Illustrator or Corel Draw, produce graphics that describe lines between points and curves (hence vectors).
Although less realistic-looking than bitmaps, vector illustrations can provide much smaller file sizes. The most common types are Macromedia's Flash or the open-source, but currently less popular, SVG (scaleable vector graphic) format.
Vector graphics may be the best option for a professional-looking Web site, particularly as current browsers incorporate the Flash plug-in. For the rest of this column, however, we're going to concentrate on GIFs and JPEGs.
Since the explosion of the World Wide Web in the mid-90s, just about every graphics program on the planet includes an option to export graphics for online use - though Photoshop notoriously held out until version 5.5. When using an option to save an image in a Web-friendly format, there are several points to bear in mind.
For most JPEGs, there's a trade-off between file size and image quality that's generally straightforward. If you use basic settings in an application like Photoshop, you'll want to experiment with options to see which produces the best effect. Particularly useful in this regard is the "Save for Web" feature, which allows you to compare multiple settings before you commit yourself.
Optimising GIFs is slightly more complex, but worth persevering with for superior results. First of all, be sure to specify not more than the necessary number of colours - four, eight or sixteen for a simple logo, for example - rather than the default 256. Second, experiment with dither settings (where the colours of neighbouring pixels are mixed together).
Finally, and this is especially important when using transparency, use a matte setting. This lines the edge of your picture with pixels the same colour as your background. Without this, you can end up with ugly white dots around the graphic.
Slicing images with Fireworks
For particularly large or complex images, one way to minimise file sizes while maximising quality is to slice your graphic. Different sections are loaded into a table, with each section optimised to look its best.
This is also the way to create intricate images that may need to display rollover buttons or hotspots that link to different parts of your site. We've used Macromedia Fireworks MX to slice an image, but the same technique is available in other applications such as Adobe ImageReady.
After you have chosen your graphic in Fireworks, select the Slice tool in the Toolbar under the section headed Web. Pressing <K> will toggle between the rectangular and polygon tool. The latter is useful for creating irregularly-shaped hotspots.
Make sure that the button to display slices and hotspots is selected, as this will make it easier to see where you need to draw on your image. Each section of a sliced image requires a name. Fireworks automatically inserts a name for you, but you can customise this in the Properties palette. Once your image is divided up, click on the Optimise panel (usually on the right-hand side of the screen) and enter settings for each slice. Click on File-Export and select the folder into which you want to save your images.
Fireworks exports an HTML table with the image used to rearrange your exported sections, such as whether the table should include comments for popular Web editors or transparent spacer images to help align the segments of the table.
That's it for this month, but we've only scratched the surface of the capabilities of Fireworks with regards to image slicing. Using "Behaviors" (click on Windows-Behaviors), you can also add extra functions such as a rollover image or pop-menu, as well as add a link that will take visitors to another part of your site.
Site of the month
Getting the right graphics for your pages often makes or breaks a site. And for this column, there's not so much one site of the month as several that come highly recommended.
While sites such as www.freeimages.co.uk provide some useful graphics, top-quality photography usually requires some payment. With that in mind, I suggest visiting the big-name stock image agencies like Getty Images (www.gettyimages.com), Corbis (www.corbis.com) and Image 100 (www.image100.com). Getty and Image 100 offer some graphics royalty-free for personal use.