From Camera to Browser: Optimizing Images for the Web

Over the years, the world has seen a change in the way that cameras are made and how they store image data. In the past, it was film. Now, for the most part, it’s digital information. In this article, we’ll look at the ways that images make it from the camera to the web.

First, we’ll look at old school film cameras. Despite the migration to digital, there are some photographers who still prefer the use of film. In this case, you’ll need to take the film to a service bureau or photo lab which has the equipment to scan the film and turn it into a digital format, which is burned to a CD-ROM. Once you have that, you can load the images into any image manipulation program and start making images ready for the web.

Image File Formats

Digital cameras use three main file formats: JPEG, TIFF and RAW. JPEG is the most common format for most of the inexpensive to mid-range cameras. The JPEG format is sometimes referred to as a lossy format, because each time the image is saved, data is lost. To make sure you get the best results out of your camera, set the camera to the highest quality file setting and with the lowest compression.

In some high-end cameras, you can make use of the TIFF format which offers high quality uncompressed files. The down side is that the files can be huge.

The last format we’ll look at here is RAW, sometimes known as Camera RAW. With this type of file, no image processing is done in the camera. If you want to change the qualities of a RAW file, you’ll need to use an image editing program, such as Photoshop or Paintshop Photo Pro. One other thing–some mid-range to high-end cameras, such as the Canon G9, offer the ability to shoot a RAW and JPEG image at the same time. As with the TIFF file, RAW files can also be quite large.

On a side note, the Camera RAW Lab in Corel PHOTO-PAINT gives you incredible control over image quality and it’s the reason that many professional photographers choose this format.

For the web, there are two main image formats available, JPEG and PNG. I always recommend using JPEG and the reason is that the PNG format will bloat your file sizes by 5×10 times. The end result will be slow loading pages which will cause you to lose viewers.

With JPEG, you have a variety of options for saving the image, but it’s necessary to exercise caution, because if you compress an image too much, the quality will suffer. It’s necessary to use image processing software to test various different compression settings to see what will happen to the quality of the image. Some programs, such as Corel PHOTO-PAINT or Photoshop, will allow you do see a comparison of images with different levels of compression.

Preparing Images for the Web

Before you can even consider using any image for a web page, you’ll have to reduce the size. As an example, the image size that you’ll get from the Canon Powershot SD800IS point-and-shoot camera is 3072×2304 pixels. That image is much too large for the web and will need to be reduced. In addition, you’ll probably want to make other changes to the image, such as color correction, sharpening, cropping, etc. For some users, not much of that will be necessary, but if you want good results for your web pages, I recommend that you take the extra time. One way to speed up the process in a program like Photoshop, is to create an Action, which will apply the most settings to your image in a fraction of the time it would take you do that manually.

Then there’s the issue of what image size you’ll want to use for your web pages. The larger the dimensions of the image, the larger the file size. And the larger the file size, the longer it will take for the image to load. There are ways to mitigate that, such as to use image slicing, which will allow the image to load in sections, but some web developers don’t like that idea, saying that it can lead to server stalls and additional calls to the server.

The other option is to use images in galleries, where the first gallery is made up of thumbnail shots, all of which load quickly. Each thumbnail is connected to a larger image which will be viewable, one at a time. To learn how that’s done, have a look at my tutorials on creating web galleries with Photoshop CS3.

The best way to see the results of compression is to use a “save for web” feature, which will allow you see four images and experiment with different compression settings.

Another thing to consider is the type of image. As an example, an image with large areas of a similar color will compress more than an image with a lot of patterns. Ultimately, it comes down to a tradeoff between dimensions, file size and compression. With the JPEG format, you have to be careful, because if you compress an image too much, it will start to exhibit signs of artifacts, where portions of the image clump together. Also, if compression is too great, the image will lose quality, it might appear blurred, washed out and the edges in an image can lose their sharpness.

As you work with images, you’ll eventually develop a feeling of what works and what doesn’t and you’ll be able to come up with some standard settings that you can use on an ongoing bassi. This will give you a starting point. If necessary, you can refine the images further.