Scaling Graphics for the Web

RULE OF THUMB: Never size UP always size down. An image already at its lowest resolution sized up will lose detail and and become blurry.

If you are starting from scratch and you need to digitize your images, always scan higher than 72 pixel per inch (ppi), especially if you don’t know what sizes you will need for the end product. Scanning images at 300 ppi will give you the most options for cropping, scaling, and use in non-web applications. Scanning at 150 ppi is more than adequate for use on the web, especially if storage space is a consideration.

Images for use on the web should be saved at a resolution of 72ppi.

Getting started…

1. Find software. A brief list of suitable software programs includes:

• Micosoft Image Composer (with Frontpage CD Installer)
• Adobe Photoshop (win/mac)
• Paintshop Pro (win)

2. Identify the image

• Is it a Photograph?
• Is it a simple flat color image?
• Is it Black and White?

After you identify the image decide on the best file format GIF or JPEG.

• JPGs retain the detail, richness and tonal values of a photograph, and offer varying degrees of compression to decrease the file size.
• The GIF format is ideal for flat color images with no gradations or dithering. GIF was initially the universal format so some browsers may not support inline JPEGs.

When working with grayscale images, changing the mode (display type) to grayscale will decrease the file size significantly.

Sizing the image

• Open image in your application
• Find a menu selection called Image resizing, image properties, or look under tools and look for arrange. Most apps I have seen use image resizing.
• Finalize the image size in pixels.
• HTML code uses pixels instead of inches when you add width and height to the image source. Remember that a critical width measurement for developing on the web is 590 pixels. Size graphics accordingly.
• It is best to save the images at the exact size you wish for them to appear in the browser. Sizing the image by adjusting the HTML tags usually distorts the image.

Keep aspect ratio to avoid distortion. As you scale the picture, apply the same amount of scaling to the width and the height (constrain the proportions) so your image is not stretched more in one direction than the other.

Resize your image

After resizing, it may be necessary to make additional adjustments. For example sharpening, or adjusting the brightness or contrast. Be sure to check that the pixels per inch is set at 72.

Save the image

Most shareware and freeware packages do the true color or 8 bit adjustment for you when you choose either GIF or JPEG.

In Photoshop

For GIF - change the mode to index color; 8bit; adaptive palette; no dithering.

For JPG - go to Image size; change to 72 ppi; the only reason save images at a higher resolution your images are intended for download and reuse, or for going to a printer. Start with medium compression and determine whether or not the image quality is suitable (adjust compression level as necessary).

Image is sized and ready for the web.