首页 > webfront > SGML > html5 > > 正文

html5之img图片源设置

发布人:zhoulujun@live.cn    点击:

到了移动端,html5可以让浏览器选择图片来源。第一可以节省流量。什么更好的用户体验。只能 fuck…… 在洪荒时期,不知道src-set,只能来此一招!

到了移动端,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的话,没有进去工作过,可能并不适用。