如何为移动体验制作响应式图像

How to make Responsive Images for mobile experiences

本文关键字：响应 图像 体验 移动      更新时间：2023-09-26

>UPDATE

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

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

例：

*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');
 }

谢谢堆栈

//

旧问题不想出于评论目的将其删除//

所以我正在制作一个带有全屏图像的响应式网站。 我一直遇到的问题是原始图像对于移动设备下载来说太大了。

作为响应式设计的新手，我不知道这是一个问题，并自行讨论它。 我读了几篇文章

最好的是：
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/

我的问题是：我不相信<picture>标签向公众开放？ 我找不到更多关于此的信息。

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

如果picture不适用。 是否有任何"标准"的说法可以使图像响应而不膨胀移动带宽？

这是我在上一个项目中做视网膜的方式：

首先使用背景图像在普通 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"）：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #bg {
    background: image-url('wallpaper_mobile@2x.jpg') center top;
    background-size: 320px 480px; // Original size
  }
}

由于还有带有Retina显示屏的iPad和MacBook，因此与高分辨率手机相比，我们应该考虑为它们提供更大和高分辨率的版本：

@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 个移动版本（还有一个用于视网膜显示器的双倍尺寸）

顺便说一句：对其他图像使用媒体查询时，没有其他请求。

相关文章：