Digital images and Web sites—it seems this should be so easy, yet it appears to be rather difficult. Part of the problem lies in the inescapable fact that placing an image in a Web site is just not like placing a photo in a photo album for the coffee table. You’re confronted by myths and realities, and the two seldom square. So, let’s take a look…

What You See Is Not Necessarily…

What you get. Web “pages” aren’t pages in the classic sense, of course. Particularly with this Web site, the information that appears to be displayed on a page is simply content called by the underlying code when you select a topic or content heading from a menu. In any case, everything that is displayed on the World-Wide Web is first rendered into a digital form. With photos, you’re not dealing with a classic photo but a digitalized image that consists of so many pixels in a mathematical file.  What is a “pixel?”

A pixel (short for picture element, using the common abbreviation “pix” for “pictures”) is a single point in a graphic image. Each such information element is not really a dot, nor a square, but an abstract sample. With care, pixels in an image can be reproduced at any size without the appearance of visible dots or squares; but in many contexts, they are reproduced as dots or squares and can be visibly distinct when not fine enough.—Wikipedia

If you use a film camera, as do I, you can order a CD that includes all your photos in digital form as well as obtain prints of them. If you use a digital camera, you should study the user manual to find out how to set the camera to give you images you can easily and readily use on a Web site, if you intend to share your photos on the Web. Why?

Because many cameras contain presets that provide you with images that may run out to 35 inches in width or height or files that are set to a resolution of 600dpi or ppi.  In either case, you may find that your individual images are as large as 5 or more megabytes (Mb) in size. Such large file sizes just don’t work well with the Web.

There is no real technical reason to use DPI instead of PPI; it’s more a matter of common usage.

Note: You cannot upload files (including digital images) that are larger than 2Mb in size.

File Size

Apple has set its Macintosh operating system to use images at a minimum resolution of 72dpi; the base resolution for images displayed in Windows Explorer by Microsoft is 96dpi. If your original images have a resolution of between 150dpi and 600dpi, you can use a digital photo editor to reduce the file size and base resolution to, say, 96dpi without sacrificing clarity and readability. (96dpi images work well with the Macintosh Web browser, Safari.) 

Digital Photo Editing

Sorry, but you need to know something about editing digital images in order to make use of the capability you have to share your images on your Web site. It isn’t rocket science, but it does take some time to edit your pictures for use on the site. The next few paragraphs describe some of the editing functions you can perform with a digital image editor (I copied these from an article published by Wikipedia; I recommend you read this for more information that you will find very useful):

Selection

One of the prerequisites for many of the applications mentioned below is a method of selecting part(s) of an image, thus applying a change selectively without affecting the entire picture. Most graphics programs have several means of accomplishing this, such as a marquee tool, lasso, vector-based pen tools as well as more advanced facilities such as edge detection, masking, alpha compositing, and color and channel-based extraction.

Layers

Another feature common to many graphics applications is that of Layers, which are analogous to sheets of transparent acetate (each containing separate elements that make up a combined picture), stacked on top of each other, each capable of being individually positioned, altered and blended with the layers below, without affecting any of the elements on the other layers. This is a fundamental workflow which has become the norm for the majority of programs on the market today, and enables maximum flexibility for the user whilst maintaining non-destructive editing principles and ease of use.

Image size alteration

Image editors can resize images in a process often called image scaling, making them larger, or smaller. High image resolution cameras can produce large images which are often reduced in size for Internet use. Image editor programs use a mathematical process called resampling to calculate new pixel values whose spacing is larger or smaller than the original pixel values. Images for Internet use are kept small, say 640 x 480 pixels which would equal 0.3 megapixels.

Cropping

Digital editors are used to crop images. Cropping creates a new image by selecting a desired rectangular portion from the image being cropped. The unwanted part of the image is discarded. Image cropping does not reduce the resolution of the area cropped. Best results are obtained when the original image has a high resolution. A primary reason for cropping is to improve the image composition in the new image.

Digital File Formats

Most digital cameras are probably preset to provide your images using the JPEG (or JPG) file format. The other formats commonly used on Web pages are GIF and PNG. What are these, and what are their differences?

JPEG

This format was designed by a Web standards committee known as the Joint Photographic Experts Group. Images that are rendered using this format usually carry the “.jpg” file extension. The format is commonly used across the World-Wide Web, but it does have some limitations. For instance, the file compression used often results in the loss of some of the visual quality of the original image. Again, often this loss is not significant, but it could be, in some circumstances. In any case, it is commonly used.

GIF

The Graphics Interchange Format, or GIF, was developed by CompuServe (remember CompuServe) in the early days of the World-Wide Web. Although there were legal complications between Unisys, the original patent holder for the compression schema, and CompuServe, the patents have expired and the controversy is moot. Digital images rendered using this format carry the “.gif” file extension. They are easily transported across the Web and, unlike JPEG images, the file compression used does not result in the loss of any visual quality. GIF supports static and animated images.

PNG

The Portable Network Graphic (PNG) file format was developed as an improvement to the GIF format. It is rapidly replacing GIF as the format of choice, so to speak, amongst Web designers and developers. However, the PNG format does not support animated images, as does GIF.

Please note that each of these formats support 256-color, or true color, images but they only support the RGB (Red-Green-Blue) color model.

Digital Image Applications

When you hear someone speak about an image editing application, the one most commonly cited today is probably PhotoShop, offered by Adobe, Inc. However, the cost of purchasing this application ($649) makes it difficult for most to justify, unless the purchaser is a company or a professional graphic designer. Utilities that come bundled with an operating system, such as Paint in Windows, just aren’t efficient or particularly useful.

If you want a good digital image editor but don’t want to spend a lot of money for it, I recommend you download, install, and try out GIMP. The GNU Image Manipulation Program, or GIMP, is offered for free because it is an open-source project. It is reliable and effective; it gives you much the same capability as PhotoShop at no cost. (Yours truly is not a GIMP partner and receives no consideration for his recommendation…by the way.)

Warning: Anti-spyware products based on CA/eTrust engine (such as Virgin Media PCGuard) wrongly identifiy the installer as being infected with RegistryCleanFix2008.