Search code examples
pngscreenshot

Bigger file for narrower screenshot of web page?


I was trying to archive a web page, and made a screenshot of it which I then saved as heic, but I ran into this weird phenomenon: When I tried a narrower window the image became bigger, and apparently the original png too?

This is my screenshot for a full-sized browser window: PNG 2,1 MB 6016×3336 HEIC 796 KB 6016×3336.
This is my screenshot for a narrower browser window PNG 2,4 MB 1532×3408 HEIC 1,1 MB 1532×3408.

How does this make sense? I would love to know.

Web page from the screenshot


Solution

  • PNG encoders filter your image on a line-by-line before compressing them. They can look at a line of pixels and determine if each pixel is heavily based on the line above, or the previous pixel to the left or some more complicated combination of these. They then choose the optimal filter for the line and store it in the output file for the decoder.

    As a result, repetitive lines which are largely identical to the line above, or unchanging across the width of the image, are compressed extremely well.

    That's what you have in your wider image - there are vast areas of pure white on left and right and they compress very well so although the pixel dimensions are larger, the compression is more effective.