什么是无法在移动设备上加载图像的有效，高效且现代的方式？

Question

我已经遇到过这么多次，总是用CSS和JS的组合来解决它，但随着对响应图像的支持越来越多，我一直在寻找更有说服力的解决方案。我只是试图而不是加载移动图像，同时保留语义（所以没有CSS background-image），利用浏览器预加载（所以没有JS懒惰加载）。

我该如何做到这一点？

Answer 1

TL;博士

使用srcset属性与具有about:blank一个URL和1w宽度描述符，并设置sizes属性的后备<source-size-value>到0vw图像候选串。然后，添加CSS规则以隐藏较小视口的图像。最后，将其包装在<picture>与<source> s绝对控制。

---

srcset

在我看来，这可以通过响应的图像和CSS位来解决。

考虑以下响应图像：

尽管学生没有回退<source-size-value>在sizes，foo-375.png仍然加载。所以看起来我们需要找到一个不会发送任何附加HTTP请求的图像候选字符串。

我搜索了SO如何基本上设置一个空图像候选字符串的提示。我发现了几个方法，所有这些都可以像这样实现：

<img 
    src="foo-585.png" 
    alt="foo" 
    srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
    sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw" 
> 

请注意，新的图像候选字符串的1w宽度描述符和回退的0vw<source-size-value>加入。在这个例子中，是[URL]对于下面描述的URL之一的占位符：

空片段

One answer建议使用空片段（#），为valid选项。不幸的是，我的测试表明这种方法重复发送HTTP请求到当前的URL。不好。

微小的数据URL

Another answer建议Base64编码的数据URL使用The Tiniest GIF Ever：

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= 

起初，我以为，在对自己58个字节，很少有机会对gzip压缩的，它认为将GIF保存为具有较短URL的外部资源可能比多个数据URL更有效，但我错了; gzip在早餐时吃这个数据URL的多个实例。

但是，如one comment指出的那样，数据URL是slow on mobile。

没有计划，没有主机，端口0

Yet another answer建议使用一个网址，没有计划，没有主机和端口0（//:0）。这似乎工作，但有关于防火墙警告concerns。 CSS也需要隐藏破碎的图像样式。

about:blank

那评论者使用about:blank，这实际上似乎工作不够好，但像最后的方法，确实需要CSS来隐藏破碎的形象造型建议：

img { 
    display: none; 
} 

@media (min-width: 768px) { 
    img { 
     display: inline-block; 
    } 
} 

对我来说，这似乎是最好的选择，因为它是有效的，高效的，并且不会显示任何面向用户的警告。那几行CSS似乎对我很有价值。

<picture>

正如评论所指出的那样，srcset不能保证。如果浏览器出于某种原因决定对您的about:blank图像候选人，那么解决方案就会崩溃。为了解决这个问题，您的包裹在<img><picture>元素，并添加相关<source> S：用一个`srcset`

<picture> 
    <source 
     media="(min-width: 768px)" 
     srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
    > 
    <source srcset="about:blank"> 
    <img 
     src="foo-585.png" 
     alt="foo" 
     srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
     sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw" 
    > 
</picture>