Web Design in a Nutshell

1. Web Design in a Nutshell Chapter 20: JPEG Format

2. Summary

3. Synopsis • JPEG (which stands for Joint Photographic Experts Group, the standards body that created it) is a compression algorithm used by files in the JFIF format, commonly referred to as JPEG files. JPEGs use either the .jpg or .jpeg extension. • Like any graphics file format in widespread use on the web, JPEGs are platform-independent. In addition, JPEGs are fully supported for use as inline images in nearly all web browsers

4. 24-bit color • JPEG images contain 24-bit RGB color information, which means that they are comprised of colors from the true color space of millions of colors. JPEG files can also carry grayscale images. This results in higher image quality and more rich and subtle color variations. Unlike GIF files, JPEGs do not use palettes for referencing color information. • When JPEGs are displayed on a system that only supports 8-bit color, a browser reduces the colors in the image to its built-in web palette, and some dithering will occur. In general, dithering is often acceptable in photographic image areas.

5. JPEG compression • JPEG uses what is known as a lossy compression scheme, meaning that some image information is actually thrown out in the compression process. With low settings for compression, this loss is not discernible to the human eye, particularly when the image is displayed on a monitor at screen resolution. • Using lossy compression algorithms, JPEG is able to achieve 10:1 to 20:1 compression ratios without visible loss of detail. • The compression algorithm samples the image in 8x8-pixel squares and then translates the relative color and brightness information into mathematical formulas. These sampling squares may become visible when images are compressed with the maximum compression level. • Typically, a detail-rich photographic image that would take up to 85K of space as a GIF would require only 35K as a JPEG

6. Image loss • Be aware that once image quality is lost in JPEG compression, you can never get it back again. Loss in image quality is also cumulative, meaning you lose a little bit more information each time you decompress and compress an image. Each time you open a JPEG and resave it, you degrade the image further. Not only that, you may introduce new artifacts to the image that prevent the second compression from working as efficiently as the first, resulting in larger file sizes. • It is a good idea to hang on to one copy of the original digital image if you anticipate having to make changes, so your final image only goes through the compression process once. You should also start from an original image each time to experiment with different compression levels.

7. Variable compression levels • One advantage to JPEGs is that you can control the degree to which the image is compressed. The higher the quality, the larger the file. The goal is to find the smallest file size that still maintains acceptable image quality. • The quality of a JPEG image is denoted by its Q setting, usually on a scale from 0 to 100. In nearly all programs, the lower numbers represent lower image quality but better compression rates. This is not true on all graphics applications, however. • For the most part, the Q setting is an arbitrary value with no specific mathematical significance. It is just a way to specify the image quality level you’d like to maintain. When JPEG compression goes to work, it compresses as much as it can while maintaining the targeted Q setting. • The scales for specifying Q-settings vary among tools that create JPEGs. Most current tools use a scale from 0 to 100; however, you will still find some that use a scale from 0 to 10 or 0 to 12. The numbers themselves are not significant, what matters is the way the image looks and its resulting file size.

8. JPEG decompression • JPEGs need to be decompressed before they can be displayed; therefore, it takes a browser longer to decode and assemble a JPEG than a GIF of the same file size. Bear in mind that a small portion of the download time-savings gained by using a JPEG instead of a GIF is lost to the added time it takes to display

9. When to use JPEGs • JPEGs are ideal for photographic and other continuous-tone images, such as paintings, watercolor illustrations, and grayscale images. • JPEGs are notably not good at compressing graphical images with areas of solid color, such as logos, line art, type, and cartoon-like illustrations. JPEG’s lossy compression makes flat colors blotchy and pixelated, resulting in unacceptable loss of quality in some cases. Not only that, the files are generally quite a bit larger than a GIF file of the same image. JPEG compression is also not good at sharp edges or typography since it tends to leave artifacts that ripple the edges. • It is usually best to let JPEGs handle photographic material and leave the flat graphics to GIF.

10. Progressive JPEGs • Progressive JPEGs are just like ordinary JPEGs except they display in a series of passes (like interlacing in the GIF format), each pass containing more detailed information, until the whole image is rendered clearly. Graphics programs may allow you to specify the number of passes it takes to fill in the final image. • One advantage to using progressive JPEGs is that like interlaced GIFs, they provide some indication of the full image for the reader to look at without having to wait for the entire image to download. Progressive JPEGs are also generally slightly smaller than standard JPEGs • Progressive JPEGs do require more processing power on the client to display.

11. Minimizing JPEG file size • Softening the image for better compression: • JPEG compression does an admirable job of condensing photographic images without requiring much extra attention. However, if you are serious about making your JPEGs as compact as possible, you may want to work on creating an image with fewer gradations, fewer details, and no hard edges • If you are using a good web graphic tool, you will find a setting with the optimization options that soften the image. This will often be called Blur, Smoothing, Gaussian Blur, etc. • A more sophisticated approach is to apply aggressive blurs to areas of the image that are not important (e.g. the background) and leave areas of detail alone.