这个问题实际上与编码无关，而是为任务选择正确的方法。我不知道它是否违反了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元素，服务器不会受到调整图像大小的请求的轰炸，但是可以节省处理和时间的现有照片吗？
答案 0 :(得分：0)
Image Resizer库听起来是您最好的选择 - 免除上传和管理许多不同图像尺寸的麻烦！
如果您担心图像大小调整的开销（无论如何都很小），您可以随时尝试使用DiskCache插件调整图像大小，然后将其保存到磁盘 - 后续请求相同大小的相同图像将返回这一点。
答案 1 :(得分：0)
在您链接的网站上，当浏览器视口（和网站设计）发生变化时，图片src会随JavaScript更改。
这意味着浏览器需要等待此JavaScript执行才能知道需要加载哪个图像。
使用存储在服务器上的一组预定义图像和带有<img srcset="…">或<picture>的现代标记，浏览器在下载HTML时可以直接获取所需内容，这意味着它可以开始下载最好的甚至在下载和/或执行任何CSS或JavaScript之前的图像。这对性能来说确实好得多，对用户来说也是如此。
此外，由于大多数浏览器现在都支持这些标准，因此即使JavaScript因任何原因被阻止或中断，它也能正常工作。