更加智能好用的倍图展开方式

背景

昨天忽然i想起来前两年尝试过的img-srcset这个属性,当时赶着完成课程设计,在firebox发现有效果,在chrome上半点用都没,可是这玩意的兼容性以下:php

imgset兼容性
imgset兼容性

其实兼容性我以为挺好的,因此我仍是要再尝试尝试!chrome

介绍

srcsert具备两个版本:浏览器

  1. 旧版缓存

    ![](mm@1x.jpg)复制代码
  2. 新版spa

    <img src="./img/x-pc.png"
         srcset="./img/x-pc.png 300w, ./img/x-pc@2x.png 500w"
         sizes="(min-width: 300px) 400px, calc(100vw - 2rem)">复制代码

emm.....旧版不想说了,反正很差用也已经被淘汰了,新版的,其实很简单:设计

  1. srcset这个属性定义图片而后告诉浏览器你图片的宽度
  2. sizes这个属性定义在不一样状况下,对于图片宽度的定义,单位除了不能使用%(很费解,不过能够用vw代替),calc()也能够

看一看

  • 宽度250px状况下

250px
250px

  • 宽度300px状况下

300px
300px

懒得录gif,当你宽度慢慢增大一个临界点时浏览器会去加载二倍图而且替换,sizes规定了图片的大小,好比第一个例子上图片大小恒定500px,注意sizes的合理设置,不然会产生图片大小的跳动,获得两个结论:3d

  1. 优先适配高质量图片原则
  2. 存在缓存时优先加载缓存图片

进阶

咱们来探究一下w这个单位,先从sizes这个属性提及。
sizes至关于动态定义图片的widthheight,而后咱们把上面的例子作一些修改:code

<img src="./img/x-pc.png"
        srcset="./img/x-pc.png 150w, ./img/x-pc@2x.png 250w"
        sizes="(min-width: 200px) 400px, calc(100vw - 20px)">复制代码

150px
150px

171px
171px

图1: 2 (150px - 20px)
图2: 2
(171px - 20px)
我我的的理解是:w只是告诉浏览器,我认为这张图是什么大小,浏览器会根据你给的值取计算出一个比值,好比上面这个比值是2,而后去乘下面的sizes,公式就是:
实际渲染大小 = (原图大小 / 声明大小) * 对应的sizescdn

为何这么作呢?

我猜想,若是按w等于图片宽度的话,在高质量的图片下并不合适,因此w只是起到一个描述图片尺寸做用,就和你爸妈同样,我以为XXXXXX。blog

结论

我瞎写,你随便看看就好,以为哪里不对能够留言

相关文章
相关标签/搜索