JPEG, GIF and PNG - which one is right for you?

There are many standard image file formats, but only a few of them - primarily JPEG (JPG), GIF and PNG - are commonly used in email marketing. The basic reason for this is size - big files take longer to transmit so smaller files are preferred. To keep file sizes manageable, these preferred file formats compress the data.

There are two types of compression; 

Lossy (JPEG): Lossy file compression results in lost data and quality from the original version. The "lossyness" of an image file may show up as jagged edges or pixelated areas. Because lossy compression removes data from the original file, the resulting file often takes up much less disk space than the original. For example, a JPEG image may reduce an image's file size by more than 80%, with little noticeable effect.

A JPEG file does allow for various "quality settings," which determines how compressed the file will be. The quality setting involves a trade-off between quality and file size. A file that uses greater compression will take up less space, but may not look as good as a less compressed file.

Lossless (GIF AND PNG): Lossless compression reduces a file's size with no loss of quality. Lossless compression basically rewrites the data of the original file in a more efficient way. However, because no quality is lost, the resulting files are typically much larger than image files compressed with lossy compression. For example, a file compressed using lossy compression may be one tenth the size of the original, while lossless compression is unlikely to produce a file smaller than half of the original size.

When Should I use what file type?

JPEG or ‘Joint Photographic Experts Group’ is the go-to format for online photos. It supports a full spectrum of colours, and almost all devices and programs can open and save to the JPEG format - making it the most universal of the three. JPEG files are ideal when you want to keep file size down and don’t mind giving up a little quality to create a very small file. That said, JPEG quality drops when images are edited and saved. If you plan to continually edit your files, JPEG is not the format for the job. But if you need to display photos online, JPEG is just right.

GIF or ‘Graphics Interchange Format’ files should be used for simple web graphics with limited colours. GIF files are the smallest of the three because they are always reduced to 256 colours, making for fast-loading visuals. That said, GIF files aren’t recommended for files with a large range of colours, like photographs or other detailed imagery. But if you are working with small graphics like banners, charts and buttons, GIF is the best format for the job. GIF files also support animation.

PNG or ‘Portable Network Graphic’ files should be used when you need a small file that maintains its original quality. PNG files support millions of colours, plus varying degrees of transparency - so they are perfect for graphic image files, like logos and infographics. However, PNG isn’t compatible with all software or applications. If your goal is to find a file format for widespread use, PNG might complicate the process. But if you need a format that supports millions of colours for your logos and small images, PNG is for you.

How do I know how big my image is? 
The physical size of an image when it is displayed on a computer screen or printed out on paper depends on two factors: the image size and the image resolution.

Image size refers to the number of pixels (short for picture elements) in an image, and is measured by the number of pixels along the horizontal and vertical sides of an image, e.g. 600 x 400 pixels. This is the easiest (and most accurate) way to think about the size of a digital image: the number of pixels that it contains.

Image resolution refers to the density at which pixels are displayed: that is, how many pixels are displayed per inch of screen or paper. This is often quoted as dots per inch, or dpi, but a more accurate term is pixels per inch, or ppi.

There are a number of ways to find out the size of an image (its pixel dimensions):

  • Right-click on an image file, select Properties from the pop-up menu, then select the Details tab. You can also see the resolution of an image in this box.
  • You can also find out the size in image browsing or editing programs, such as Microsoft Office Picture Manager or Photoshop.
  • Mac users can control-click on an image and select Get Info from the pop-up menu. Alternatively, in the Finder window, open the View menu and select As Columns – the image size is shown in the Preview column once an image is selected.