Can’t decide whether to choose PNG or JPEG for your images? It’s a crucial decision as it can impact your website’s speed and SEO. Users also prefer fast-loading sites, and the bounce rate increases by 90% if there is a 5-second delay.
We’ll look at the differences between the two image files. You’ll also learn about next-generation image formats. Let’s get started:
What is JPEG?
JPEG is an image file format popularly used for web images. The Joint Photo Experts Group created the compression algorithm that makes JPEG images possible in 1992. The mathematic behind the algorithm is a bit complicated. But the whole premise is to shrink images by grouping similar pixels into similar blocks. It has a compression factor of up to 10:1. So if you had a 5 MB image, saving it in jpg should result in a 500 KB image.
It’s regarded as a lossy compression format. That simply means that the image quality and file size will reduce if you keep saving the image as JPEG. But the intention is always to end up with a smaller file size without a noticeable change in the quality. Each time you save an image in JPEG, you lose information that can’t be recovered.
What are the best uses of jpeg?
JPEG is ideal for digital photographs. For instance, the following photo is a JPEG image file:
It looks good on the screen, and best of all, it’s only 34 Kb in size. Smaller images take less time to load than larger images.
You should never use an uncompressed raw file, either. That’s because it would probably be several MBs in size. Even after compressing image files, it’s always advisable to preserve the original file in the raw format or by using PNG that uses a lossless compression algorithm.
JPEG is not suited for any image that contains text or sharp lines. For instance, you should never use it with barcodes as it makes it harder for scanners. While it’s great for digital images, it’s not preferred for facial images to be analyzed by facial recognition software. JPEG only supports 8-bit, while modern cameras support more high-res images. That makes it unsuitable for professional-print photography.
If you take a look at the following screenshot, you can notice blurriness around the text. The original JPEG image in the caption has undergone further image compression and looks pixelated. On the positive side, the image file has a size of 26.3 Kb.
After saving the screenshot using PNG, the quality has noticeably improved. But the file size is now 184 Kb. That’s about 5 times larger than the JPEG image.
Can we use the still image online? Yes, but we should consider compressing it.
After running it through the TinyPNG image compression tool, the new file size is 46 Kb. Can you spot any noticeable differences between the compressed file and the original 184Kb screenshot above?
JPEG advantages and disadvantages
|Smaller file sizes||No transparency support||Digital photographs|
|No compression may be needed||Not suitable for screenshots||Email attachments|
|Great for photographs||Only 8-bit images||Web images|
|Widely supported||Lossy compression|
What is PNG?
The creators of PNG were motivated to create a new open file image format that would serve as an alternative to GIF, which is copyrighted. PNG uses the same LZW-compression algorithm developed by Unisys.
The World Wide Web Consortium first recommended PNG in 1996, and it became an official international standard in 2003. It’s still one of the popular file formats for images on the web.
The strength of PNG lies in its lossless compression format. That means that if you open and save a png image multiple times, there will be no reduction in the image quality.
What are the best uses of PNG?
PNG is better than JPEG for saving images that have text or distinct lines. Unlike JPEG, it supports transparency, making it the best image format for icons or images that need to be overlaid on other images or digital backgrounds. Screenshots look better in PNG because it reproduces each pixel on the screen accurately. Because there is no loss in quality with PNG files, archivists have used it when digitizing files for use on the internet.
The only limitation of png is its larger file size output compared to JPEG. It can’t natively store EXIF data consisting of data from the image. But certain tools can embed textual information inside png files.
Advantages and disadvantages of PNG
|Lossless compression||Larger file sizes||Screenshots|
|Supports transparency||Not suitable for pro-quality print graphics||Icons & logos|
|Better color support||No native support for EXIF info||Archiving & storing images|
|Open standard||Images with text|
Is .jpeg the same as .jpg?
“jpeg and jpg” both refer to the same file format. Initially, Windows restricted file extensions to only three characters. So, Mac users would see the images saved as .jpeg, while Windows users would see their images as jpg.
PNG vs. JPEG: which offers the best quality?
PNG offers the best quality images because it can support greater bit depths of up to 48-bit true color.
When exporting images for the web on Photoshop, you can save images as PNG-24 (better quality larger file) or PNG-8 (smaller file size). There is only one option for JPEG, but you can determine the file size by setting a percentage value.
Does the quality difference between JPEG and PNG matter when considering the web? Well, the most important thing we consider is the image size. Also, it may be hard at times to tell the difference between a PNG image and a JPEG image, particularly if it’s a real photograph. The differences in the image quality will be apparent if the image has text.
PNG vs. JPEG: which is best for SEO?
The best image for SEO is the fastest loading image. That means that you should prioritize smaller images. But if you can achieve smaller sizes with PNG, you can still use the format.
Rather than guessing the best image sizes, run your website through Google PageSpeed Insights.
The tool highlights the time taken to load images and tells you of the potential savings you can make by converting images to the next-generation file formats.
Google takes image sizes seriously as large images can impact the experience of users. Using smaller images means that you’re considerate of the needs of mobile users because they will end up using less cellular data.
Next-generation image file formats
Image file formats have considerably improved over the years. And there is no need to keep using png and jpg.
Why are websites still using the old formats? Well, that’s because they are popular, and many web developers choose formats that are natively supported across all browsers. They don’t like worrying about images breaking on some devices.
There is good news, though.
Web browsers keep changing, and newer browser versions support the latest next-gen formats such as WebP, developed by Google.
WebP is poised to become the format of the future as it uses a superior Lossless and Lossy compression algorithm. It offers all the benefits of JPEG with the same features as PNG. For instance, if you convert a JPG image to WebP, it will be about 25 to 30% smaller with no noticeable reduction in quality. This is why we recommended using that format in our article about the top image SEO tips.
The following image was originally saved as a JPG file with a file size of 46Kb. After converting it to webp, it’s only 13 Kb in size.
WebP also supports alpha transparency and animations. You can confirm supported browsers by checking WebP support tables.
Switching to next-generation formats like WebP, JPEG 2000, or JPEG is quite easy. On WordPress, several extensions can convert all uploaded images to the new optimized formats.
You can also use desktop apps or conversion websites such as CloudConvert.
Consider compressing PNG and JPG images
Compression algorithms can compress images further. Ideally, aim for file sizes of less than 100 KB. Some of the best compression tools include:
TinyPNG allows users to compress images with file sizes of up to 5 MB for free. You can upload up to 20 images at a time. It uses a smart lossy compression technique, and from regular use, it manages to reduce the file sizes with no noticeable quality differences.
- Kraken.io image optimizer
Kraken offers plug-ins for Magneto and WordPress. You can also use it to generate different image sizes for the same image quickly.
Smush is an award-winning image optimizer that utilizes a lossless algorithm for image compression. Optimizing images under 5MB is free, and you add up to 50 images at once.
Other workarounds to increase the site speed
Smaller images are not a cure-all for a slow-loading website. If you optimize your images and still end up with a low score on PageSpeed Insights, you can consider implementing other techniques such as:
- Implementing a content delivery network;
- Installing a caching plugin;
- Minifying the website code;
- Compressing your entire website;
- Reducing HTTP requests.
PNG vs. JPEG: the verdict
The choice to use png over jpeg should be made after considering the intended use. PNG is suitable if you’re saving screenshots, archiving images, or savings images with text.
JPEG will offer better compression with no noticeable change in quality for photographs. Additionally, you can keep using PNG as long as you compress the images to a small size.
Running your website through PageSpeed Insights can reveal images that require optimization. Going forward, you can consider using next-generation image formats such as WebP.