Showing a photo as JPG or PNG in a browser

Billy Axeman · May 9, 2019

I have done a small test by editing a photo from DNG to JPG and PNG, to see if there are visible differences when shown in a browser side by side (Firefox, Microsoft Edge).

The original DNG is converted to BW with Channel Mixer and then saved as JPG and PNG, both 24 bit (8 bits/channel, sRGB). After that the JPG and PNG are processed independently but identical: correction of perspective, cropping, contrast, resized to 500x500 px, sharpened. The JPG is compressed only 2% to keep the quality high, the PNG has an internal compression (don't know how much).

JPG

PNG

File size is 183 kB for the JPG, and 320 kB for the PNG.

Theoretical the files might be rendered differently in a browser because PNG is especially designed for web use, but in practice I don't see any differences. I also don't see differences in the editor on pixel level for that matter.

Of course the JPG would show up more fuzzy and with artefacts when compressed more (the PNG is lossless), but this test was about rendering by a browser so compression is kept low.

Is there anyone who always edit their photo's as PNG instead of JPG and for what reason?

jeffreyg · May 9, 2019

I predominately use film for black and white ( Delta 400 and 100 in 120 and HP5 in 4x5) . Scan and minor editing with PhotoShop and if presenting on the web I use "save for the web..." in PS. I believe that saves as a jpg. I have saved as jpg's in PS and seem to get very good results. I have also converted digital color to monochrome and used on the web. I haven't purposely saved as PNG. It's possible some software ie to make a website converts to PNG. I just don't get involved with the technical end. If it works and gives me a good result, I tend to stick with it.

http://www.jeffreyglasser.com/

http://www.sculptureandphotography.com/

jim10219 · May 9, 2019

Typically, the rule of thumb is JPG is better for photos. PNG is better for logos and simple shapes that don't have complex information. PNG also allows for alpha (variable transparency) layers. Two photos of similar quality and size will be much larger if saved as a PNG versus JPG due to it's lossless nature.

Bottom line, it depends on what you're trying to do with it. JPG is better if size is a concern. PNG is better if you're using alpha layers. If you're trying for maximum quality for future editing, neither is good. If you're wanting the highest quality photo displayed on a website, either can be used, though you don't want to get too aggressive with the JPG compression if that's your goal, and the PNG will take up more space. If you're wanting maximum quality on a downloadable image, JPG will give you some artifacts upon close examination, though PNG's aren't as easy for the average person to view outside of a web browser. So a low compression JPG might be the best bet there.

I use JPG for photos for my websites because even with todays ultra fast internet connections, data is still a concern (thanks to internet data plans and people in rural areas who can't get fast internet connections). I use PNG for logos and files made from vector formats. I use JPG for general print work like magazines and brochures. I use raw file types and lossless PDF for photographs for personal use, as hard drive space is cheap and I like the editing power.

runswithsizzers · May 9, 2019

Is it just me, or is the JPG ever so slightly sharper than your PNG? Considering the JPG is half the size of the PNG, I don't see any reason to consider the PNG as an alternative.

What image editor are you using? If it is a non-destructive editor - and if the only thing you want to test is JPG vs PNG - then the test would be better controlled if all edits were done to the DNG - and conversion to JPG and PNG were saved until the last step (Export As).

Is your only goal to output the highest quality - or is keeping the file size small also a major consideration?

Billy Axeman · May 9, 2019

jim10219 said:
Typically, the rule of thumb is JPG is better for photos. PNG is better for logos and simple shapes that don't have complex information. PNG also allows for alpha (variable transparency) layers. Two photos of similar quality and size will be much larger if saved as a PNG versus JPG due to it's lossless nature.

Bottom line, it depends on what you're trying to do with it. JPG is better if size is a concern. PNG is better if you're using alpha layers. If you're trying for maximum quality for future editing, neither is good. If you're wanting the highest quality photo displayed on a website, either can be used, though you don't want to get too aggressive with the JPG compression if that's your goal, and the PNG will take up more space. If you're wanting maximum quality on a downloadable image, JPG will give you some artifacts upon close examination, though PNG's aren't as easy for the average person to view outside of a web browser. So a low compression JPG might be the best bet there.

I use JPG for photos for my websites because even with todays ultra fast internet connections, data is still a concern (thanks to internet data plans and people in rural areas who can't get fast internet connections). I use PNG for logos and files made from vector formats. I use JPG for general print work like magazines and brochures. I use raw file types and lossless PDF for photographs for personal use, as hard drive space is cheap and I like the editing power.

The general opinion is indeed that PNG is better suited for logo's and graphic work, but I think the underlying reason is that it supports transparency. I did some reading but I think it is a misconception that PNG is not suitable for photographic work.

I actually started looking at PNG as an alternative for TIFF, with lossless compression and 48 bit (PNG is a true public format, TIFF is owned by Adobe). But I think the files are similar in size.

A nice overview of image formats with all their properties can be found here:
https://scantips.com/basics09.html

Billy Axeman · May 9, 2019

runswithsizzers said:
Is it just me, or is the JPG ever so slightly sharper than your PNG? Considering the JPG is half the size of the PNG, I don't see any reason to consider the PNG as an alternative.

What image editor are you using? If it is a non-destructive editor - and if the only thing you want to test is JPG vs PNG - then the test would be better controlled if all edits were done to the DNG - and conversion to JPG and PNG were saved until the last step (Export As).

Is your only goal to output the highest quality - or is keeping the file size small also a major consideration?

My image editor was Paint Shop Pro X7 and intermediate JPG files were saved as lossless, so there was no loss of quality during processing.
Both file types were edited as 24 bit (8 bits/channel). I admit that is not ideal but at this moment I refuse to work with the huge 48 bit files, so it is a compromise between quality and size.
Moreover, I don't print, all my photo's are small and shown in a browser, so I don't think it makes a big difference.

jim10219 · May 9, 2019

Billy Axeman said:
The general opinion is indeed that PNG is better suited for logo's and graphic work, but I think the underlying reason is that it supports transparency. I did some reading but I think it is a misconception that PNG is not suitable for photographic work.

I actually started looking at PNG as an alternative for TIFF, with lossless compression and 48 bit (PNG is a true public format, TIFF is owned by Adobe). But I think the files are similar in size.

A nice overview of image formats with all their properties can be found here:
https://scantips.com/basics09.html

It's not that PNG isn't suitable for photographic work, it's just that it's doesn't really up the quality much in a browser, but does up the file size quite a bit.

These are all tools. It's not so much which you use, but how you use it. For instance, you can have a lossless JPEG. And you can have a lossy PNG (it's compressed prior to conversion). You can get really deep in the woods learning about all of the ins and outs of all of the various formats and how they work. As a graphic designer, I've learned what's "best" won't always end in the best results. Sometimes it's actually best to use what is most common, as compatibility is a much bigger issue than most people give credit. So I try to stick to common file types and use them for their common purposes to eliminate future headaches.

Andrew O'Neill · May 9, 2019

In this example, the jpeg looks better. I've always saved photos as jpegs that are intended for the internet.

Anon Ymous · May 9, 2019

Billy Axeman said:
The general opinion is indeed that PNG is better suited for logo's and graphic work, but I think the underlying reason is that it supports transparency...

Png isn't better suited for logos, charts and graphic work because of transparency. It might be a plus, but it's not the main reason. Being lossless, it will keep fine detail crisp and clear. Jpg, especially when using higher compression will create artifacts. If lower compression is used, then the file difference is lowered, if not lost. At the same time, lossless compression of images with very few different colours can result in huge file size reduction. This is a characteristic of charts and line work, not a typical photograph.

runswithsizzers · May 9, 2019

Billy Axeman said:
My image editor was Paint Shop Pro X7 and intermediate JPG files were saved as lossless, so there was no loss of quality during processing.
Both file types were edited as 24 bit (8 bits/channel). I admit that is not ideal but at this moment I refuse to work with the huge 48 bit files, so it is a compromise between quality and size.
Moreover, I don't print, all my photo's are small and shown in a browser, so I don't think it makes a big difference.

My suggestion to edit the original file first, then convert it, was not aimed at preventing loss of quality while editing. Rather, my concern was that editing each file separately might introduce more variability in the results that could be misinterpreted as due to differences in the file format.

Billy Axeman · May 9, 2019

runswithsizzers said:
My suggestion to edit the original file first, then convert it, was not aimed at preventing loss of quality while editing. Rather, my concern was that editing each file separately might introduce more variability in the results that could be misinterpreted as due to differences in the file format.

Ah yes, you are right.

I also fear that's the reason some people are preferring the JPG. Looking at the twigs left and right perhaps the JPG is a teeny-weeny bit sharper. But it's not logical and perhaps a side effect of the post-processing, because the clean bitmap from PNG is directly rendered to the browser and it should be sharper. More tests needed.

MattKing · May 9, 2019

Be careful using the images shown in Photrio to make comparisons like these.
The image downloader used by the Photrio software does modify images - sometimes quite radically.
If I download an image here, and download the same image to Flickr, the results often appear quite different on my screen.

Billy Axeman · May 9, 2019

MattKing said:
Be careful using the images shown in Photrio to make comparisons like these.
The image downloader used by the Photrio software does modify images - sometimes quite radically.
If I download an image here, and download the same image to Flickr, the results often appear quite different on my screen.

Yes I have seen that too on Microsoft OneDrive.

Ok, in spite of that I made two new versions following the suggestion from @runswithsizzers.

I now edited the image from the DNG (saved as an intermediate 48 bit TIF in the end), then resized to 500x500 px, and saved as JPG and PNG from the TIF. So both files have now the same post processing.

JPG

PNG

trendland · May 9, 2019

MattKing said:
Be careful using the images shown in Photrio to make comparisons like these.
The image downloader used by the Photrio software does modify images - sometimes quite radically.
If I download an image here, and download the same image to Flickr, the results often appear quite different on my screen.

No wonder about Matt .....I remember full threads of mine image downloader you mentioned
from Photrio modify whole thread! The software Photrio used there is named jnantz!

with greetings to you in Britisch Columbia

!

Showing a photo as JPG or PNG in a browser

Billy Axeman

jeffreyg

jim10219

runswithsizzers

Billy Axeman

Billy Axeman

jim10219

Andrew O'Neill

Moderator

Anon Ymous

runswithsizzers

Billy Axeman

MattKing

Moderator

Billy Axeman

trendland

Showing a photo as JPG or PNG in a browser

Moderator

Moderator

Privacy & Transparency

Privacy & Transparency