6

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

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

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

就我在网上的发现而言，下一件大事是<picture>元素。我找到了很多资源，就在我决定去的时候，我来到了这个网站。如果您查看任何图像的来源，您会发现它有一个查询字符串，例如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元素，服务器不会受到调整图像大小的请求的轰炸，而是提供现有照片以节省处理和时间？

4

2 回答 2

0

在您链接到的站点上，src当浏览器视口（和站点设计）更改时，图像会使用 JavaScript 更改。

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

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

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

于 2017-03-24T10:19:22.123 回答
0

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

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

于 2016-01-06T12:57:11.597 回答