When to Use the JPG, GIF, PNG, and SVG Formats

Common examples of image types on the web include GIF, JPG, and PNG. SVG files. These different formats offer web designers various options for optimizing the visual appeal of a website.

GIF Images

Use GIF files for images that have a small, fixed number of colors. GIF files are always reduced to no more than 256 unique colors. The compression algorithm for GIF files is less complex than for JPG files, but when used on flat color images and text, it produces very small file sizes.

The GIF format is not suitable for photographic images or images with gradient colors. Because the GIF format has a limited number of colors, gradients and photographs will end up with banding and pixelation when saved as a GIF file.

JPG Images

Use JPG images for photographs and other images that have millions of colors. It uses a complex compression algorithm that allows you to create smaller graphics by losing some of the quality of the image. This is called a "lossy" compression because some of the image information is lost when the image is compressed.

The JPG format is not suited to images with text, large blocks of solid color, and simple shapes with crisp edges. This is because when the image is compressed, the text, color, or lines may blur resulting in an image that is not as sharp as it would be saved in another format.

PNG Images

The PNG format was developed as a replacement for the GIF format when it appeared that GIF images would be subject to a royalty fee. PNG graphics have a better compression rate than GIF images, which result in smaller images than the same file saved as a GIF. PNG files offer alpha transparency, meaning you can have areas of your images that are either fully transparent or even use a range of alpha transparency. For example, a drop shadow uses a range of transparency effects and would be suitable for a PNG (or you may just end us using CSS shadows instead).

PNG images, like GIFs, are not well suited to photographs. It is possible to get around the banding issue that affects photographs saved as GIF files using true colors, but this can result in very large images. PNG images are also not well supported by older cell phones and feature phones.

SVG Images

SVG stands for Scalable Vector Graphic. Unlike the raster-based formats found in JPG, GIF, and PNG, these files use vectors to create very small files that can be rendered at any size with no loss of quality of increase in file size. They are created for illustrations like icons and even logos.

Preparing Images for Web Delivery

Regardless of which image format you use, ensure that all images on that site are prepared for web delivery. Too-large images can cause a site to run slowly and impact overall performance. To combat this, those images must be optimized to find the balance between high quality and the lowest file size possible at that quality level.

Choosing the right images format is part of the battle, but also making sure you have prepared those files is the next step in this important web delivery process.