响应式设计 - 媒体查询 - 如何不加载某些图像

Question

好吧,所以我设计了一个响应式布局,不使用媒体查询和显示非常小屏幕尺寸的图像display: none;.

到现在为止还挺好.但是这些图像仍然会在这些设备上下载,从而导致带宽增加.

使这些图像不能在指定设备上下载的正确方法是什么？

任何回应将不胜感激!

Answer 1

目前唯一可用的解决方案是用<noscript>标签包装图像，然后使用 javascript 将图像拉出。Cookie 不适用于首页加载 (HTMLPreloadScanner)，也不适用于 CDN。如果您的图像并不总是 100% 占视口，则浏览器嗅探是没有用的。

Slimmage.js 在 3KB 的 vanilla JS 中实现了上下文友好的响应式图像。

标记也非常简单：

<noscript data-slimmage>
  <img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

当然，您可以创建一个服务器端助手来抽象化它。