Website design principles - File formats

No matter which photo-editing program you use, to prepare images for the Web, you’ll need to know a few basics about the standard image file formats and when each should be used. Currently, three image formats are widely supported by web browsers: JPEG, GIF, and PNG. Choosing the format that’s right for your image is a matter of determining which will provide the smallest file size for the highest quality image.

JPEG

JPEG (.jpg) is an image compression format that was developed by the Joint Photographic Experts Group specifically to store photographic images. Unlike GIF and PNG images, JPEGs can provide fairly small file sizes at 24-bit color. This makes them great for any type of photography, or graphics with heavy textures or long gradients. Although there’s no limit to the number of colors the JPEG format can display, it’s a lossy format that can create visual artifacts depending on how much you compress the file. When saving a .jpg file, you’ll have to carefully consider the amount of compression you apply.

GIF File

GIF

GIF (Graphics Interchange Format) is an 8-bit format that compresses files on the basis of the number of colors in the image. Although the compression ratio of the GIF format is good, it supports a maximum of only 256 colors, and is therefore useless for photographic pages.

PNG

The PNG (Portable Networks Graphics) format was developed by the W3C as an alternative to GIF. The lossless compression style of the PNG algorithm works similarly to that of GIF, in that files with fewer colors end up having the smallest file sizes. PNG images can be saved in either 8-bit or 24-bit format. Both of these flavors of PNG support transparency, but transparency in 24-bit PNG images is implemented by means of an alpha channel that sits alongside the red, green, and blue channels; this means that each pixel in a PNG image can have up to 256 different levels of opacity.