An exhaustive guide to image optimisation, compression, formats, and quality on the web.
Quality can be boiled down into the following traits: sharpness, colour accuracy, and rendering artefacts/pixelation. But the quality needed is determined on the context. If the image is the main focal point, quality should be kept high; if it's a background or secondary feature, dial up the optimisations. If the image needs to by particularly dynamic (animation, scalable, etc.) then vector > raster.
The human eye/brain perceives variation in luminance and contrast far more than colour variation. Different browsers use different image rendering engines. CSS pixel values are physically larger/smaller depending on screen resolution and size. For example, the same "size" image (1000px wide) on a Retina display will actually use 2000 pixels in width, meaning every single "px" is equal to four screen pixels. That means your image will be scaled-up, potentially changing quality. The article contains an excellent explanation of how browsers upscale images.
That's why SVG is so powerful. It scales perfectly because it's just math. The absolute values of each pixel are drawn for the render context, not the other way around. But that increased data means SVG gets large. More complex images are huge. Compressors like svgo are massively useful for counteracting that. Article contains a list of raster compressors and automation tools as well.
In general, PNG files are larger than JPEGs, but JPEGs can't do transparency. PNGs often have fewer artefacts so render text more crisply. WebP is as sharp as PNG, but smaller than both previous file types, and can be compressed much further than JPEG without obvious loss of quality. It's still not fully supported, though, and can't be saved to desktop (though that could also be a security benefit). Weirdly, single-frame AVI video files are often the best for quality/compression if you can ignore tenuous browser support.
GIFs are terrible, APNG is much better and animated WebP has some advantages, but again video > animated image in all cases. Both MP4 and WebM are more efficient.
