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

Question

这个问题实际上不是关于编码，而是为任务选择正确的方法。我不知道这是否违反了 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 元素，服务器不会受到调整图像大小的请求的轰炸，而是提供现有照片以节省处理和时间？

Answer 1

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

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

Answer 2

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

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

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

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