媒体查询/根据屏幕大小加载不同的图像答案

【问题标题】：media queries / loading different image depending on screen size媒体查询/根据屏幕大小加载不同的图像
【发布时间】：2014-02-21 21:31:32
【问题描述】：

这可能是基本的，但我迷失在我设法在网络上找到的所有解决方案中。我有一个基于 Twitter Bootstrap 3 的正在运行的网站 (www.webstalab.com)，但使用的图像（描绘两个拿着球的雕像）尺寸很大（大约 900kb），因此在较慢的互联网连接上加载时间过长。目前的照片是 1920 像素宽，是响应式的，它不是背景图像。（我无法使用背景图片方法实现所需的布局）。

我要做的就是为同一张照片创建 3 个不同尺寸的版本（一个大约 800 像素宽，一个大约 1200 像素宽，并保持原件宽 1920 像素）并让浏览器根据内容加载适当版本的图像屏幕尺寸和分辨率用于查看网站。我还计划将原始照片（1920 像素宽）的尺寸缩小一点，使其加载速度更快。

我想 CSS3 媒体查询是解决这个问题的方法吗？媒体查询也会解决视网膜显示问题吗？谁能推荐一篇涵盖基础知识的好文章？我更喜欢没有 javascript 的解决方案（以防用户将其关闭）。该网站已上线，您可以查看源代码。

谢谢大家！

【问题讨论】：

标签： html css twitter-bootstrap media-queries

【解决方案1】：

如果您使用img 标签来显示图像，那么是的，您将需要一个 JS 解决方案。

因此，如果您想使用媒体查询，则需要使用图像作为背景，例如 div 标签：

Example with background-image on a div

该示例没有处理视网膜显示，但这里有一篇关于处理的文章： Retina Display Media Queries

【讨论】：

忘了提 - 如果你使用媒体查询，首先设置最小的图像很重要，如果你不这样做，它仍然会在较小的设备上加载大图像。
感谢Rolchau，这帮助很大，可能只是为了学习/练习而研究一些JS解决方案。想为您的答案投票，但没有足够的声誉...
只需使用 jQuery 检测视口宽度，一堆 if else 循环应该可以帮助您替换源代码。

【解决方案2】：

只要 cookie 与所有图像请求一起发送，您就可以使用 .htaccess 文件中的重写规则重定向到低分辨率图像，具体取决于在页面加载开始时使用 JavaScript 设置的 cookie 的值。
index.html:

<head>
(...)
        <script type="text/javascript">           
            document.cookie = "res=" + (screen.width <= 700 ? "low" : "high");
        </script>
<!--styles-->
(...)
<head>

.htaccess 在 /images 文件夹中：

RewriteEngine on
#if cookie res=low exist, redirect to low/ folder
RewriteCond %{HTTP_COOKIE} res=low
RewriteRule ^(.+)$ low/$1

#if low/ image does not exist, use default (hi res)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^low/(.+)$ $1 [END]

我不知道可能会影响性能。现在就试试吧。

【讨论】：

【解决方案3】：

请注意，这对加载速度没有帮助，请参阅 cmets。

Bootstrap 3 具有一些响应式实用程序，可让您通过媒体查询显示/隐藏元素。

http://getbootstrap.com/css/#responsive-utilities

例如为元素指定 visible-xs 类，它只会在 XS 尺寸的设备上显示。

我只是在我的视图中实现了这一点，而不是在 CSS 中，因为我想使用直接的 img 而不是“带背景图像的 div”

<div class="navbar-header">
    <a href="/home" class="navbar-left" >
        <img class="logo visible-sm visible-md visible-lg"
             src="/images/logos/logo-trans-96-wht-250x70.png"
             width="250" height="70"
             alt="Home"/>
        <img class="logo visible-xs"
             src="/images/logos/logo-trans-96-wht-200x56.png"
             width="200" height="56"
             alt="Home"/>
        </a>
</div>

从 CSS 的角度来看，它感觉不是很优雅，但这是您无法通过 CSS 控制某些东西的少数情况之一。

它为您提供了一种潜在的强大而简单的技术，用于响应式交换整个 HTML 结构。

【讨论】：

请注意，您的解决方案会加载所有图像并显示相应的图像。问题是如何只加载合适的。
@AndreiGheorghiu 这是一个很好的观点，这将是一个糟糕的加载速度解决方案，因为它会加载所有变体而不仅仅是大的！可以将 display:none 添加到机制并利用此处提到的浏览器优化：stackoverflow.com/a/12158668/209288
您链接的答案相同。 src="data:{data-image-here}" 远非优化（图像数据放置在标签本身中），不同之处在于它是标记的一部分，而不是放置在单独的文件中。 src="about:blank" 确实不会加载任何内容 - 但您需要自己的 JavaScript 在应该加载图像时将 about:blank 替换为正确的 URL - 否则它仍然是一个死标签，不显示任何内容。我们在谈论哪些浏览器优化？
重点是：CSS 无法根据媒体查询加载源，这是设计使然（因为媒体查询可以快速更改 - 即：设备的简单旋转）。目前，唯一的方法是使用srcset 属性。