Image file types

Images and other graphics can often make or break a design. And we’ll start here with image file types. We’re going to focus on bitmap, GIF, PNG, JPEG, and SVG. These are the most common image file formats used on the web. You can mix and match these depending on what works best for each image in your project.

Bitmap

Don’t use this on the web because bitmap files do not support compression and output very large file sizes.

GIF

GIF (or “JIF” depending on what part of the internet you’re from) is used for a lot of simple animations. It only supports 256 colors, and if that’s all you need, it might be an option for you. GIFs also allow for transparency, but they don’t support alpha transparency. This means anything other than absolutely opaque or absolutely transparent won’t show up that way.

PNG

This is a great file format if you need transparency—specifically if you need alpha transparency.

PNG comes in two flavors—8-bit and 24-bit. The 8-bit version is a smaller file that only holds 256 colors and lacks full transparency settings. The 24-bit version is a larger uncompressed file that holds 16 million colors and supports alpha transparency. Both can be used on the web, but 24-bit PNG is usually preferred for its alpha transparency. Tools like ImageOptim[↗] and ImageAlpha[↗] can also be used to compress a 24-bit PNG file to 256 colors to cut down the size by more than half while retaining the alpha transparency.

JPEG

The JPEG is an extremely common format. It supports compression in a way that cuts down file size more than any other image type.

JPEG compression

JPEG does a great job at compressing file size. Let’s take an image in JPEG format with a file size of just over 300 kilobytes.

Note that this same image in bitmap format at the same resolution and dimensions can be over 50 megabytes. That means the bitmap file is over 150 times the size. That’s because bitmaps contain precise data about each and every pixel. That’s a ton of information. So when you save a bitmap, think of this patch of gray pixels as being stored as “gray pixel, gray pixel, gray pixel” and so on.

When creating a JPEG, this area can be heavily compressed without losing the essence of the image. That means we probably don’t need all this precise, repetitive data for each and every one of these pixels. So JPEG is a pretty great, flexible format.

SVG

Finally, we have SVG—scalable vector graphics. The wonderful thing about vector graphics is that instead of having fixed pixels as you would in any of the other formats, SVGs aren’t resolution-dependent.

You can scale them infinitely with really great results. And in most cases, SVGs are used for shapes, text, sketches, logos.

For photographs which are made up of actual pixels, you’re much better off choosing one of the other formats.

SVG support

SVG images aren't supported for product and variant image fields. They aren't supported for Ecommerce email brand logo either. That's because these images will be used in Ecommerce emails (ex. order confirmation) and SVGs aren't supported in many email clients such as Gmail.