3 ms·

EDIT: I was wrong, and had PNG and JPEG formats backward. As others correctly pointed out PNG is lossless where as JPEG is lossy. PNG is better for marketing /

EDIT: I was wrong, and had PNG and JPEG formats backward. As others correctly pointed out PNG is lossless where as JPEG is lossy. PNG is better for marketing / UI / artistic imagery and JPEG for photographs due to the tolerance for JPEGs lossy encoding with photographs, seems to be the generally accepted opinion now. Regardless, since the picture tag[0] was introduced I’ve used that for most image media by default with relevant fallbacks, with WebP as default. Also allows loading relevant sized images based on media query which is a nice bonus [0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

Tobani 1y ago
They're different beasts. JPEGS are great for photographs, where lossy compression is acceptable. PNGs can have transparency and lossless compression, so they're great for things like rasterized vector graphics, UI-element parts of a web page, etc.
- kevingadd 1y ago
  PNGs are also ideal for color accuracy since one of the things you lose quickly when converting to JPEG is the ability to have an exact RGB value flow from input to output, even at a high quality level. So if you want i.e. a banner graphic to seamlessly blend in with your site's background color, JPEG is worse for that.
  - martin_a 1y ago
    Sorry, but that sounds more like a problem with your color management systems and workflows and not so much with JPEG itself.
    - kevingadd 1y ago
      JPEGs are intrinsically YCbCr not RGB, so I don't know how you would avoid some precision loss when you combine that colorspace conversion with things like the quality level and (potentially) subsampling.
      - qingcharles 1y ago
        Are they? I thought JPG could switch? I know jpegli uses XYB colorspace in JPGs.
        gen2brain 1y ago
        JPEG can be YCbCr, RGB or even CMYK (usually from Photoshop or similar software). There can also be unusual subsample ratios for YCbCr, such as 4:2:1. I created some WASM Go bindings for jpegli, and I recall that such images cannot be represented in Go; therefore, for these images, I force RGBA output. Also, XYB is an option; I use the adaptive quantisation option from jpegli (with progressive level 2) to get smaller files. I never bothered with XYB, as it looked complicated.
MrDOS 1y ago
PNGs for line art and text, JPEGs for photorealistic images. > When I came up in the IE era In the IE era I recall, the battle was between GIF and JPEG because IE supported alphatransparent PNGs very poorly :) > if I recall correctly JPEG as a format can encode an image with a higher fidelity than PNG The other way around: JPEGs are “lossy” – they throw away visual information to save file size. PNGs, on the other hand, are “lossless”, and decode back to exactly the same pixels that were fed into the encoder.
- no_wizard 1y ago
  It’s been so darn long since I looked into these formats I got it backward. Thank you!
