Antenna

When to use PNG?

PNG excels at sharp edges, solid colour and smooth gradient fades. At a similar file size, JPG struggles on the sharp edges, blurring them especially against vivid reds and blues. To get close to the quality of the PNG image below you need a JPG double the file size - and even then the dark gradient has some banding visible:

PNG8 5.3K sharp text edges, silky smooth gradient.

JPEG 5.6K blurred text edges, compression artifacts/halos around objects and some banding in the gradients.

JPEG 11.1K text edges almost as sharp as PNG8 and much better gradients than JPEG 5.6K, but still some banding/compression artifacts in the dark gradient.

PNG24 3.8K a perfect lossless render coupled with the smallest file size. PNG24 seems like the best choice for this image.

PNG8 5.6K sharp text edges, but this image contains more colour shades than PNG8 supports, leading to bands in the gradient where the colour has been approximated.

JPEG 4.8K blurred text edges, compression artifacts/halos around objects, square blocks visible in the purple part of the gradient.

JPEG 9.7K text edges sharper, but still some compression artifacts around objects.

PNG24 30.1K perfection at a price - over 30K!

PNG8 26K at a glance, not bad, but a closer look reveals posterization where PNG8 has run out of colour shades. The image is sharp, but subtle colour changes have been lost.

JPEG 13K half the file size of PNG8, here JPEG shows what is it best at - photographic material. A little softness and some artifacts/halos around the flower edges.

JPEG 22K still a smaller file size than PNG8 but easily outclassing it on photos.

PNG24 74K as good as the original photograph, but the large PNG24 file size makes JPEG a better choice for the web here.