更新 : 2019-02-21

除了写 srcset sizes 还有一种 x1, x2, x3, x4 的写法.

我们对比一下

假设

pc 希望是 1000w

mobile 希望是 300w

size 的写法是 if device == 300w use 300w, else if device == 1000w use 1000w (这里写的应该是 css media query, 但是我用 js 来表达就好)

游览就会通过匹配 device width 然后自动乘与用户的 retina 去寻找图片.

有时候我们并不需要 responsive 依据 device 的 width

但我们依然想要兼顾 retina

那么我们可以时候 x1, x2 的写法

只写 srcset 就可以了, 不需要写 sizes

srcset= 300w.jpg x1, 600w.jpg x2

无论 device 是 pc 还是 mobile 都只依据 retina 选图.

显然 sizes 还是比较强大的,而且 sizes 的 media query 也可以单独匹配 retina.

再来一个复杂的场景.

比如我们要做一个 image gallery 大图.

我们允许 admin upload 任意的图片.

user 则全屏展现图片.

举例

user device :

pc 1366 x 768  retina 1

pc 1366 x 768  retina 2

mobile 420 * 720 retina 1

mobile 420 * 720 retina 2

mobile 420 * 720 retina 3

mobile 420 * 720 retina 4

5 种 device

而 admin upload 得图片有 3 张

500x500

1500x1500

3000x3000

我们希望用户 device 小得情况下,不要给大图, 也希望用户 device 大得情况下,尽量展现大图.

这个时候得 srcset 我们需要依赖于 admin 图片得大小来写 (动态得,每张图得 srcset 都可能不同写法)

pc 1366 x 768  retina 1

pc 1366 x 768  retina 2

500x500

在 pc 得情况下, 500x500 希望完全展现

mobile 420 * 720 retina 1

手机 retina 1 得情况下, 我们要做小图

500 缩率图到 420.

然后 sizes = if (device width == 420 && retina == 1) use 420w;

我们只把需要压小得图写入 srcset. 其余得都用最大的图

写完小图后最后 sizes 加上

else if (retina == 1) 500w

else if (retina == 2) 500w

else if (retina == 3) 500w

else if (retina == 4) 500w

游览器有一个如果匹配不到就用最大图得概念,所以最后这个我们也可以改成

else 500w

就可以了. 总结就是写 if 所有需要缩率图得情况,然后最后加上 else 最大图.

更新 : 2019-01-01

如果我们不写 srcset 也不写任何 width, img 会依据图的大小来设置 width, retina 1 的情况下是完全 ok 的.

但是呢, 在有 retian 的情况就糟糕了, 因为它不会兼顾 device retina, 图片会变的很大很萌.

它不理会 mata width=device-width 的.

所以我们怎样都需要自己去设置 wdith , 或者使用 srcset. 不能放任不管哦.

从前世上只有一种 device.

屏幕大小都一样, 这时我们图片写 src 就可以了.

后来不同的屏幕大小出现了.

如果我们只是简单的用 css 来缩略大图去小图,这样的话虽然设计过关,但是却浪费了用户的宽带去下载较大的图,这种浪费不好。

后来就有了 <img sizes="mediaquery imageWidth"  srcset="imagesrc imageWidth, imagesrc imageWidth" />

sizes + srcset

sizes 负责用 mediaquery 针对 device width 等来表示使用多少 width 的图片. 这和写 css responsive 是完全同一个概念

srcset 则负责写入所有可以使用的图片,并且写上所有图片的宽.

游览器匹配 sizes 的 mediaquery 后会找到你想要的 image width, 然后依据 device 的 retina 来乘于 image width,  这时在通过这个 width 去寻找真确的 image src

这样就不会造成浪费了.

响应式图片 (responsive image)的更多相关文章

  1. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  2. 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  3. CSS 与 HTML5 响应式图片

    什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很 ...

  4. CSS与HTML5响应式图片

    随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...

  5. 如何使用 HTML5 的picture元素处理响应式图片

    来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...

  6. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  7. bootstrap中如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  8. 响应式图片srcset学习

    响应式图片srcset全新释义sizes属性w描述符 先转再看

  9. 继续送假期干货——响应式图片工具smartImg

    中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...

随机推荐

  1. spring boot mvc系列-静态资源配置与MappingHandler拦截器

    静态资源配置 Spring Boot 默认将 /** 所有访问映射到以下目录: classpath:/static classpath:/public classpath:/resources cla ...

  2. mint-ui之Loadmore使用

    <template> <div class="page-loadmore"> <div class="page-loadmore-wrapp ...

  3. matlab的三维绘图和四维绘图

    一.三维绘图1.曲线图plot3(X1,Y1,Z1,...):以默认线性属性绘制三维点集(X1,Y1,Z1)确定的曲线plot3(X1,Y1,Z1,LineSpec):以参数LineSpec确定的线性 ...

  4. 【Python025-字典】

    一.字典 1.创建和访问字典(字典是大括号表示,字典是映射类型) 语法类型:键:key,值:value,用冒号隔开 --- >>> dict1 = {'李宁':'一切皆有可能','耐 ...

  5. python引入模块

    1.自定义模块model_1.py def add(a,b): return a+b def dec(a,b): return a-b HEAD = "55AA" 2.程序代码 i ...

  6. Java:The hierarchy of the type is inconsistent错误

    错误 The type com.jiuqi.dna.ui.language.INLStringGroup cannot be resolved. It is indirectly referenced ...

  7. Eclipse的Servers视图中无法添加Tomcat

    问题:Eclipse的Servers视图中无法添加Tomcat,其中ServerName是被置为灰色的,无法编辑,如下图所示: 解决步骤: 关闭Eclipse 找到Eclipse的工作区间,这里假设命 ...

  8. Git rebase的使用

    rebase 在 Git 中整合来自不同分支的修改主要有两种方法:merge 以及 rebase. 在本节中我们将学习什么是“rebase”,怎样使用“rebase”,并将展示该操作的惊艳之处,以及指 ...

  9. linux内核中的DMI是什么?

    答: 桌面管理接口(Desktop Management Interface).是用来获取硬件信息的,在内核中有一个配置项CONFIG_DMI用来添加此功能到内核中!

  10. [转] Java中的final、static、this、super

    final 关键字 final关键字主要用在三个地方:变量.方法.类. 对于一个final变量,如果是基本数据类型的变量,则其数值一旦在初始化之后便不能更改:如果是引用类型的变量,则在对其初始化之后便 ...