The anatomic graphic below was originally painted at much higher resolution in Adobe Photoshop (1000 x 2000 pixels, 24-bit RGB file). We then reduced a copy to the size above and used Photoshop's "Unsharp Mask" filter (at 60 percent) to restore sharpness. Although this small version of the painting has lost some resolution and color detail, it still shows all the major anatomic landmarks. The extra detail and subtle nuances of high-resolution artwork are not entirely lost when the graphic is reduced to Web page size.
[画像:Screen shot: Labeled anatomic graphic on Cranial Nerves page]We chose the JPEG file format for the anatomic painting because the artwork is relatively large for a Web page graphic. JPEG compression can be used for paintings or photographs with text labels if you choose the right compression setting. The painting above was compressed in Photoshop at "good" quality, which is the medium-quality setting ("excellent, good, poor"). If you choose the "good" or "excellent" JPEG compression settings, text labels should look acceptable, at least on 16-bit or 24-bit displays. Note that in the anatomic illustration example shown above the text labels are clear and legible, even though close inspection would certainly turn up JPEG noise around the characters.
GRAPHICS
Characteristics
• Color displays
• "Browser-safe" colors
• Dithering
• Screen resolution
• Gamma
• Graphics & bandwidth
Graphic file formats
• GIF files
• JPEG graphics
• PNG graphics
• Imaging strategies
• Summary: File formats
Images on the screen
• Screen versus print
• Complex illustrations
• Diagrams
HTML & graphics
Accessibility
References
Copyright 2002 Lynch and Horton
Send questions and comments to help@webstyleguide.com
Last updated 5 March 2004
