Html 如何向移动浏览器发送较小的图像（消除大数据请求）

在设计响应性网页时，我们显然希望图像在大屏幕上更大，在小屏幕上更小。似乎有很多方法可以做到这一点，所以我想从性能方面来说，什么是最好的方法。以下是我的想法（但我可能遗漏了一些东西）

• 创建一个精灵表，其中所有图像的最大尺寸都将显示出来，并且为手机尺寸创建单独的精灵表，并使用媒体查询确定应请求哪张精灵表。（我不知道这是否适用于内联图像）

或

• 只需要一个大小的图像，让css根据屏幕大小调整大小。（这似乎是浪费，因为用户下载的图像文件比需要的要大得多，然后必须将其缩小）

---

我确信我的建议中存在其他方法或问题，因此我非常感谢您对如何构建我的图像资产的帮助。

我最近读到的这篇文章让我想起了：

您可以使用诸如phpmobiledetect之类的库来检测用户是否在使用移动设备，然后您可以使用类似的代码

<?php 
if($isMobile){
    echo "<img src='smallImage.png'/>";
}else{
    echo "<img src='bigImage.png'/>";
}
?>

---

这篇文章包含了大量关于这个主题的信息

它们提供的代码与您的第一个建议类似，但它们提供了一个很好的示例，说明了如何在单个代码块而不是整个样式表中发送不同的图像

---

编辑：删除了我最初发布的代码，我没有对浏览器支持做足够的研究。然而，这篇文章还是应该给你一些想法。

Ah，如果我使用phpIf，该设备实际上是不是一个“移动”设备，并没有说明它的视口大小，也没有说明它的设备像素比！你看了一眼！？谢谢你指出这一点，我应该在假设它确实得到支持之前阅读文章的这一部分。他们实际上指出了这个事实。