Web Images
Displaying images on the web generally requires some preparation. While monitors can run at different resolutions, the dpi commonly associated with viewing web pages is 72 dpi. This allows for images to be created for the web with an idea of the approximate size at which the viewer will see the image. For most uncropped images, this will mean downsampling the image to a reasonable size. The resizing and resampling tips page has more information on resampling. The image below on the left was downsampled to make the whole image viewable on the screen. The image on the right was cropped from the lower right hand corner of the original image to contain the same number of pixels as the image on the left. |
 |
| Resized | Original Size |
|---|
Currently, many sites are designed for monitors 800 x 600 pixels wide, meaning an image that is intended to take up the full screen is generally no larger than that. The images above are 250 x 188 (252 x 190 with the border) pixels. Downsampling images in order to size them properly for the web also has the advantage of making their file sizes smaller.
File Sizes
The rate at which data can be downloaded to or uploaded from a computer depends on the bandwidth of the connection. A file might that might take 1 - 2 seconds to download on a fast broadband connection could take 20 - 40 seconds to download over a standard modem. Currently these numbers are approximately correct for a 100K file. Aside from the time involved in downloading the file, viewers in some areas pay bandwidth costs for every MB that is downloaded.While this is a problem for all web sites, it is particularly a problem for photography sites, since the need to keep images a reasonable size conflicts with the desire to show off images that look their best. There are a couple of things that can be done to improve the situation:
- Images should be cropped so that no extra space is included in the image. Extra space contains unneeded data that will make the file size larger than necessary.
- Images should be reused when possible. By using the same image instead of using copies, the image can cached by the browser and saved temporarily on the viewer's computer, so that it only needs to be downloaded once.
- Files for the web should always be compressed. More about compression can be found on the file types tips page. The most common web file type for photographs is JPEG.
Saving for the Web
Photoshop Elements has a "Save for Web" dialog that allows the photographer to easily see the effect of different compression settings on web images as well as control other aspects of how the image is saved. (Other software may have a similar feature.) The dialog displays the original image on the left and the compressed image on the right. Information on the estimated file size and download time are below the compressed image.Changing the JPEG quality settings (either via the droplist or entering a percentage) allows the photographer to see how a level of compression changes both the look of the photo and the estimated size and download time. The arrow above the settings box lets the photographer choose the download speed from a list. The box on the lower left corner of the dialog allows the photographer to zoom in and out of the image.
For JPEGs, the other available options include the abilities to create progressive or optimized JPEGs, to imbed ICC color profiles, and to add a matte color. The matte color fills in transparent pixels in the image with the selected color, since JPEGs do not support transparency. Color profiles will make the file larger, usually without adding any additional quality. Progressive JPEGs allow a low quality image to appear on the web faster than the full quality image. The image gets progressively better as more data is received. This might be an option for large images, but it increases the file size. Optimized JPEGs have smaller file sizes and better color reproduction, although they might not be viewable on very old browsers. Progressive JPEGs cannot be optimized.
