Image Optimization
RGB Color Display screens transmit light to form color. This model is called additive RGB because it uses a combination of red, green, and blue which “adds� up to white light. Most screens can display the full 16.8 million colors. This huge range of colors helps compensate for the relatively low resolution of the screen compared to print.
Screen Resolution Screen resolution refers to the number of pixels a screen can display within a given area. Screens have resolutions that vary from 72 to 96 pixels per inch (ppi). Images used for print can be created at various resolutions but images for webpages are always limited by the resolution of the screen. Note: Always reduce larger images to their proper size at 72 ppi.
File Formats Web file formats are bitmap (raster) graphics made up of a grid of thousands of pixels. The primary file formats are GIF, JPEG, and PNG. Note: Create vector illustrations and then convert to GIF or PNG for use on the web.
Graphic Interchange Format (GIF) – GIF is the most widely supported file format used on the web. It utilizes “lossless” compression to keep file sizes at a minimum without compromising quality. However, GIF files are 8-bit graphics and thus can only accommodate 256 colors. GIFs are best used for simple animations, line art, and graphics with flat areas of color.
Joint Photographic Experts Group (JPEG) – JPEG supports full color, 24-bit images which results in images that can incorporate 16.8 million colors. JPEGs have a “lossy” compression which allows images to be reduced significantly, however this can result in poor quality images. Once an image is compressed, data is lost and and you cannot recover the file. JPEGs are best used for photographs with low contrast.
Portable Network Graphic (PNG) – PNG is quickly becoming the most popular file format to use on the web. PNGs support full color, 24-bit images and transparency. They also use a “lossless” compression and can be used for photographic images, but the file size is still larger than a GIF or JPEG. PNGs are best used for line art, illustrations, and transparency.
Portable Document Format (PDF) – Your browser is also capable of linking to PDF files from the server by saving them to your computer or viewing the file through a web reader.
Image Compression Adobe Illustrator, InDesign, Photoshop, and Fireworks have a ‘Save for Web & Devices’ option located in the ‘File’ menu which allows you to compare the different formats and sizes for compression. Note: You typically do not need to use “dithering” when saving a file for web anymore.