Download Understanding Web Imagery: Color Depth, Image Formats, and Optimization - Prof. Peter L. H and more Study notes Web Design and Development in PDF only on Docsity!
week::four
Web Imagery
Medium: The Computer Monitor o Uses RGB (Red, Green, Blue) to create images on screen. o Uses additive color model: All three colors add up to be white. Generates its own light (opposed to print which uses reflected light). o Base unit is a pixel. o The color of a pixel is represented in the computer as a series of bits. The number of bits determines the number of possible colors that can be displayed at one time. o More bits == more simultaneous colors. o Why do we care about color depth? Unlike print, we do not control the medium that our work will be displayed on. o Color Depth Chart:
Color Depth Number of Simultaneous Colors 24 bit 16,777,216 colors (Millions or True Color) 16 bit 65,536 colors (Thousands or High Color) 8 bit 256 colors
Content: Raster Images o Like monitors, the base unit is a pixel (not inches or centimeters). o More bits == more simultaneous colors == larger file size. o Primary Types: RGB Maximum of 16,777,216 colors. Index Maximum of 256 colors. o Color Depth Chart:
Color Depth Maximum Number of Colors Image Size
32 bit
16,777,216 colors with an 8-bit channel for transparency (the alpha channel)
157K
24 bit 16,777,216 colors (Millions or True Color) 118k
RGB Images
16 bit 65,536 colors (Thousands or High Color) 79k
8 bit 256 colors 39k 6 bit 64 colors 29.4k 4 bit 16 colors 19.6k 2 bit 4 colors 9.8k
Index Images
1 bit 2 colors 4.9k Color depth equation: 2 to the nth power, where n is the number of bits (2^6 = 64; 2^16 = 65536). Image size is based on a white 200 x 200 pixel image without compression.
Web Imagery Characteristics
Formats o Either JPEG , GIF , or PNG. o Which one you choose depends on a number of factors. Size Measurement o An image used on the web is always measured in pixels , not in inches or picas like print. o Image resolution on the web is 1:1 — every pixel in an image is displayed. While it is possible to scale an image larger or smaller within Dreamweaver, the resulting image usually appears coarse and pixilated. o In Photoshop, always work at a magnification of 100% or higher (Command-Option-0). This will display the imagery exactly how it will appear on the web, ensuring that you see every pixel in your document. o When creating web graphics with fonts in Photoshop, be sure to set your image pixels per inch (PPI) setting to 72. This will allow you to use familiar font sizes in Photoshop. For example, if your image PPI is set to 36, a font point size of 12 will appear half the size you intended. File Size o Compared to print, web images are smaller and easier to work with. o However, all images bound for the web require optimization. o Optimization tweaks the image to reduce its file size, which helps reduce image download times. o How does optimization make an image smaller? Removes unwanted colors (GIF, PNG) Removes non-essential visual data (lossy compression; JPEG, PNG) Removes embedded previews, thumbnails, icons and metadata. Compresses the image (through JPEG, GIF and PNG file types)
PNG Images
Description o An emerging file format that combines the best of the JPEG and GIF file formats into an open standard. Features o Provides excellent 8-bit transparency support. o Supports precise color selection and loss-less compression (like GIF). o Supports 24-bit color (like JPEG). Good for: o Images you intend to import into Flash. o If you only target the latest browsers Bad for: o General web use (for now)—PNG is not fully supported (without hacks) in some older browsers (Notably, Internet Explorer for Windows 6.0). Safari (Mac/Win), Firefox (Mac/Win), and Internet Explorer 7.0 (Windows only) fully support PNG.
JPEG Images
Description o Can display millions of colors (True-color, 24 bit image). o Designed from the beginning for photos. Features o Compression Compression is “lossy”, resulting in JPEG artifacts. JPEG reorganizes an image's pixels to reduce file size. JPEG offers selectable levels of compression: ImageReady 0% ------- 50% ----- 100% Photoshop 0 ---------- 5 --------- 10 ----- 12 small size large size poor quality perfect quality Done correctly, these artifacts are only visible when the image is magnified. o True-Color Support JPEGs support millions of colors (24 bit). Optimizing Tips o Save photos for the web between the 60% to 80% quality level. o Always same your original Photoshop files. Once an image is compressed using JPEG, you cannot revert to a previous, superior quality level without the original, uncompressed image. o While it is possible to save CMYK images in JPEG format, don't use them. They are bigger than RGB versions and don't display in most browsers. Good for: o Photographs o Any image requiring more that 256 colors o Complex imagery with soft edges Bad for: o Animations o Images requiring transparency o Most navigation elements o Images that need to be "pixel-perfect" Example o The 80% quality JPEG is much smaller in file size and displays the full range of color, making it a better choice than the 256-color GIF image.
Photoshop Image 24-bit uncompressed 5,000 bytes
JPEG Image 80% quality 1,402 bytes
JPEG 0% quality 490 bytes
GIF Image 256 colors 2,545 bytes
