When to Use the JPG, GIF, PNG, and SVG Formats for Your Web Images

Understanding the Different Types of Web Images

Social Media Life
Susanty Bong / Contributor/Moment Mobile/flickr Editorial/Getty Images

There are a number of image formats that can be used on web pages. Some common examples are GIF, JPG, and PNG. SVG files are also commonly used on websites today, giving web designers yet another option for online image.

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.

In a nutshell, you would use GIFs only for simply images with only a few colors - but you could also use PNGs for that as well (more on that shortly).

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.

JPG images are best used for photographs and images that have lots and lots of natural colors.

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 suiable 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 on older cell phones and feature phones.

I use PNG for any file that requires transparency.  I also use PNG-8 for any file that would be suitable as a GIF, using this PNG format instead.

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 create for illustrations like icons and even logos.

Preparing Images for Web Delivery

Regardless of which image format you use, and your website is sure to use a number of different formats across all its pages, you need to 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 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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 3/2/17