html5之img图片源设置

到了移动端，html5可以让浏览器选择图片来源。第一可以节省流量。什么更好的用户体验。只能 fuck……

在洪荒时期，不知道src-set，只能来此一招！

.example {
    background-image: -webkit-image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}

但是，有了src-set，世界的变化就多了！

比如：

支持webp（安卓系列，则使用webp图片……

  <picture>

  <!--如果窗体匹配该查询 -->
  <source media="(max-width: 800px)"
          
          srcset="f1-focused-800.jpg 800w,
                  f1-focused-1406.jpg 1406w"
          sizes="(min-width: 530px) calc(100vw – 96px),100vw">
  <!--否则使用这些-->
  <img alt="F1 car in the gravel"
       src="f1-689.jpg"
       srcset="f1-689.jpg 689w,
               f1-1378.jpg 1378w,
               f1-500.jpg 500w,
               f1-1000.jpg 1000w"
       sizes="(min-width: 1066px) 689px,alc(75vw – 137px)">
</picture>

详情可以看：http://www.zhangxinxu.com/wordpress/2015/11/anatomy-of-responsive-images/

sizes语法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes="(max-width: 360px) 340px, 128px" />

上面例子中的sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。

现在，又推出了HTTP Client Hints，详见：https://imququ.com/post/http-client-hints.html

巴拉巴拉有多好，但是，得添加下面一句

<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">

我觉得，还是不如在nginx  根据user-agent 转发相应图片地址。这个最好控制。而且，nginx对于一般的小站也成问题。bat的话，没有进去工作过，可能并不适用。

转载本站文章《html5之img图片源设置》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/html5/2017_0315_7964.html