Displaying Photography on the Web

Getting Started:

When deciding to display your photography online, there are a number of considerations that need to be taken into account as presenting imagery on the web. What I will cover today is image scan quality, the dimensional size of the image, and the impact of image file formats.

Image Scan Quality:

Resolution is the image quality measured in terms of how many pixels make up your image. It is commonly referred to as “ppi”; (pixels per inch). One of the common dilemmas when scanning photo transparencies to digitize them for use on a person’s website is how detailed of a scan do you need to provide your webmaster to post your imagery online. I’m going to sidestep the issue of image copyright concerns for the time being as I’ll cover that in an upcoming article on its own. However, because your images are to be viewed on a screen, all web graphics should be no larger than 72 ppi and thus anything higher has no improved effect, and only creates longer download times. This will also reduce what an individual could do with the image file if they had alternate motives.

Image Dimension Size:

Pixels are the unit of measurement for the screen and most webmasters design a website to fit one of the standard display sizes. Based on statistics that can be looked up on the internet, we have found that most people today have their monitor’s set to display at least 1024 x 768, if not larger.

Why this is important, is that if your scan dimensions in Adobe Photoshop say that the image is 8.5 inches by 11 inches, saving the file at those dimension will not allow a user at 1024 pixels by 768 pixels to see the image in its full presentation without scrolling both vertically and horizontally. Adobe Photoshop provides the ability to resize the image to a size that will fit within your website design. As an added bonus, it will also reduce the download size of the image that the view of the image will experience without losing image quality. This is something that you will need to work with your webmaster to come up the proper tradeoff between file size and the presentation size of the image in your portfolio. It is important to realize that not everyone has broadband connections, so thumbnails are very much appreciated by those who use dialup connections. One thing I would recommend is to come up with standard dimension sizes for your horizontal, vertical, panoramic and thumbnails and stick to them as it will make your life, and your webmaster’s much easier.

Image File Format:

There are two types of color that can be used in Web graphics. The colors can be associated with the Web graphic file formats we just mentioned: GIF and JPG.


GIF is short for Graphics Interchange Format and consists of the 216 common colors found on all computer monitors and within all Web browsers. These common colors reside in a Web palette and its advantages are that it is supported by practically all web browsers, can include transparent backgrounds, supports interlacing (providing a low-resolution preview of the graphic to the viewer while it downloads), and can be used as an image map (allowing the viewer to click on the graphic as they would a regular link to another site).


JPEG is short for Joint Photographers Experts Group and is superior in rendering color and detail found in photographs or graphics using blends, gradients, and other tonal variations. JPEG files use red, green, and blue (RGB) for graphical color. The strength of these colors is set in from zero to 255 with zero being the least intensity and 255 being the highest intensity. When red, green and blue are combined at zero intensity the result is black. At full strength, high intensity, where the values are set at 255, 255, 255, the result is pure white. As a photographer, it is important to utilize photographs as much as we can within your Web portfolio to present your work in the best possible quality so that it captures the true spirit of the subject work.

Choosing between the two image formats:

These full color images should not be saved as GIF files because of the limited number of colors. By having limited colors, the full color image will represent the true colors using the existing Web palette of 216 colors and will create a poor, dithered, and ugly image. That is why it is very important to use the right file format for each specific graphic. Sometimes it’s obvious that a graphic on someone’s web page was saved in the wrong file format. Photos may look too grainy, or flat-color images may look too fuzzy. When selecting GIF or JPEG for your graphics conversion, it is important to consider the type of image you will be working with. Use a GIF format if you’re graphic consists primarily of line art or flat colors without gradients. JPEG-converted graphics are best for photographs or images with fine tonal variations in colors, such as images with gradients or metallic images. Choosing the right file format is not only important for the quality, but for keeping your images file size to a minimum.


With proper usage of image scan quality, the dimensional size of the image, and the correct image file format, you will be presenting your web portfolio in a manner that the rest of the world can fully enjoy your work.