Are PNG or JPG Images Better for Site Speed?

Jen Miller / March 12, 2019

, ,

Images have the power to expand upon content, break up blocks of text, and provide support for visual learners. Selecting the right type of image file (PNG or JPG) can help you cut down on excessively large file sizes. Reducing file sizes keeps your page load times low so that your site visitors don’t navigate away when images take too long to appear.

When determining when to use a PNG or JPG file to deliver your images, here’s what you need to know.

Characteristics of PNG and JPG images

PNG stands for Portable Network Graphics. PNG image files allow for lossless compression. They maintain the clarity of complex images such as icons, floorplans, and maps. PNG files also retain transparency, an essential component when layering website elements on top of each other.

The JPG (JPEG) file type was named after its creators, the Joint Photographic Experts Group. Originally created to provide easy sharing of photo files, this image type can reduce file size (compress) up to 90 percent. As compression is applied the photo, its quality is diminished. This concept is referred to as “lossy” by designers. Since images use gradients instead of sharp edges, compressed photos can still look fantastic on websites.

Using a PNG vs. JPG

PNG files are generally used in the following situations:

  • To retain the detail found in iconography, typography, charts, diagrams, and text overlays
  • A transparent background when designing or positioning a logo
  • Exact replication at all dimensions
  • Exact color reproduction
  • High-resolution, downloadable files

JPG files are typically used in these scenarios:

  • To display photographs
  • To create smaller file sizes
  • For shareable or downloadable images
  • Metadata (such as camera shutter speed and ISO) to accompany images

When to use each file format

For most websites, you’ll find yourself using a combination of image types. When trying to decide between a PNG or JPG, consider the purpose that your image will serve:

  • Is the image dependent on its accuracy? If so, a PNG file is the better choice.
  • If the quality is less important and site speed is priority, us a JPG file.

Chose an image format that meets site needs

Always consider the audience and application when deciding on which image format to use. eCommerce sites must load quickly, so they tend to use JPG images in the smallest sizes possible. In contrast, larger, higher-quality photos will appear on a professional photographer’s portfolio site, so more of a time lag is to be expected.

Once you determine who will be viewing your images and why, you’ll have a better understanding of the image type needed to strike a balance between quality and website performance.

Create your new blog or website for free

Get Started