It’s all about the compression, compression, compression.
Typically, more artifacts show up in lower-resolution images. There are two types of compression, a lossly and a lossless one. Lossless compression doesn’t cause artifacts, so we can ignore it for now. Lossly compression artifacts get progressively worse at higher compression ratios.
What are artifacts? Artifacts are distortions created during compression. Think of pixelation or small square boxes, which you can see in a smaller image file.
Distortion to an image during compression happens in three ways:
- General loss of sharpness – Small dots or halos can be seen around the edges. This distortion is easiest to spot in hand drawings and images or text rather than in photographs. Since line art is all sharp edges, JPEG compression is particularly damaging.
- Blocking stricture – This is where you really start to see pixelation in the form of blocks in your image. During compression, the image is processed separately for every 8×8 block, and block edges become visible at high compression ratios.
- Loss of color detail – Colors will look muddy or have areas of “dirt” although this is less evident in photographs than in hand drawings or text images.
As with any loss, you can’t recover it once it’s been compressed. While sharpening may help to recover lost edge contrast, it also makes “halos” more evident. Denoising the image may help to remove “halos”, but reduces sharpness. I recommend keeping the original high-resolution, high-quality images around, and don’t overwrite them.
Other tips to maximize image quality for the web:
- Keep the compression ratio as low as possible with high-quality settings
- Consider using a lower resolution instead of a higher compression ratio with the same bounds on the file size
Unfortunately, if you upload to a third-party service, like a social media platform, and can’t control the compression parameters, then there isn’t much you can do about it.