响应式图像：调整大小或动态裁剪？

Posted 2021-05-02

这个问题实际上与编码无关，而是为任务选择正确的方法。我不知道它是否违反了SO的规则但是你去了..

我曾为当地报纸建立了一个小型CMS，为他们提供了添加帖子和照片的功能。关于照片，他们过去上传了一张照片，我根据他们可能选择的不同模板保存了该照片的各种版本（模板而不是屏幕尺寸！）

现在，我被要求更新这个旧系统，我面临着响应/适应性的困境。

就我在网上的调查结果而言，下一个重要的是<picture>元素。我找到了很多资源，就在我决定去的时候，我来到了this网站。如果你看看任何图像的来源，你会发现它有一个查询字符串，如width=940&height=320&mode=crop&scale=both&meta=panoramic当我调整窗口大小时，它变成像width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter我相信这个网站使用Image Resizer，根据屏幕尺寸，一张照片正在由服务器在运行中处理以输出新图像。

我不明白的是，这些方法中哪一个实际上更好，因为picture元素仍然需要将多个图像上传到服务器，而imageresizer只需要一个并且它裁剪调整适合屏幕大小的图像。但另一方面，使用picture元素，服务器不会受到调整图像大小的请求的轰炸，但是可以节省处理和时间的现有照片吗？

答案

Image Resizer库听起来是您最好的选择 - 免除上传和管理许多不同图像尺寸的麻烦！

如果您担心图像大小调整的开销（无论如何都很小），您可以随时尝试使用DiskCache插件调整图像大小，然后将其保存到磁盘 - 后续请求相同大小的相同图像将返回该图像。

另一答案

在您链接到的网站上，当浏览器视口（和网站设计）发生变化时，图像src会被javascript更改。

这意味着浏览器需要等待此JavaScript执行才能知道需要加载哪个图像。

使用存储在服务器上的一组预定义图像和使用<img srcset="…">或<picture>的现代标记，浏览器在下载html时可以直接获得所需的一切，这意味着它可以在下载任何CSS或JavaScript之前开始下载最佳图像和/或执行。这对性能来说确实好得多，对用户来说也是如此。

此外，由于大多数浏览器现在都支持这些标准，因此即使JavaScript因任何原因被阻止或中断，它也能正常工作。