• home > webfront > SGML > html5 >

    html5之img图片源设置

    Author:[email protected] Date:

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




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