Image Formats

Summary

Choosing between JPG and PNG image formats.

Audience

Editors, Publishers, Site Managers, and Site Admins

Which format should I use?

Both PNG and JPEG are popular and widely supported across the web. Both are raster image files, meaning they are made up of a certain number of pixels. For that reason, neither format produces good results when scaled up to larger than the original image size. 

Both formats are good for displaying photos. However, PNG is generally the better choice when the image contains large sections of solid color—like an infographic or logo. Text displays more crisply in PNG. Additionally, a PNG can be created with a transparent background, so it can be displayed on top of a colored area. A JPEG retains a white area around the object.

JPEG is typically better for photos of people, scenes, or illustrations with complicated gradients or textures. JPEGs can be saved with different levels of compression, so you can more finely control the file size and image quality. However, a JPEG loses image quality if you keep opening the same image and modifying it. PNG retains its quality when repeatedly edited. However, you can avoid problems with lossy compression.

With the exception of transparency, both formats can be used, but each yields better results in particular uses.

Lossy versus Lossless Compression

When you save an image from its original format to JPEG or PNG, the information is compressed, in order to make a smaller file. Smaller files are desirable on the web because they load faster.

PNG preserves all of the original image information when it compresses. Thus, the file can be modified over and over without a loss of quality.

JPEG makes the file smaller by discarding information, irrevocably. This works fine for one generation, and is a great way to make a photo small enough for use on your website. However, if that file is edited again, even more loss occurs, and the quality degrades significantly. Don’t let this deter you from using JPEGs when they’re the best option—simply make sure to preserve the original file and modify copies for your website. When you need a different size or other modification, go back to the original to make a new version, not to the second-generation image.