Web 图像：完美（自动）调整大小和转换

发布日期： 2024-11-18 阅读量： 作者： ADMIN

web 图像：完美（自动）调整大小和转换

几乎每个前端开发人员都知道，我们需要在不影响质量的情况下向用户提供尽可能小的图像。我们都知道如何实现这一目标。但这是一件没人喜欢做的苦差事。同样从商业角度来看，这需要时间，而时间就是金钱。所以，“足够好”就够了。

让我分享一下我们如何改进和自动化完美图像交付，而不会给开发人员带来更多工作。

通常是如何完成的

也许不是你，但有很多人——可能是我们大多数人。

您以 2 倍预期尺寸导出 png 图片，以满足高密度屏幕的需求，并将其用于 Web 图像：完美（自动）调整大小和转换标签。如果您愿意多花 30 秒（或更长时间），您可以做得更好：将其转换为 webp 并将两个版本放入元素中，让浏览器选择最好的一个（好吧，不是最好的，只是最新支持且浏览器最喜欢的格式）。

这就是“足够好”，而且通常确实如此。

但这并不完美。新的 ipad 很大，可以使用 2.5 倍甚至 3 倍的图像。另一方面，标准的企业 lenovo thinkpad 不需要额外的细节，1× 图像就完美了。

老实说，这一切对于手工工作来说都很好。没有人可以在一张照片上花费 15 分钟。

自动化至完美

对于我的完美主义大脑来说，“足够好”并不是这句话所说的那样。此外，我们的一些客户处于竞争激烈的领域，因此我们开始研究选择。没过多久。我们已经知道浏览器会发送 http 标头来指示它们支持的图像格式。

我们需要的是找出元素可以加载图像基于给定屏幕的像素密度。这是服务器端渲染很难做到的事情，并且由于多种原因，通过 javascript 调整 src 是不可能的。

有了这个，我们就拥有了所需的一切：

服务器可以提供的格式。
前端开发者请求的图片尺寸。
显示屏的像素密度。

过程

以下是我们如何自动化图像优化过程：

接受任何图片上传

我们让开发者和管理员上传并保存他们想要的任何图片（当然开发者需要更加小心）。我们的系统可以处理任何事情 - 甚至是直接来自 dslr 相机的 250 mb jpeg，我们成功地对其进行了转换和调整大小，然后当我们看到日志时放声大笑。
自动转换和压缩

上传图片后，我们的系统会自动：

将其转换为多种格式：png、webp 和 avif。
使用 90% 质量 设置压缩每个版本。

为什么是90%？因为最后 10% 的质量往往会导致收益大幅递减。您可以节省大量存储空间和带宽，而且视觉质量没有任何明显差异。

生成多个分辨率

对于每个图像，我们根据像素密度乘数生成多个尺寸：

1×
1.5×
2×
3×

这可确保具有高分辨率屏幕的设备获得清晰的图像，而其他设备则接收适当大小的图像。

为了面向未来，我们只需添加或更改数字，一切都会自动处理（我们还没有制作 vr / ar 内容，但我怀疑这就是它会派上用场的技术）。

动态图像服务

在我们的 html 模板中，我们指定所需的图像尺寸（宽度或高度）。然后我们的服务器端代码：

检查优化图像是否存在。
如果没有，请将它们排队等待处理。
使用像素密度的 srcset 生成适当的元素。

浏览器会根据设备的功能自动选择最佳图像。

结果如下所示：

<picture>
  <source srcset="/upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /upload/2024/03/11/tn-w600-frantisek.webp 3x">
  @@##@@
</picture>

上一篇: MySQL中PERIOD_DIFF函数怎么用

下一篇: 微信小程序Demo导入详解

Web 图像：完美（自动）调整大小和转换

随便看看