When choosing photos for your site, it is not only what is in the photos that matters. In fact, choosing the right image format can be equally as important. So let’s talk about JPG vs PNG, which to choose, and why.
If you go for a wrong format, you might end up with a slower website, higher bounce rates, and lower conversion rates – and that is not what you want, especially when it can be easily avoided.
The Difference between PNG and JPG
Let’s start with the basic definitions.
PNG stands for Portable Network Graphics, with so-called “lossless” compression. That means that the image quality was the same before and after the compression.
JPEG or JPG stands for Joint Photographic Experts Group, with so-called “lossy” compression.
As you might have guessed, that is the biggest difference between the two. JPEG files’ quality is significantly lower than that of the PNG files.
However, the lower quality isn’t necessarily a bad thing.
What is JPEG?
JPEG images are a common choice for images produced by digital photography and they are a good choice for pictures with complex colors and shading.
While the loss in quality is little perceptive with JPG’s 10:1 compression, the smaller size makes JPEGs suitable for web use because reducing the amount of data used for a photo is helpful for responsive presentation.
On the other hand, JPG pictures aren’t the best choice for line drawings and other textual or iconic graphics because of the sharp contrasts between adjacent pixels. If you want to use an image of that type for your site, you should probably consider using lossless graphics formats.
What is PNG?
PNG was created as an improved replacement for GIFs and it has become the most common lossless image compression format on the Internet.
So what is a PNG file?
Known as Portable Network Graphics, PNG image can be palette-based, grayscale, and full-color non-palette-based RGB/RGBA.
PNG file format was designed specifically for transferring images on the Internet rather than for print graphics and, as a result of that, does not support non-RGB color spaces such as CMYK.
The big plus is that .png offers a variety of transparency levels which means that PNG background can be completely transparent which is important for png logo designs and similar. It is also the best choice for pictures with fade effects.
JPG vs PNG – the Basic Rule
Since both JPG and PNG format have their pros and cons, you should get the most out of both of them and play to their strengths.
In practice, that means that you should use .jpeg for photographs, and .png for graphics and screenshots.
Does It Really Matter?
When talking JPG vs PNG and comparing the two side by side, the truth is that you won’t be able to see much of a difference in the photos.
So if PNG pictures don’t look that much better JPGs, why not always use JPG format and make things easier for yourself?
Unfortunately, it’s not all that simple and the reason for that is image compression.
You want the highest quality image format but you also want to have a responsive website so you need to really take the difference between jpeg and png into the consideration and particularly the difference in image compression.
Think about it like this: Image compression means reducing the image size without sacrificing the quality for the sake of the size. Generally, stronger compression equals smaller file size which equals worse image quality.
So if you want a good compression, you need to find the right balance between the quality and the size of your file.
When you look at the image saved in your computer, you see the best version of it because the file has not been compressed. However, if that same image is on the website, it needs to be downloaded in order for you to see it.
Logically, that means that the larger the image – the longer the loading time.
I was never knowing this thanks