There are a bunch of different photo file types floating around, and knowing which one is right for you may not be the simplest thing to figure out. JPG (or JPEG), PNG, and GIF files are likely to be what you’ll come across most often, and each has its strengths and weaknesses.
Although most browsers have no trouble displaying any of these three image types, some are better suited for certain uses than others. For instance, while JPGs are most commonly used for displaying photo-realistic images that look fine while maintaining a low file size, GIF files are a widely-supported format for animated images. Then there are PNGs, which have the ability to maintain full quality in nearly all instances.
Here’s our breakdown of the differences between JPG, PNG, and GIF files. Also, feel free to check out our guides on to how to make an animated GIF using Photoshop, and how to convert a PDF to JPG.
Compression
To ensure that images are manageable when used with most applications, they must be compressed, which reduces the size of the photos. Here’s the difference between compression with GIF, JPG, and PNG files.
JPG: JPG compression is great if you’re just trying to send someone a picture through your phone or in an email, two situations where you might not necessarily want to send large files. Although most JPGs look fine from a distance under normal compression, there is a noticeable loss of quality whenever users zoom in on a JPG image. The effects of JPG compression have been greatly exaggerated in the image below to show the loss of quality that occurs.
GIF: Unlike PNG and JPG files, GIFs force all the colors of an image into a 256-color palette in order to reduce image size. However, these color limitations often lead to immediately-noticeable coloring issues, usually appearing as white spots or blotches of color, where images should be more complex. The circled area in the image below highlights a region where the effects of compression are most obviously apparent. Any colors outside of the 256 found in the standard Web palette are changed to whatever color is closest to it, creating blotchy patches as a result.
PNG: PNG files are a lossless format, meaning that compression doesn’t affect the quality of the image. Unlike JPGs, which create artifacts and blur images at a certain point, a PNG file will always look at least as sharp as the original image. Unfortunately, PNG files also tend to be a bit larger than JPG files, especially when they’re high resolution. This could make them difficult to share to the Web, or between friends and family.
Transparency
GIF: GIFs assign one of 256 colors to be transparent. However, this does come with some limitations. Adding transparency removes a color from an already limited palette, and pixels are either totally clear or opaque, with no in-between. Additionally, round edges will feature a white backing as opposed to sitting directly against the background, contrary to the nicely-defined edges in the PNG below.
PNG: PNG files sport the best capacity for transparency. PNGs create transparency in one of two ways. One of these methods employs the same approach used by GIFs, with a single color defined as transparent, and the other is to set an alpha channel. One of the advantages of PNG single-color transparency is that it doesn’t remove a color from the available palette. However, the alpha channel is a much smoother method, as it is far better at blending colors, and allows you to select different levels of transparency in specific regions. The transparent areas of the PNG will blend and adjust naturally to whatever is behind the image when the background of the page isn’t a solid white or black color. As shown above, the edges all fade from fully colored to partially transparent, subsequently creating a cleaner edge and smoother background transition.
JPG: Unfortunately, JPGs don’t support transparency. JPG files have an unlimited color palette, but they blend pixels together to reduce the size of the image.
Animation
JPG: Although JPGs don’t support animation, a Motion JPEG format exists that accommodates both animation and sound. However, it isn’t widely used on the Web, and is primarily used for storing and transferring video on small, low-end devices such as
digital cameras and portable game consoles.
PNG: While there was an effort to create a protocol for animated PNG files, it hasn’t caught on, and thus hasn’t received support from most major browsers. The format has some specific uses, such as medical imaging and geographical work, but isn’t widely used on the Internet.
GIF: Almost all of the animated images you’ll find on the Web are GIFs. A couple of reasons why GIFs are popular are their efficient file size, and simple creation process. Moreover, a number of the format’s built-in features allow for acute control over specific animation behaviors — including animation speed, whether the frames are persistent, and how many times the animation repeats.
Conclusion
JPGs, PNGs, and GIFs have benefits and limitations, and it’s more important to know when to use each file type. As a general rule, you’ll want to use a GIF whenever the image is to be animated. Beyond that, JPG compression tends to create smaller file sizes at the cost of image quality. However, PNGs are better for capturing lossless images, and in situations where minimizing file sizes isn’t of utmost importance. Ultimately, situational considerations should be weighed heavily when deciding which of these file types you should use.
