My screenshots were smaller as PNG-8 than JPEG, and my photos were 3.8x bigger

For my final-year project, I added a compression step before uploading, encoding everything as JPEG at quality 80. Photos came out fine, but screenshots did not. Text became hazy around every character, and the files were larger than expected. So, I switched to 256-colour PNG, which made the images much larger. By measuring four images, I discovered why these discrepancies occurred.

First, screenshots fail the idea that lossy means smaller. A Chinese meeting-notes page with 174 distinct colours was 313,983 bytes as a lossless PNG, 123,658 bytes as JPEG quality 60, and 164,265 bytes at quality 80. As a palette PNG, it was only 116,231 bytes, smaller than both JPEGs and identical pixel for pixel. The palette PNG stores up to 256 colours, then one index per pixel, compressing those indices losslessly.

If the image only has 174 colours, nothing needs approximation. Large white areas and text colours also result in long runs of the same index, making it good for lossless compression. With 87.9% of pixels having the same colour as their right-hand neighbour, the table screenshot was 58,317 bytes as a palette PNG versus 111,650 bytes as JPEG quality 80.

However, JPEG works by splitting images into 8x8 blocks and storing each block as frequency components. Sharp black-on-white edges result in high-frequency components, leaving ripples around the text. JPEG also stores colour at half resolution, causing halos around coloured status badges. WebP at quality 80 performed better, with less noise and slightly soft glyph edges, but it's still lossy.

For photos, the palette runs out quickly. The lake photo has 119,846 distinct colours, making the 256-colour palette PNG 447,369 bytes, while JPEG quality 80 was 117,320 bytes, making it 3.8 times larger. The fruit stall was 2.5 times larger as a palette PNG. Only 7.4% of the lake's pixels matched their right neighbour, so the lossless stage had little repetition to work with.

Size was not the only issue; without dithering, the smooth cloud gradient turned into visible bands, while with dithering, the bands broke up into fine grain that appeared fuzzy up close. JPEG quality 80 did not show these banding issues.

In conclusion, photos with many colours and large smooth gradients band when compressed. Tools like ImgIng (https://imging.ai/) use heuristics to guess image types and apply appropriate compression. My project now counts colours before deciding: 256 or fewer go to palette PNG, everything else to WebP. However, this cutoff threshold is crude, and a better one may be needed.