Servage Magazine

The photogenic JPEG
Another popular graphic format on the Web is JPEG, which stands for Joint Photographic Experts Group, the standards body that created it.

Unlike GIFs, JPEGs use a compression scheme that loves gradient and blended colors, but doesn’t work especially well on flat colors or hard edges. JPEG’s full-color capacity and compression scheme make it the ideal choice for photographic images.
The photogenic JPEG
Another popular graphic format on the Web is JPEG, which stands for Joint Photographic Experts Group, the standards body that created it. Unlike GIFs, JPEGs use a compression scheme that loves gradient and blended colors, but doesn’t work especially well on flat colors or hard edges. JPEG’s full-color capacity and compression scheme make it the ideal choice for photographic images.
Lossy compression
The JPEG compression scheme is lossy, which means that some of the image information is thrown out in the compression process. Fortunately, this loss is not discernible for most images at most compression levels. When an image is compressed with high levels of JPEG compression, you begin to see color blotches and squares (usually referred to as artifacts) that result from the way the compression scheme samples the image.

You can control how aggressively you want the image to be compressed. This involves a trade-off between file size and image quality. The more you compress the image (for a smaller file size), the more the image quality suffers. Conversely, when you maximize quality, you also end up with larger files. The best compression level is based on the particular image and your objectives for the site.
Progressive JPEGs
Progressive JPEGs display in a series of passes (like interlaced GIFs), starting with a low-resolution version that gets clearer with each pass. In some graphics programs, you can specify the number of passes it takes to fill in the final image.

The advantage to using progressive JPEGs is that viewers can get an idea of the image before it downloads completely. Also, making a JPEG progressive usually reduces its file size slightly. The disadvantage is that they take more processing power (which can make them problematic for low-end mobile devices) and can slow down final display.
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. It’s usually not a perceptible difference, however, so this is not a reason to avoid the JPEG format. It’s just something to know.

The powerful PNG The last bitmapped format to join the web graphics roster is the versatile PNG (Portable Network Graphic). Despite getting off to a slow start, PNGs are now supported by all browsers in current use and are becoming many developers’ first choice in web graphics formats.

PNGs offer an impressive lineup of features:

• The ability to contain 8-bit indexed, 24-bit RGB, 16-bit grayscale, and even 48-bit color images

• A lossless compression scheme

• Simple on/off transparency (like GIF) or multiple levels of transparency

• Progressive display (similar to GIF interlacing)

• Gamma (brightness) adjustment information

• Embedded text for attaching information about the author, copyright.

Resources and further reading

Media loot

Code smashing