Sul Ross State University
A Member of the Texas State University System

What You Ought to Know About Web Images

Image Resolution

While print projects measure the size of images and other layout elements in inches, the web uses pixels. The only resolution appropriate for the web is 72 ppi because that's the standard for computer monitors. Monitors don't really care about physical dimensions; they just read how many pixels there are in an image and spread the image across the screen accordingly.

Imagine that a photo is a tiny grid of colored dots. Image resolution is the number of colored dots across or down each inch of the photo. It's referred to as pixels per inch (ppi) or sometimes dots per inch (dpi). Almost any image-editing software will have an option to set the resolution as well as the physical width and height of an image.

Is it possible to put up a higher-resolution photo and force down the physical dimensions to the size needed -- the way an image can be inserted into a Word document and resized? Yes, but don't, for two reasons:

1. This will distort the image and make it look bad.
2. More pixels to the inch equals larger file size. An image with a resolution of 300 contains information on 300x300 pixels instead of 72x72 pixels for each square inch of the image. That's a huge difference in data, and more data means a larger file size.

When using an image for both print and web projects, keep in mind that Microsoft documents generally use a resolution of 96 and professional-quality print projects require a resolution of at least 300. Always start with the larger file size and save it as a master; you can create a copy at a lower resolution to make it web-compatible, but if you start with a web-resolution photo and increase it to print resolution, the results are usually pretty bad.

Image Dimensions

Once the image resolution is set to 72 dpi, think about the physical dimensions of the images and some basic computer screen math.

There is no universal size for computer screens, though screens have continued to get larger over the past decade. Screen size is referred to as screen resolution and is expressed as a pair of numbers such as 1024x768. Unlike image resolution, screen resolution doesn't indicate how many pixels are displayed per inch. This is the total screen space available, measured in pixels as width by height.

Web pages, and the images on them, shouldn't be wider than the most commonly-used screen width. Remember that browser scrollbars and other elements will take up space, too.

The following chart converts inches to pixels, assuming the image resolution has been adjusted for web images. The larger the physical dimensions of an image, the larger its file size will be.

There is no one recommended size for an image, but a typical photograph can serve its purpose effectively at a maximum width or height of no more than 250 to 300 pixels. For larger photos, the two main things to consider are download time and whether the image will fit on a monitor.

There is a disadvantage to an image that is sized down too much. If the dimensions get too small, the visitor to the site cannot tell exactly what it is, and the image no longer serves its purpose.

File Size, Optimization and Download Time

Images are usually much larger files than HTML pages, and they are among the first things to be addressed if a web page takes a long time to download.

A general rule of thumb is that if the total file size of all images on a page combined exceeds 100 KB, the page is in danger of becoming a slow download.

Working on an image to keep file sizes down is known as optimizing the image. There are a number of things that may decrease file sizes, from cropping out unwanted parts of an image to using special web-export features in image-editing software such as Photoshop.

Another way to encourage faster downloads is to add image height and width attributes to each HTML image tag on a web page. This creates a placeholder for the image and allows other elements of the page to continue downloading without waiting for the pictures.

Always try to test web pages, whether they have images or not, by accessing them using a dial-up Internet connection.

File Types

Web browsers currently support three types of image files: JPEG, GIF and PNG. Each has its strengths and weaknesses and is best used for certain types of images. Here's a brief look at each:

• JPEG, which uses the extension .jpg, is best for photographs and other images that have a lot of varying shades. A JPEG image may be used in both print and web design (though professional printers often prefer the TIFF format, which is not supported by web browsers). JPEG images are often misperceived as producing much larger file sizes than their GIF counterparts, and in the hands of the inexperienced the images can start to develop flaws known as JPEG artifacts.

• GIF, a popular format for clip art and the only format that supports animations. It uses indexed color to keep file sizes small -- that is, for images with relatively few colors. GIF images with more than about 32 colors become not only larger than the same image in JPEG format, but the quality of the images tends to be poor. A GIF is identified by its file extension .gif.

