Home  |  Business Resources  |  Business Solutions  |  Workshop Articles  |  The bigger picture

Workshop Articles

Digital cameras have made getting photos onto your site easier than ever

Like all good technologies, the cost of digital cameras has fallen in inverse proportion to their quality. You can pick up an excellent mid-range three mega-pixel camera offering resolutions of 1600x1200 and beyond.

Good photography is invaluable when creating a Web site - whether it's for product shots or as an intrinsic part of the site's design. However, there are pitfalls to watch out for, both in terms of quality and size.

If you're using photography on your site, then the format to use is JPEG. The JPEG format was specifically designed for photography and utilises a glossy compression format that enables you to halve the file size of images without much noticeable degradation. All Web browsers support the JPEG format, so you can guarantee anyone visiting your site will see the picture and not an annoying little cross and a broken image holder. Since most digital cameras use JPEG as their native format, this shouldn't be a huge issue.

In order to strike the best compromise between file size and image quality, consider investing in a program like Photoshop Elements 2 or Paintshop Pro. These enable you to see the effects that the different levels of compression have on an image. As a rule of thumb, however, you'll find that 80% compression (that's setting 9 in Photoshop) is just about the ideal - any further squishing will make parts of the image looks washed-out or blotchy.

Remember that the shot you took with the camera is just the starting point. You can crop it, enhance it and otherwise retouch an image in any good editing package. Consider cropping in to a specific element of a picture - flaws such as red-eye can be removed with a single-click filter in a package like Photoshop Elements 2. And even the darkest or most over-exposed of images can be salvaged.

When you're editing your images, remember that you're going to be using them at a hugely-reduced size on your Web page. Typically speaking, an image taken at 1600x1200 will get shrunk down to about an eighth of its size. Also, bear in mind that most cameras take photos at either 150dpi or 300dpi, which is great for print, but not the Web. All Web images should be 72dpi, which is the resolution of a computer monitor - you can find this setting under the usual image size controls in any of the better-known retouching packages.

If you have got a really big image that has to be run large then you should seriously consider chopping it into slices. Both Adobe Photoshop and Macromedia Fireworks will do this for you, right down to producing the code which joins the segments together again via an HTML table. All you have to do is use the "slice" tool (effectively drawing a grid of boxes over the top of the images to indicate slice margins), export the image and then import it into your Web design program.

These days, Flash is so widely adopted (97% of all Web browsers are Flash-compatible) that you can employ it for any number of tasks. Flash is great for slideshows or any form of animation, and given that the image is locked into an .SWF file it's also very secure, making it ideal for things like online portfolio sites. Do not, however, consider creating an animated GIF out of your photos, because the file size will be huge and therefore totally useless online.

Back to Broadband Workshop