Can’t decide whether to choose PNG or JPEG for your images? This decision should not be taken lightly as it may have a direct impact on your website’s speed and SEO.In this article, we’ll analyze the differences between the PNG and JPG formats, when to use one over the other, and we’ll do our best to answer any question you may have.Let’s get started.
JPEG is an image file format used for web images. The Joint Photographic Experts Group(hence the “JPEG” acronym) created the compression algorithm that makes JPEG images possible in 1992.JPEG is regarded as a lossy compression format. This means that the image quality and file size will decrease if you keep saving the image as JPEG. To make it very clear, let’s say you’ve saved a JPEG file. If you edit it and save it again, the file size of your JPEG will decrease further and so will the image’s quality. If you edit this image again and save it, you’ll end up with an even smaller file size.Importantly, each time you save an image in JPEG format, the file size is permanently reduced. In other words, you’ll lose information that you won’t be able to recover. That’s why it’s recommended to always save your original image first in a lossless format (ex: in TIFF format) before converting to 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. Not only will this allow you to save a bit of storage space, butthe smaller file size implies that your web page will load much faster than with larger images. This is important because the probability that a user leaves the first page visited on your site, also called the bounce rate,increases by 32%when the page’s load time goes up from 1 to 3 seconds.
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 to read.Let’s look at an example.We took a photo from Unsplash that contains text.
We duplicated it in order to end up with a JPEG file on one hand and a PNG file on the other hand.Let’s zoom in on the text part.While PNG files are a lot bigger than JPEG files in terms of size, the PNG format clearly results in higher quality images than the JPEG format, which shows noticeable blur around the text.
Besides, JPEG only supports 8-bit, while modern cameras support more high-res images. That makes it unsuitable to save high-resolution photographs.
JPEG advantages and disadvantages
| Pros | Cons | Best to use for |
| 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, which stands forPortable Network Graphics, 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.
When to use PNG and when to avoid it?
When is PNG suitable?
1. PNG is better for text-heavy images
PNG is better than JPEG for saving images that have text or distinct lines.Screenshotslook better in PNG because it reproduces each pixel on the screen accurately. So if you’re looking tosave high-resolution text-heavy screenshots, PNG is the way to go.
2. You’ll need to use PNG to get transparent images
What’s more, unlike JPEG, PNG supports transparency, making it the best image format for icons or images that need to be overlaid on other images or digital backgrounds.
3. PNG is a good option for archiving
Because there is no loss in quality with PNG files, archivists have used PNG to save TIFF images while bringing their sizes down.
When is PNG not a good option?
The main limitation of png is its larger file size output compared to JPEG. PNG images can really slow your website. This affects your readers’ user experience and may them less eager to spend time on your website. Besides, larger images may increase the bandwidth usage on your server, especially if you don’tprevent hotlinking.
Besides, 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
| Pros | Cons | Uses |
| Lossless compression | Larger file sizes, slows website down | 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 |
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.You can find out more about using its sharpening features here. If your screenshot has been saved in PNG and doesn’t have any text, you can convert it to JPG to save on space.
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, especially if yourarticle contains many images. But if you can achieve smaller sizes with PNG, you can still use the format.Rather than guessing thebest image sizes, run your website through Google PageSpeed Insights.
The toolhighlights 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.If you are considering using PNG for images that contain text such as infographics, it may be better to use SVG instead of PNG as the search engines can index the text contained in the image.
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.
Frequently asked questions
1. How does JPEG compression work?
The mathematic behind the algorithm is a bit complicated. But the whole premise is to shrink images by grouping similar pixels into similar blocks. In case you’re new to this world,pixels are what images are made of. These are very small blocks that have a specific color value, and the larger the image, the more blocks are needed to represent it. JPEG compression groups pixels that look the same together so that instead of having a very granular transition between areas of your image that have a similar color, you’ll end up with fewer individual colors to represent such areas.
Let’s take an example to make this clearer. On the right side, we show the zoomed-in area of animagein TIFF format. On the left side, we show the same zoomed-in area, compressed by JPEG. As you can clearly see, the image on the left appears to be pixelated and all the color transitions are not as sharp as on the original image.
JPEG 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.
2. How to compress 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.com
TinyPNGallows 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 as you can see below.
- Kraken.io image optimizer
Krakenoffers plug-ins for Magneto and WordPress. You can also use it to generate different image sizes for the same image quickly.
- Smush
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.
3. How to improve loading time of pages that contain images?
Smaller images are not a cure-all for a slow-loading website. If you’vereduced the size of the images on your siteand 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
4. Is JPEG the same as JPG?
Although there’s a slight nuance between “JPEG” and “JPG”, both extension names refer to the same file format. The reason why they are used interchangeably, is that 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.
5. Which image format should I use if neither PNG nor JPEG work well for me?
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 thetop 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 checkingWebP 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.