• PNG, or Portable Network Graphics, which are recognized by the file extension .png. A comparatively new file format, PNG was created as an all-purpose format to provide better transparency and color support than GIF provides, along with special features such as gamma adjustment. The format is not supported by old web browsers. Graphics professionals will get more out of this file format than casual web designers, who can do their best work with the JPEG and GIF formats.

JPEG Artifacts

One of the disadvantages of the JPEG file format is that if a JPEG image is saved repeatedly, its quality will begin to deteriorate. This is because the JPEG format is known as "lossy." A lossy format removes some of the image information each time it is saved; this is how it helps to keep the file size down. Multiple saves will cause a JPEG to lose so much information that it is damaged beyond repair.

To avoid this problem, keep a master version of the image in a "lossless" format such as TIFF or Photoshop's PSD format. It's possible to edit and save as much as needed in these formats without damaging the image. Then, as the final step, generate a copy in a JPEG format to use on the web.

Color Modes

Professionals work with different color modes regularly, but most people aren't aware of how modes affect an image. There are four main color modes – that is, ways color information is stored in a file and reproduced by a monitor or printer:

• RGB – stands for red, green, blue, the three primary colors of light. This is the mode your color image will probably be in if it's for the web, and it's usually the default mode for web images. A standard computer monitor reads 256 levels (shades) each of red, green and blue and then mixes these three colors to create all the other colors you see.

• Indexed Color – GIF images use this color mode rather than RGB. In layman's terms, when a GIF is created, a little table, or index, of the colors used is created as part of it, which is how this mode got its name. The image code looks up the colors in the table and uses them to render the image. Indexed color is very limited in the number of colors it can present. File sizes can grow very quickly when the number of colors in the index is increased. The indexed image here is less than a third of the file size of its nearly identical RGB counterpart, but if both contained 256 colors, the maximum for an index, the file size of the indexed image would be more than twice that of the RGB image.

• Grayscale – Use this for a black-and-white image. While you can keep a black-and-white in RGB format, converting it to grayscale can make the file size smaller (and quicker to download). Why? Because while RGB images contain three sets of information, one for each color, grayscale contains one set representing the 256 levels ranging from black to white.

• CMYK – Stands for cyan, magenta, yellow, black, the four colors used in professional print jobs. This format is for print only; putting JPEG in CMYK color mode on a web page may result in the display of a missing image icon, not a picture. Convert the to RGB for it to work on the web. Similarly, print professionals must convert RGB images to CMYK for them to be usable in a press project.

Gamma

Gamma is a property of your computer rather than an image, but it has a major impact on how your images are viewed. Gamma is associated with the brightness of your screen. The standard gamma setting for a PC is 2.2, and on a Mac it is 1.8, which is much brighter even though it is a lower number.

A designer working on an unadjusted Mac screen may look at the design on a PC and find the images are way too dark; a designer who created images on a PC may find that the colors wash out on a Mac. The images below demonstrate how an image adjusted to look its best on a Mac will be viewed on a PC screen and what one adjusted for a PC will look like on a Mac.

There is very little that average users can do to adjust image brightness to suit a large audience. Macs have built-in settings so the brightness and colors can be calibrated, but PCs do not. PC users who have Adobe Photoshop installed can use Adobe's calibration controls to adjust their monitors. Photoshop also contains menu items that allow users to view images as they look on a PC or a Mac.

If possible, check web images on several different types of screens. In general an uncalibrated Mac will provide the brightest viewing environment and early PC flat-screen monitors will provide the darkest.

The <IMG Tag>

The HTML tag that puts an image on a page does more than just connect the image to a page. It can be used to set height and width, align an image to the left or right of a page, create a border and assist people with text-only access to know what the image is about. Becoming familiar with the various attributes of an HTML image tag will allow you to better control the presentation of the image.

Putting the attributes all together with this image, the tag looks like:

<img src="images/oit/knowledge/attributes.jpg" border="0" alt="Example image for HTML tags" align="right" height="300" width="172" hspace="1" vspace="1">

Because the text ran out before it finished wrapping around the image, another tag, <br clear="right">, was added afterward to clear the rest of the text wrap so that a new line could begin. The tag <br clear="left"> can be used when an image is aligned to the left.