Should I Use JPG or PNG in my Shopify Store?

The short answer is that your store should use both.  The simple rule to follow is JPGs are for photos while PNGs are for graphics.  But nothing is as simple as the simple rule, so I'll go into some more detail here.

There are two things to consider when choosing which format to use:

• File size.  Smaller file sizes make for more performant stores.
• Features.  The formats provide different features.

When to Use JPGs

With very few exceptions, a store's photos should be in JPG format.  This includes banner photos, product photos and images used for navigational purposes.

JPGs provide much greater compression of files than PNGs do.  But that compression comes at the cost of quality.  Light compression will not drastically impact the quality of a photo.  But JPG compression will have a noticeable impact on a graphic (illustrations with solid colors) file.

JPG Guidelines

 For most Shopify stores, I create all JPGs at 72 DPI and save them at quality 75.

When to Use PNGs

PNGs are great for graphics. This includes logos, icons and other site graphics.

PNGs have what is called lossless compression.  A compressed PNG file has the same quality as the uncompressed file.

A feature of PNGs not available in JPGs is transparency.  So PNGs are useful for graphics or even photos that are placed over a color background.

For graphics that don't contain solid colors, but instead have gradients or textures, the JPG format may provide a significantly smaller file size for a similar final quality.  For these graphics, it is best to evaluate both formats and make a decision on which to use.

Comparing File Sizes

 Here are some side-by-side comparisons.  All images are 1024 x 1024 px at 72DPI.  PNGs have maximum compression and JPGs have 75% quality.

Graphics

Photos