Preparing images for the web
Vive le artifacts, but don't forget to compare file sizes!
Selecting an image format
- GIF: 256 colors max, supports transparency and animation
- JPG: 16.7 million colors, supports progressive download
- PNG: millions of colors, supports transparency
Sizing an image
Computer screens typically have a resolution of 72 or 96 pixels per inch. Output devices range from small smart phone screens to multi-monitor extended desktops. Here is a page of image size examples with the same image at different sizes. An important note: the smaller images should always be reduced versions of a larger image.
Small images are often an effective way to present a variety of pictures within a single screen layout. Knowledge@Wharton uses very small images effectively.
Large images are often a way to make a strong visual impact or a brand association.
Cropping images
This basic Photoshop skill is frequently required when working with the small screen space available to web pages. A page of example cropped images is available for illustration.
Borders for linked images
The first image below has a border value of 1 pixel, which is the default setting. If the border box in Dreamweaver Properties toolbar is blank, then the default value (not 0) is in effect. The second image below has a border value of 0 pixels, which is changed by placing a 0 in Dreamweaver's Properties window.
Other image preparation techniques
- Linking thumbnails and full-size images
- Create a "fake transparency" effect
- Slicing images for layouts
For this exercise, think about how the background color or background transparency of your image can integrate with the background color of a web page.
Sources for high quality, public domain images
My diigo tag "StockImages" has a starter set of image resources. Most are freely available—always check the source information regarding provisions for use and requirements for proper attribution.
