在图像大小和图像压缩之间进行选择以供 Web 使用的指南

Posted 2023-02-27

技术标签:

【中文标题】在图像大小和图像压缩之间进行选择以供 Web 使用的指南【英文标题】：Guidelines for choosing between image size and image compression for web use 【发布时间】：2015-01-03 17:17:41 【问题描述】：

这是两难境地：

我正在使用“响应式设计”来制作我的网站。我的想法是，我希望拥有一个在桌面上看起来不错并且可以在移动设备上使用的单一网站。布局是流动的：几乎所有维度都以百分比或 em 表示。结果使我的网站几乎可以在 iPhone 上使用。一些@media 查询使用备用布局、视口设置，我开始做出合理的妥协。（我不想维护一个单独的移动网站。）

在执行此操作时，我发现图像太大而无法使用。例如。宽度为 33% 的图像超过一兆字节。

指导问题 1： 在大多数桌面屏幕上，可接受的图像像素与屏幕像素的比率是多少。

是的，计算机会即时调整大小。但是调整 200 x 300 图像的大小以填充 600 x 900 点会在压缩质量为 100 时看起来很柔和。

指导性问题 2：在典型图像上的压缩程度如何，伪影会变得明显。

指导问题 3： 随着图像视角的增加，质量决策如何变化？最终的使用也需要考虑。跨越大部分页面的图像占据了更大的视角，并且会被更专注地观看。

现在这些是相互关联的。高度压缩的大图像将具有较小的伪影，并且在对图像进行下采样时会变得不那么明显。

所以我正在处理 3 个变量：图像使用、像素大小和压缩。

到目前为止：我的想法：

图像中的像素数超过网页上的最大预期使用量没有什么意义。例如。如果我为一个 1200 像素宽的浏览器窗口、一个 900 像素宽的内容窗口以及 800 像素的最大使用图像尺寸编写代码，那么以超过 800 像素的宽度存储该图像是愚蠢的。我怀疑我可以比这少得多。

75% 的压缩质量很常见，并且是一个很好的起点，但我敢打赌，我可以将其提高一些，几乎没有可察觉的差异。

占据屏幕主要部分的图像质量应该稍高一些。

此时我的办法是编写一个脚本来调整大小，并以各种比例重新压缩，看看有什么区别，但这是一个漫长的过程。在我开始之前，我希望其他人已经这样做并公开了他们的建议。这样我就有了一个起点。