In this article
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.
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.
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
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.
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.
Thousands of small businesses and online stores call WordPress.com home.
Whether you’re looking to promote your business or share your story, we have a plan that’s right for you.Create your own website