There are two main families of graphics
Raster and Vector
Raster Format- this format stores images as bitmaps (also known as pixmaps) and uses data that describes the characteristics of each individual pixel.
Vector Format- this format uses a geometric description which can be rendered smoothly at any desired display size. 3D files are vectors, and vectors can contain bitmap data to create their images. Inevitably, all vectors must be raster sized in order to be displayed on digital monitors.
When dealing with images for your website you will be using the Raster format.
JPEG, PNG, or GIF?
While there are dozens of image file formats to choose from, when it comes to images on the internet the standards are JPEG, PNG, and GIF.
JPEG
The compression method known as JPEG (Joint Photographic Expert Group) are usually stored in the JFIF (JPEG File Interchanged Format) file format and are compressed, in most cases by using lossy compression (lossy compression compresses data by discarding (losing) some of it). Because of this, JPEG files suffer from generational degradation when repeatedly edited and saved. The JPEG/JFIF format supports 8 bits per color (red, green, blue) for a 24-bit total which produces a relatively small file size. This is why almost every digital camera stores images as JPEG's. The two typical filename extensions are JPG and JPEG.
Pro's
- Standard on most all digital devices
- Smaller file size
- Standard on the internet
Con's
- Lossy compression when editing
- Does not support transparent backgrounds
GIF
The GIF format (Graphics Interchange Format) is limited to an 8-bit palette (256 colors). Because of this, the GIF format is best suited for storing graphics with few colors such as shapes, logos, and cartoon style images. The GIF format does support animation and is still in wide use around the net for this reason. GIFs also use a lossless compression that is more effective with large single color images, and is particularly ineffective for detailed images.
Pro's
- Lossless compression
- Perfect for logos and images with few colors
- Supports animation
Cons's
- limited 8-bit (265 color) palette
- Outdated in comparison to the PNG file format
PNG
The PNG (Portable Network Graphics) format was created as an open source (free) successor to the GIF. The PNG file formats greatest improvement is that is supports true color which consists of 16 million colors, and excels when saving large images with multiple colors. Like the GIF and unlike the JPEG, the PNG file format uses a lossless compression making it very well suited for editing images. The PNG file format is designed to work well online and is fully streamable supporting progressive display options. PNGs are a highly robust file format with both file integrity checking and simple detection of common transmission errors. PNGs can also be stored gamma and chromaticity data for a much improved color matching in heterogeneous platforms. Possibly most important to everyday designers, the PNG file format is the only one of the three (JPEG, GIF, PNG) that supports transparent backgrounds.
Pro's
- The PNG pretty much replaces the need for GIF's and TIFF files.
- Features true color (16 million colors)
- Offers lossless compression
- Designed to work well on the internet and digital devices
- Supports transparent background
Con's
- Some older design programs do not support the PNG file format, causing the image to look darker than its true color.
Final
Conclusion
The lossless PNG format is best suited for editing pictures, and the lossy formats, like JPEG, are best for the final distribution of photographic images. In most cases, JPEG files are usually smaller than PNG files, therefore, you will want to use JPEG files unless you need to have transparent areas of the image, then PNG is your best choice.
