Internet: Visual appeal

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 unfavour­ably. 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 photo­graph, 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 Macro­media's Flash or the open-source, but currently less popular, SVG (scaleable vector graphic) format.

Optimising graphics

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 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 (, Corbis ( and Image 100 ( Getty and Image 100 offer some graphics royalty-free for personal use.

Join the newsletter!


Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Jason Whittaker

PC World
Show Comments

Cool Tech

Toys for Boys

Family Friendly

Stocking Stuffer

SmartLens - Clip on Phone Camera Lens Set of 3

Learn more >

Christmas Gift Guide

Click for more ›

Brand Post

Most Popular Reviews

Latest Articles


PCW Evaluation Team

Aysha Strobbe

Microsoft Office 365/HP Spectre x360

Microsoft Office continues to make a student’s life that little bit easier by offering reliable, easy to use, time-saving functionality, while continuing to develop new features that further enhance what is already a formidable collection of applications

Michael Hargreaves

Microsoft Office 365/Dell XPS 15 2-in-1

I’d recommend a Dell XPS 15 2-in-1 and the new Windows 10 to anyone who needs to get serious work done (before you kick back on your couch with your favourite Netflix show.)

Maryellen Rose George

Brother PT-P750W

It’s useful for office tasks as well as pragmatic labelling of equipment and storage – just don’t get too excited and label everything in sight!

Cathy Giles

Brother MFC-L8900CDW

The Brother MFC-L8900CDW is an absolute stand out. I struggle to fault it.

Luke Hill


I need power and lots of it. As a Front End Web developer anything less just won’t cut it which is why the MSI GT75 is an outstanding laptop for me. It’s a sleek and futuristic looking, high quality, beast that has a touch of sci-fi flare about it.

Emily Tyson

MSI GE63 Raider

If you’re looking to invest in your next work horse laptop for work or home use, you can’t go wrong with the MSI GE63.

Featured Content

Product Launch Showcase

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?