为何网页窄窗口截图的HEIC/PNG文件体积反而更大？

现象回顾 #

全屏浏览器窗口截图：PNG 2.1 MB（6016×3336）、HEIC 796 KB（6016×3336）；
窄窗口截图：PNG 2.4 MB（1532×3408）、HEIC 1.1 MB（1532×3408）。
尺寸更小的截图，无论PNG还是HEIC格式，体积反而更大。

具体原因 #

• PNG格式角度：
  PNG是无损压缩，核心靠识别图像里的重复像素块来缩小体积。全屏状态下网页内容平铺展示，像GitHub页面的侧边栏、重复的评论区背景、统一的文字排版区域，都是大面积重复像素，能被高效压缩；但窄窗口会让网页内容重新换行排版，原本的重复区块被打散，出现更多零散的像素变化，重复像素占比大幅降低，无损压缩的空间自然变小，最终文件体积反而更大。

• HEIC格式角度：
  HEIC是基于H.265的有损压缩，压缩效率不只看像素总数，更取决于图像内容的复杂度。窄窗口下网页元素换行后，文字、按钮、区块的排列更密集，边缘细节和颜色过渡的变化更多，图像整体复杂度飙升；HEIC要保留这些细节，就得分配更多编码数据。另外，全屏截图里有大量低纹理的纯色区域（比如页面空白、侧边栏），HEIC能用极低码率压缩，而窄窗口里这类区域占比减少，高复杂度区域占比提升，最终体积超过全屏截图。

内容的提问来源于stack exchange，提问作者Nice Zombies