Friday, October 31

GIF vs JPG vs PNG: differences

If you are working with JPG, GIF and/or PNG image files, it is essential to know the differences between each one, so you know when to use them. The main difference between files formats is how they are used when designing for the web and the outcome they produce. One produces highly optimized simple graphics, another is used for most images, and the third option is used for complex graphics, gradients and transparency.

  • Compression: 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.
  • Transparency: 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.
  • Animation: 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.
  • Compression: 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.
  • Transparency: 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: 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.
  • Compression: 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: 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.
  • Animation: 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.


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.