There are three common file types that are used to post images. These are JPEG, GIF, and PNG.

Let’s look at the 3 file types and how they affect the same image:

example-image-jpeg

JPEG (or .jpg) images are a somewhat of an old file type and has become the de facto standard image of the Internet. JPEG images are able to be compressed considerably, which results in quality images with small file sizes. In the image above, the JPEG format provides nice quality and low file size.

macbook-gif-image

GIFs (.gif) are lower quality images than JPEGs and are used for more simple images such as icons and decorative images. GIFs also support animation as I’m sure all you Redditors know. Regarding image optimization, it’s great to use GIFs for the plain and simple images on a webpage (that are just a few colors), but for complex images and photos, GIFs are not always as attractive – this is especially true for bigger and more photoesque image.

The MacBook GIF above is a case where we can get away with using GIF. This is because the photo is small enough where GIF works well.

macbook-png-image
macbook-png-image-2

PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs, and they don’t degrade over time with re-saves like JPEGs. Even though the PNG file type is starting to be used more, the file sizes can still be much larger than what you would find with JPEG images.

Notice how the PNG-24 image is over three times larger in file size than the PNG-8 version. This is why you need to be very careful with PNGs.

Here’s an extreme example, where the image file size has been held constant at 24 kb for all three files formats:

png-vs-jpeg-vs-gif-image-formats

As you can see, JPEG is the clear winner here. GIFs and PNGs must degrade in quality in order to stay at a low file size.

Here are some tips to remember when choosing file formats:

  • For most ecommerce situations – JPEGs will be your best bet. They provide the best quality and the smallest file size.
  • Never use GIFs for large product images. The file size will be very large and there is nogood  way to reduce it. Use GIFs for thumbnails and decorative images.
  • PNGs can be a good alternative to both JPEGs and GIFS. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel at simple decorative images because of their extremely small file size.

Most image editing software can save images to any of the file types discussed above.