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. So that brings up the question most often asked.
JPG vs. PNG: Which is Best?
Both and neither. The decision to use JPG or PNG image formats is dependent on the specific situations, which we’ll detail as we go along.
When determining when to use a PNG or JPG file to deliver your images, here’s what you need to know.
What is PNG?
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.
What is JPG?
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 to 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.
What is the difference between JPG and JPEG, or are they the same thing?
JPG and JPEG are exactly the same format. In the early days of Windows and DOS, file extensions were limited to three characters for those operating systems, so they shortened the JPEG extension to JPG. However, Unix and Mac operating systems did not have that limitation, so the original JPEG extension continued to be used there.
When to Use the PNG Image Format
PNG files are generally used in the following situations:
- To retain the detail found in illustrations, typography, line art, icons, charts, diagrams, and text overlays
- To use transparent backgrounds
- To ensure exact replication at all dimensions
- To ensure exact color reproduction
- To offer high-resolution, downloadable files
When to Use the JPEG Image Format
JPG files are typically used in these scenarios:
- To display photographs
- To create smaller file sizes
- To include metadata (such as camera shutter speed and ISO) with your 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:
- Does the image require very high resolution? If so, a PNG file is the better choice.
- If the quality is less important and site speed is a priority, use a JPG file.
What about GIF, WEBP, and SVG Image Formats?
While JPG and PNG images are the most common formats, there are others to consider. Here are some quick tips to determine when you might want to use those.
- GIF – GIFs are animated images that play on automatic repeat. While GIFs are great for creating excitement and engagement, or for providing a visual how-to, they tend to be much larger in file size, and therefore take much longer to load than other types of images.
- WEBP – WEBP images are a newer format designed to be much smaller in file size than JPG, PNG, or GIF. Initially, they weren’t supported by all browsers or platforms, so they haven’t immediately surged in popularity. However, all modern browsers now support WEBP, as does WordPress, so WEBP usage will likely continue to grow.
- SVG – Unlike all of the raster formats we’ve previously mentioned, SVG files are vector files. Rasters have a fixed number of pixels that make up the image. Rasters do not scale up well, getting more grainy or blurry as they go beyond their original size. Vector files, on the other hand, are made up of points, lines, shapes, and curves, rather than pixels. They are scalable to any size, without losing any quality. SVGs work well for logos, animations, and illustrations. They are editable with a text editor – yes, really – because they are defined by an XML text file. This also means they are SEO friendly, have a small file size, and load fast. Keep in mind, however, that while SVG images are a favorite format for logos and illustrations, they are not suitable formats for photographs.
How to Convert JPG to PNG or PNG to JPG
There are numerous ways to convert files from one format to another. Most image editing apps allow you to either import an image and then choose “Save as” or “Export to” another file format. In addition, you can find plenty of online conversion services that will convert your files for free. A few favorites are:
- Convertio
- Free tier limits are:
- Max file size: up to 100 MB each
- Max number of conversions in the last 24 hours: 10
- Max number of concurrently launched conversions: 2
- Free tier limits are:
- JPG to PNG
- Free tier limits are:
- Max file size: up to 50 MB each
- Max number of conversions in the last 24 hours: No limit stated
- Max number of uploads per conversion: Upload 20 images at a time
- Regardless of the site name, just choose the PNG to JPG tab to convert in that direction
- Free tier limits are:
- Zamzar
- Free tier limits are:
- Max file size: up to 50 MB each
- Max number of conversions in the last 24 hours: 2
- Free tier limits are:
Image Size and Compression Considerations
Unless you have the need to allow visitors to see or download extremely high-quality images, you should resize and compress them before uploading them to your site. This will be a better experience for your users, as the page will load more quickly, and the quality will probably not be noticeable at all. Faster page speeds are also helpful for SEO, so that is another thing to consider. In most cases, optimizing your images is the right choice.
Of course, if you are a photographer or someone whose business relies on showing the quality of your images, then you’ll need to carefully weigh the pros and cons of higher quality vs. slower speeds.
Image Caching and CDNs for Even Faster Speeds
Caching images ensures users don’t have to wait for an image to be pulled from the server before displaying it in their browser. A cached image loads nearly instantly, and therefore, the page speed load is much quicker.
Likewise, loading an image from a server nearest to the user also increases the time it takes for it to display. CDNs enable this functionality.
In both cases, WordPress.com and Jetpack-enabled sites have image caching and serving from CDNs built-in. If you are self-hosted, we recommend installing Jetpack to enable this functionality. Otherwise, there are several caching and CDN plugins available from the WordPress repository.
Key Takeaways
Choosing between JPG and PNG image formats is simple once you determine what the image will be used for.
Photographs work best as JPGs, while illustrations, text, icons, and images that require transparent backgrounds look best as PNGs.
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.
You may even decide it’s best to use a GIF, WEBP, or another format, depending on your needs.
Free tools are available if you need to convert an image from one format to another.
In all cases, consider compressing images, reducing image sizes, and serving images via a CDN to ensure your images are fully optimized.
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.
ABOUT THE AUTHOR
Go WordPress 