roelschroeven 1y ago
It depends on the use case. For archival purposes, where you care about not losing details is more important than image size, PNG is better (though often TIFF is used for that use case). For images with large blocks of solid colors and sharp edges (text, line drawings), PNG is arguable better (though JPEG can be acceptable if you're careful with quality settings). If you need alpha support, go for PNG since JPEG doesn't support that. For photograph-like images, where image size is important, JPEG is preferred over PNG.
addaon 1y ago
> if I recall correctly JPEG as a format can encode an image with a higher fidelity than PNG, at least in some circumstances 24-bit color PNGs are lossless, to the extent that the input image is encodable in 24 bits of RGB (which is pretty much everything that's not HDR). There's no higher fidelity available for normal input images. If file size limits would force palettized PNGs, it's quite possible for a JPEG at the same file size to have higher fidelity (since it makes a different set of trade-offs, keeping color resolution but giving up spatial resolution instead); but this isn't really a common or particularly valid comparison in the PNG era, was more of an issue when comparing to GIFs. tl;dr: Nope, PNG is perfect. JPEG can approach perfect, but never get there. Comparison is only interesting with external (e.g. file size) constraints.
- vikingerik 1y ago
  There is a lossless JPEG spec and format, though use of it never caught on much: https://en.wikipedia.org/wiki/Lossless_JPEG https://en.wikipedia.org/wiki/Lossless_JPEG
  - adgjlsfhk1 1y ago
    hopefully lossless jpeg-xl actually gets used
uses 1y ago
PNG should be used for some types of graphics, like whenever you have big areas of solid color (like logos) or any time you need translucency / transparency. Although, nowadays you can and should use SVG in most of those cases. JPEG should be used for everything else.
- adgjlsfhk1 1y ago
  if your software supports it, lossless jpeg-xl supports all of these and should give you better compression
chowells 1y ago
They're just for different jobs. JPEG is lossy, in ways that were initially optimized for photographs. The details it loses are often not details photographs are good at providing in the first place. As the upside for losing some data, it gets to pick the data it gets to compress, and it chooses it in such a way as to minimize the size of the compressed data. PNG is a lossless format. It's practically mandatory when you need 100% fidelity, as with icons or other graphics that are intended to have high contrast in small areas. It's able to optimize large areas of the same color very well, but suffers when colors change rapidly. It's especially unsuitable for photographs, as sensor noise (or film grain, if the source was film) create subtle color variations that are very difficult for it to encode efficiently. You basically never have a situation where either one is appropriate. They are for different things, and should be used as such.
sapiogram 1y ago
> (if I recall correctly JPEG as a format can encode an image with a higher fidelity than PNG, at least in some circumstances)~ PNG is a lossless format, so I don't think that's possible, unless there's some specific feature that is not available in PNG.
ghssds 1y ago
JPEG and PNG don't work the same way. JPEG is lossy - it removes information from the original image, and PNG is lossless. For distribution, like on a website, with JPEG you can compress the image much more than PNG without the users noticing IF the image is photographic. If the JPEG represents a drawing, a screenshot, or contains labels, the lossy compression will be noticeable and PNG is much more appropriate. To keep as master for further modifications and compressions, keeping an image in JPEG format is a bad idea, again because JPEG is lossy. You can't ever encode an image with higher fidelity in JPEG vs PNG but both are useful.

Tobani 1y ago

They're different beasts. JPEGS are great for photographs, where lossy compression is acceptable. PNGs can have transparency and lossless compression, so they're great for things like rasterized vector graphics, UI-element parts of a web page, etc.

kevingadd 1y ago
PNGs are also ideal for color accuracy since one of the things you lose quickly when converting to JPEG is the ability to have an exact RGB value flow from input to output, even at a high quality level. So if you want i.e. a banner graphic to seamlessly blend in with your site's background color, JPEG is worse for that.
- martin_a 1y ago
  Sorry, but that sounds more like a problem with your color management systems and workflows and not so much with JPEG itself.
  - kevingadd 1y ago
    JPEGs are intrinsically YCbCr not RGB, so I don't know how you would avoid some precision loss when you combine that colorspace conversion with things like the quality level and (potentially) subsampling.
    - qingcharles 1y ago
      Are they? I thought JPG could switch? I know jpegli uses XYB colorspace in JPGs.
      - gen2brain 1y ago
        JPEG can be YCbCr, RGB or even CMYK (usually from Photoshop or similar software). There can also be unusual subsample ratios for YCbCr, such as 4:2:1. I created some WASM Go bindings for jpegli, and I recall that such images cannot be represented in Go; therefore, for these images, I force RGBA output. Also, XYB is an option; I use the adaptive quantisation option from jpegli (with progressive level 2) to get smaller files. I never bothered with XYB, as it looked complicated.

MrDOS 1y ago

PNGs for line art and text, JPEGs for photorealistic images. > When I came up in the IE era In the IE era I recall, the battle was between GIF and JPEG because IE supported alphatransparent PNGs very poorly :) > if I recall correctly JPEG as a format can encode an image with a higher fidelity than PNG The other way around: JPEGs are “lossy” – they throw away visual information to save file size. PNGs, on the other hand, are “lossless”, and decode back to exactly the same pixels that were fed into the encoder.

no_wizard 1y ago
It’s been so darn long since I looked into these formats I got it backward. Thank you!

roelschroeven 1y ago

It depends on the use case. For archival purposes, where you care about not losing details is more important than image size, PNG is better (though often TIFF is used for that use case). For images with large blocks of solid colors and sharp edges (text, line drawings), PNG is arguable better (though JPEG can be acceptable if you're careful with quality settings). If you need alpha support, go for PNG since JPEG doesn't support that. For photograph-like images, where image size is important, JPEG is preferred over PNG.

addaon 1y ago

> if I recall correctly JPEG as a format can encode an image with a higher fidelity than PNG, at least in some circumstances 24-bit color PNGs are lossless, to the extent that the input image is encodable in 24 bits of RGB (which is pretty much everything that's not HDR). There's no higher fidelity available for normal input images. If file size limits would force palettized PNGs, it's quite possible for a JPEG at the same file size to have higher fidelity (since it makes a different set of trade-offs, keeping color resolution but giving up spatial resolution instead); but this isn't really a common or particularly valid comparison in the PNG era, was more of an issue when comparing to GIFs. tl;dr: Nope, PNG is perfect. JPEG can approach perfect, but never get there. Comparison is only interesting with external (e.g. file size) constraints.

vikingerik 1y ago
There is a lossless JPEG spec and format, though use of it never caught on much: https://en.wikipedia.org/wiki/Lossless_JPEG https://en.wikipedia.org/wiki/Lossless_JPEG
- adgjlsfhk1 1y ago
  hopefully lossless jpeg-xl actually gets used

uses 1y ago

PNG should be used for some types of graphics, like whenever you have big areas of solid color (like logos) or any time you need translucency / transparency. Although, nowadays you can and should use SVG in most of those cases. JPEG should be used for everything else.

adgjlsfhk1 1y ago
if your software supports it, lossless jpeg-xl supports all of these and should give you better compression

chowells 1y ago

They're just for different jobs. JPEG is lossy, in ways that were initially optimized for photographs. The details it loses are often not details photographs are good at providing in the first place. As the upside for losing some data, it gets to pick the data it gets to compress, and it chooses it in such a way as to minimize the size of the compressed data. PNG is a lossless format. It's practically mandatory when you need 100% fidelity, as with icons or other graphics that are intended to have high contrast in small areas. It's able to optimize large areas of the same color very well, but suffers when colors change rapidly. It's especially unsuitable for photographs, as sensor noise (or film grain, if the source was film) create subtle color variations that are very difficult for it to encode efficiently. You basically never have a situation where either one is appropriate. They are for different things, and should be used as such.

sapiogram 1y ago

> (if I recall correctly JPEG as a format can encode an image with a higher fidelity than PNG, at least in some circumstances)~ PNG is a lossless format, so I don't think that's possible, unless there's some specific feature that is not available in PNG.

ghssds 1y ago

JPEG and PNG don't work the same way. JPEG is lossy - it removes information from the original image, and PNG is lossless. For distribution, like on a website, with JPEG you can compress the image much more than PNG without the users noticing IF the image is photographic. If the JPEG represents a drawing, a screenshot, or contains labels, the lossy compression will be noticeable and PNG is much more appropriate. To keep as master for further modifications and compressions, keeping an image in JPEG format is a bad idea, again because JPEG is lossy. You can't ever encode an image with higher fidelity in JPEG vs PNG but both are useful.