If you do not need the transparency (alpha-channel) of .pngs you should stick to .jpg and putting high resolution images online is a waste of bandwidth because many screens cannot render images at high dpi resolution. Filesize affects pageload speed and while most visitors are not on dial-up these days, no one waits for huge images to load. Some people have a plan limit that charges them more for using extra bandwidth so they would not appreciate those big files.

Your images should be the size of whatever real estate your taking up on the screen unless you're trying to provide higher resolution images for download.

PNG is lossless which by default makes it the better format but it also has larger file sizes. .jpg has sliding scale of quality, as you reduce quality you reduce file size. If you're only lightly compressing them you wont see any perceptible difference over .png Generally speaking .jpg is the better format for regular photo type images because you'll get good quality and smaller file sizes.

...many screens cannot render images at high dpi resolution.

DPI is meta data and irrelevant for web browsers. A 200px*200px image that is 72 dpi or 1000 dpi is the the exact same image and will render at the same exact size in a browser. It's not until you insert that image onto a canvas that has physical dimensions like a Word document that it becomes relevant

Funny to see this question come up in a www forum because it's a perennial favorite among e-book producers too.

Can we assume ordinary pictures that are simply part of the page design-- nothing fancy like zooming in on map detail or fine art? If so, smaller is better. No, not the physical size of the picture measured in pixels, inches or linear measure of your choice. Filesize in bytes.

Do not even think about png for full-color ("millions", with or without alpha channel) images. Even using uncompressed jpgs, the size difference is enormous.* If you can cut the bitdepth to 256 colors or less, use png and/or gif. (Different argument here ;)) Otherwise use jpg and experiment. Even compressing a little bit, like 90%, will cut the filesize in half.

Also look at image content. jpg is lousy at sharp edges and abrupt contrasts, as in a logo or design-- and the more you compress, the muddier it gets. Anything you're designing from scratch should be constrained up front. You can do a lot with 16 colors if they're the right 16.

But speaking of physical size: you can make an image a particular size and resize it in the browser based on viewport dimensions. But "can" does not mean "should". Just use a smaller picture in the first place. Or, if you must offer different sizes, get one of those utilities that does it server-side so the user never downloads more than they need. People will small viewports and restricted bandwidth (read: most cell phone users) will thank you.


* I once came across a site where many of the photographs were in
:: drumroll ::
.bmp format. Oh, and resized in the browser by a significant factor. You would not think anything could be bigger than a png, but these ran several megabytes each. I tried conveying this to the site owner-- via an intermediary-- but he wasn't interested. So I just painted the picture he'd ordered and shut up about it.

If you can cut the bitdepth to 256 colors or less, use png and/or gif. (Different argument here ;))

If you're taking screenshots of a simple webpage like this one or you have something like scans of text documents those are actually desirable in that situation. You'll get much smaller file sizes than .jpg and the edges of contrasting color like text on white background will remain nice and crisp.

You would not think anything could be bigger than a png, but these ran several megabytes each.

Both are lossless but .png uses a lossless compression.

Heh. I somehow missed the key word "photo" in both the thread title and the first post. If we're dealing with photographs, I think we're definitely talking jpg.

I've read that 'the average person' has difficulty seeing the difference of images above 300 dpi.
Which seems to be a good resolution limit.
The format, as mentioned above, usually depends on the subject matter.

....which one is better and what are their differences?

Well, if you can't tell the difference (assuming your eyes are in good condition), then go with what you see yourself. If you discern no difference, then go with the smallest file size.

'the average person' has difficulty seeing the difference of images above 300 dpi.

Especially in a browser, where pixels are a unit of measure rather than a physical count, so the original resolution makes no difference.

Come to think of it, I have no idea what my monitor's physical resolution is. My first computer was 72-- black and white, of course-- back when That Other Platform prided itself on 96 and a pixel was both a unit of measure and a physical dot. Basically the same as a typesetter's point. The printer claims to go up to 600dpi.

I've read that 'the average person' has difficulty seeing the difference of images above 300 dpi.

Again, it's irrelevant for browsers or even displays for the most part. 300dpi isn't even achievable on any standard monitor , the "retina displays" from apple come close but they have fairly small physical dimensions operating with high resolutions.

Let me restate this, let's say we have 2 images that are 200px*200px. One is set at 72dpi and the other is set 1000dpi. When you display these side by side in a browser window they are going to look identical, they are going to take up the exact same amount of real estate and even have the nearly the same file sizes. The only reason it's not the exact same file size is those extra 0's in the meta data add a byte or two.

Come to think of it, I have no idea what my monitor's physical resolution is.

I think you need to separate resolution and DPI, I know sometimes they are used interchangeably but for me resolution is the pixel dimension.

You can find out the dpi of you monitor by taking a tape measure and measure the width of the viewable screen. Divide the horizontal resolution by the inches. If you have the display set for 1920*1080 and the physical width is 22 inches it's about 87dpi.

My first computer was 72-- black and white,

Back then they were actually 72 DPI hence the reason 72DPI is still used as a standard for images. There is bit of history there if you want to research it. Currently the DPI setting in your OS has no relevance to the actual DPI setting being displayed.

Currently the DPI setting in your OS has no relevance to the actual DPI setting being displayed.

Uhm, that was my entire point. Hence my reference to typesetter's points, which are strictly a unit of measure. (Or were, until computers got hold of them. "12 point" fonts on that old 72 dpi monitor ranged from 12 to 15 pixels. I think New York may even have been 16.)

:: sigh ::