I see the use of a png picture file here and there on web src files, and I am wondering 3 things:
Is the png file compressed? Is it preferable to use because it is a transparent file? Does a browser prefer a lossy file, one which loses detail when copied? This is just a point I wanted more info on, please.
Png is lossless, it only uses colors that are used within the image, similar to gif.
As a general rule:
graphics = png
photos = jpg
You’ll get much better quality at a smaller file size using a lossy jpg, but better quality and file size out of a graphic using a png.
1 Like
googled and found:
https://www.howtogeek.com/howto/30941/whats-the-difference-between-jpg-png-and-gif/
HTH, too.
Yes, but it uses lossless compression, so there is no degradation of the image quality.
If you need transparency it is certainly better than jpeg, as jpeg does not support transparency.
I don’t think browsers care, but users may care about load times. The smaller the file size, the faster the loading. The key though is efficient compression, that is getting the best quality from the smallest file size.
The most efficient method will depend on the image type.
As @mawburn summarised, a jpeg with its lossy compression is much more efficient with very detailed images such as photographs, at the expense of some loss of quality.
PNG’s lossless compression is very inefficient with photos, creating quite large files, only the quality will still be perfect.
But in more graphical images, with lots of areas of flat colour, such as logos, graphics and cell shaded cartoons, PNG can be very efficient, resulting in quite small files in perfect quality.
Though while PNG was always an excellent format for this type of image, these days I prefer to use SVG for graphical things like logos and icons.
3 Likes
Honestly, if you have a color bar with 16 colors in it, use a gif.
If you have a photo, use jpg, 75% compression does well across all platforms.
If you need transparency, use png, unless it’s a small file, in that case use gif.
Easier not to over think this. I see 1mb png’s that look the same as a 100kb jpeg.
1 Like
Slightly OT, but important:
The aim with a web page is too keep the image files as small as possible, while maintaining quality. (Large files take a long time to load over a slow connection, and some visitors may have data limits or incur charges according to bandwidth usage. It’s not good practice to make users download larger files than are necessary.)
Resize images to the size at which they’ll display before you upload them. The image on your home page shows this:
Size: 439.43 kB (449,981 bytes)
Dimensions: 2,248px × 1,960px (scaled to 220px × 220px)
You can reduce that image to 220px square and the file size will come down from 439kB to under 20kB. You should also crop the image to the required aspect ratio (square) first, to avoid distortion.
4 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.