Images Rarely do you find images that are in the exact style, size or format you need. Editing images correctly can help make your website look professional and support your brand identity. Best Practices for Editing Images Always work on a copy of the original Use JPEG for photos; GIF for flat color 72 pixels per inch Assume that most users have millions of colors and let the quality degrade for users without (they’re likely used to it by now) The quality of your images impacts the overall perception of your site’s quality Image quality should be carefully balanced with size and download speed No photo is better than a poor quality photo Image Formats for the Web JPEG (Joint Photographic Experts Group) GIF (Graphic Interchange Format) PNG (Portable Network Graphic) SVG (Scalable Vector Graphic) Choosing the Correct Format Use JPEG if the image is… photographic gradated color Use GIF if the image is… mostly flat color against a color background and needs transparency contains predominantly type PNG and SVG both have spotty support and aren’t recommended for most uses (though PNG may be suitable for Intranet use) PNG is lossless, and has variable transparency control SVG has very high quality Resolution All web graphics should be prepared at 72 dpi Image pixels map to monitor pixels, so graphics will appear smaller on high-resolution screens Beware of overly wide graphics that break the layout JPEG Tips Don’t save a JPEG multiple times. Because JPEG is “lossy” the quality degrades each time it’s saved Use the “Unsharp Mask” after sizing to the final size Always size to the final size rather than letting the browser resize When making large sizing changes, size in smaller increments Avoid sizing up Always save a copy of the original Avoid “progressive” or interlaced JPEG’s for most normal use Compress only as far as need to balance quality/size GIF Tips GIF was formulated when most users had only 256 colors Dithering combines two colors to approximate an intermediate color but results in larger file sizes The “Selective” color palette is generally the best choice. It favors large areas of flat color and the (limited) web palette In general you can use minimal compression as the advantages in file size are quickly outweighed by the loss of quality If a GIF will require a transparent background create it with a canvas that matches the color it will overlay (the “matte” color). 0 Comments Submit a Comment Cancel replyYou must be logged in to post a comment.