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

Question

这个问题实际上不是关于编码的，而是选择正确的任务方法。我不知道这是否违反了SO的规定，但是在这里给您回答。

我曾经为一家当地报纸建立了一个小型CMS，使他们能够添加带有照片的文章。至于照片，他们过去只上传一张照片，而我则保存了各种版本的照片，以便根据他们可能选择的不同模板进行服务（模板而不是屏幕尺寸！）

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

就我在网上发现的而言，下一个大事件是“”元素。我找到了许多资源，就在我决定使用它时，我遇到了这个网站。如果您查看任何图像的源代码，您将意识到它具有查询字符串，例如“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”元素使服务器不会被请求调整图像而遭受攻击，而是提供现有的照片，从而节省处理和时间？

- Subliminal Hash

---

图片目前还不是所有浏览器都支持的，http://caniuse.com/#search=picture 但如果您的情境可以使用它并满足您的需求，则显然是最好的选择。此外，请注意像图像调整大小器这样的服务器可以缓存内容，以避免重复计算大量图像的情况。 - Simon Mourier

Answer 1

在你链接的网站上，当浏览器视口（和网站设计）发生变化时，图像src会通过JavaScript更改。

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

使用一组预定义的存储在服务器上的图像和现代标记与<img srcset="…">或<picture>，浏览器在下载HTML时直接获取所需的所有内容，这意味着它甚至可以在下载任何CSS或JavaScript之前开始下载最佳图像，这对性能和用户来说真的更好。

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

- Nicolas Hoizey

Answer 2

图像大小调整库听起来是您最好的选择 - 保存您上传和管理许多不同图像尺寸的麻烦！

如果您担心图像调整的开销（其实很小），您可以尝试使用其DiskCache插件，该插件会将图像调整一次，然后将其保存到磁盘上 - 对于相同大小的相同图像的后续请求将返回该图像。

- Andrew Stephens