上海夜景中的渐变天空、细小窗格和灯带边缘,对压缩的反应不同。网页导出不能只追求最小文件,应先确定显示尺寸,再用同一张图比较编码质量和实际体积。本篇附带的测试使用原创合成图,不代表所有照片的压缩结果。
先确定图会显示多大
正文图和封面卡片的显示宽度不同,可以各自导出合适尺寸。高像素屏幕可能需要高于CSS显示宽度的图片,但没有必要把相机原始大图直接放到每个列表卡片。保留一份高质量母版,网页版本随版式调整。

同一编码器才方便比较
先固定尺寸、色彩空间和编码器,再改变质量设置;随后固定质量比较不同尺寸。不同软件的“80”不一定产生相同效果,因此记录工具及版本比只记一个数字更有用。JPEG与WebP也不应凭质量数字直接比较。
下载实际文件看三个区域
配套测试表列出本次脚本真正导出的文件、像素和字节数。打开文件检查天空是否出现色带、窗格是否糊成块、灯边是否产生振铃。请以自己的网站展示尺寸再看一次,不只在编辑器100%缩放时判断。
选出满足需要的较小版本
只要关键细节与色彩过渡仍清楚,就可以选择体积较小的版本。导出后核对方向、颜色和元数据策略;上传系统若会二次压缩,还应检查最终下载文件。本文实验结果附在下方,数据由实际文件计算,没有编造压缩比例。
本地导出实验结果
固定同一原创合成母版,使用 Pillow 编码;以下数字读取实际文件。质量参数仅在相同编码器设置内比较。
| 文件 | 像素 | 字节数 |
|---|---|---|
| city-1440-q90.jpg | 1440×960 | 352667 |
| city-1440-q75.jpg | 1440×960 | 183774 |
| city-960-q85.jpg | 960×640 | 124406 |
| city-960-q80.webp | 960×640 | 49942 |
| city-720-q80.webp | 720×480 | 32874 |
资料来源
资料整理日期:2026年10月8日。图为原创示意,具体事实与编辑分析分别表达。



