webp

WebP 图片格式是由 Google 基于 VP8 视频编码格式研发的，同时提供有损压缩和无损压缩两种格式。旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

美中不足的是，WebP格式图像的编码时间“比JPEG格式图像长8倍”。

根据设备的分辨率调用合适的图像

使用<picture>

<picture> 元素是一个容器，用来为其内部特定的 <img> 元素提供多样的 <source> 元素。

<picture> 元素零或多个 <source> 元素和一个 <img> 元素，每个 <source> 元素匹配不同的设备并引用不同的图像源，如果没有匹配的，就选择 <img> 元素的 src 属性中的 url。

注意:<img> 元素是放在最后一个 <picture> 元素之后，如果浏览器不支持该属性则显示 <img> 元素的的图片。

<!-- source可有可无； 如果media媒体查询匹配结果为 false，那么这个 <source> 元素会被跳过。 -->
<picture><source srcset="mdn-logo-wide.png" media="(min-width: 600px)"><img src="mdn-logo-narrow.png" alt="MDN">
</picture><!-- type 属性允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。 -->
<picture><source type="image/svg+xml" srcset="pyramid.svg"><source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

浏览器支持

表格中的数字表示支持该元素的第一个浏览器版本号。

元素
<picture>	38.0	13.0	38.0	9.1	25.0

<img>元素的srcset属性

srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像著作权归作者所有。

srcset格式：

图片地址 + 一个空格 + 图像的真实大小（以像素为单位的大小，只是单位不是px）[单位w，而不是px] 或者 像素密度[单位x]，多个资源之间用逗号分隔。

如果没有指定源描述符，那它会被指定为默认的 1x。

在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的srcset两个源都是 '2x'）也是无效的

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：

一个媒体条件（(max-width:480px)）

一个空格

当媒体条件为真时，图像将显示的宽度（440px）

<!--在支持 srcset 的用户代理中，当使用 w 描述符时，src 属性会被忽略。当匹配了媒体条件 (min-width: 600px) 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。--><img src="/files/16864/clock-demo-200px.png"alt="Clock"srcset="/files/16864/clock-demo-200px.png 200w,/files/16797/clock-demo-400px.png 400w"sizes="(max-width: 600px) 200px, 50vw">

css image-set()

css属性image-set()支持根据用户分辨率适配图像。

body {background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}

上述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用 pic-3.jpg，比如印刷。

兼容性：火狐、IE不支持

webp图片格式、响应式图片相关推荐

【转】CSS 与 HTML5 响应式图片
关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...
CSS 与 HTML5 响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
分享一个非常有用的HTML5+CSS3响应式图片案例
随着Retina屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种 ...
响应式图片的实现（含picture标签、srcset属性、sizes属性的使用方法，设备像素比详解）
什么是响应式图片? 响应式图片即针对不同的设备分辨率和尺寸,显示对应的最佳分辨率的图片. 具体表现为: 高分辨率的屏幕,显示高分辨率图像(确保高清屏上,图片依然足够清晰) 低分辨率的屏幕,显示低分辨率 ...
HTML5 响应式图片
现在上网设备越来越多,各种设备的屏幕千差万别,如果只用一张图片去涵盖所有的设备,一是可能会造成某些设备上显示效果不佳,比如使用了一张低清晰度的图,而网页运行在一个高清大屏里:二是可能会浪费带宽,比如使 ...
响应式图片-压缩处理工作流
图片压缩会让加载图片占用更少的带宽,同时不影响视觉效果.你可能会考虑到图片质量和大小,对于网上的图片而言,其实只需要考虑大小. 使用开发者工具查看网页中图片查看网页中显示的3张图片一样,当我们通过开 ...
【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势...
A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
响应式图片img中的srcset和sizes
响应式图片img中的srcset和sizes 参考链接如果是在小屏手机屏幕上显示网页,那么没有必要在网页上嵌入很大的图片.这被称之为分辨率切换问题(resolution switching prob ...
全局CSS之表单按钮图片辅助类响应式工具)
前言: 本节课我们接着上节课内容继续讲全局CSS的样式,今天主要讲表单.按钮.图片.辅助类.以及响应式工具 1. 表单 1.1基本表单 class="form-control" ...
Bootstrap(全局CSS之表单按钮图片辅助类响应式工具)
表单基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...

webp图片格式、响应式图片