Javascript 如何为移动体验制作响应迅速的图像

更新

---

我有全屏背景图像。这给移动浏览带来了问题，因为图像大且分辨率高

下一个问题是像视网膜显示器这样的东西，设计/程序员如何准备处理这个问题？我看到很多关于如何在图像之间切换的文章。但是我对像素密度和分辨率的关系感到非常困惑。何时何地需要，以及如何和为什么瞄准他们

例如：

*全屏背景图像，分辨率为1900x1080，分辨率为72dpi。为了实现最佳优化，每个分辨率/像素密度应该有多少图像？此外，在这种情况下，哪个库/插件/符号最适合解决这种情况

最后，如果我使用媒体查询来定位和切换背景图像，它会下载所有图像吗？还是在满足要求的时候

@media (min-device-width : 768px) 
and (max-device-width : 1024px) {
background-image:url('paper1024.png');
}

@media only screen 
and (min-width : 1824px) {
background-image:url('paper1900.png');
 } 

谢谢stack

---

//老问题并没有为了评论而删除它//

所以我正在制作一个全屏图像的响应性网站。我遇到的问题是，原始图像对于手机下载来说太大了

作为一个新的响应性设计，我不知道这是一个问题，并在我自己的协议折扣它。我读了几篇文章

最佳状态：

我的问题是：我不相信标签是对公众开放的？我找不到关于这个的更多信息

有人知道这是允许的吗？此外，关于如何正确使用它的更多信息/文档

---

如果

图片

不适用。是否有任何“标准”人员可以在不增加移动带宽的情况下使图像响应？这是我在上一个项目中重新设置图像的方式：

首先使用背景图像在普通css中设置桌面图像：

#bg {
  background: image-url('wallpaper_desktop.jpg') center top;
  background-size: 1024px 768px;
}

然后，我处理移动电话，例如iphone：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
  #bg {
    background: image-url('wallpaper_mobile.jpg') center top;
    background-size: 320px 480px;
  }
}

然后是视网膜图像处理。使用大小加倍的图像（请参见文件名中的“@2x”）：

由于iPad和MacBook还有视网膜显示器，我们应该考虑为它们提供比HRES手机更大和更高的版本：

@media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
  background: image-url('wallpaper_desktop@2x.jpg') center top;
  background-size: 1024px 768px;
}

所以，通常每个图像使用4个版本。2个桌面版本（一个用于视网膜显示器的尺寸加倍）和2个移动版本（另一个用于视网膜显示器的尺寸加倍）

---

顺便说一句：当使用媒体查询获取更多图像时，没有其他请求。

这可能会有所帮助是的，我看到了，我愿意使用它，但似乎有HTML5标签。因此，我觉得如果使用HiRes，可持续性可能会受到影响。js这是我最近参加的几乎每一次web开发研讨会上都会听到的话题，可能有一半的博客文章都会讨论这个话题。也许是一个更简单的解决方案（不是最佳优化的）正在使用不同大小的文件，但在检测移动设备时如何在它们之间切换？非常感谢！我很好奇你会怎么处理全屏标签？这需要javascript/jQuery吗？或者你也有一个巧妙的方法吗？

@media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
  background: image-url('wallpaper_desktop@2x.jpg') center top;
  background-size: 1024px 768px;
}