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

Question

在设计响应式网页时，我们显然希望图像在较大的屏幕上较大而在较小的屏幕上较小。似乎有很多方法可以实现这一点，所以我想知道，从性能方式来看，什么是最好的方法。这就是我的想法（但我可能会遗漏一些东西）

• 创建一个spritesheet，其中包含将显示的最大尺寸的所有图像，以及用于移动尺寸的单独精灵表，并使用媒体查询来确定应该请求哪个工作表。 （我不知道这是否适用于内嵌图像）

或

• 只有一个尺寸的图片，让css根据屏幕尺寸调整大小。 （这看起来很浪费，因为用户会下载比需要的更大的图像文件，然后必须缩小它们）

我确信我提出的建议还有其他方法或问题，所以我很感激如何构建我的图片资产。

Answer 1

我最近阅读的这篇文章浮现在脑海：HTML5 picture

Answer 2

您可以使用phpmobiledetect等库来检测用户是否在使用移动设备，然后您可以使用这样的代码

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

Answer 3

本文包含有关此主题的大量信息。 One Solution To Responsive Images

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

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