html头图响应式,HTML5响应式图片

响应式图片，试用了安卓版的QQ和UC，都不支持，不过貌似12年底的时候PC QQ浏览器支持了响应式图片。本文提到的内容都属于很新的标准了，貌似在手机浏览器上全部支持的话，工作量会不小，不知道他们会不会考虑支持这个功能。

一些个人的看法，我会在译文中使用【zz:blabla】

http://www.html5rocks.com/en/tutorials/responsive/picture-element/

Introducing the element

标签声明了一个加载图片资源的方法。页面开发者可以不必依赖于CSS或JavaScript来处理响应式设计中使用的图片。用户则可以受惠于优化后的图片加载-这点对于在使用较慢的移动网络的用户尤为重要。

与最近新增了srcset和size属性的标签相比，标签在指定图片资源上处理的更加灵活。写个清爽的HTML标签，让浏览器去根据上下文的场景选择单独或是合并处理。通过标签来支持响应式设计，同时改善网页加载时机：

Art direction-based selection

判断屏幕方向，竖屏，横屏或是PC及的宽屏显示器

Device-pixel-ratio-based selection

是否为高分辨率显示设备(high DPI display)

Viewport-based selection

根据viewport选择填充图片

Image format-based selection

浏览器可以选择自己支持的最优化的图片格式。例如选择加载尺寸较小的WebP格式的图片

Use for art direction

标签最常见的响应式设计的用法在于“art direction”【zz:屏幕方向，通常竖屏称为portrait，肖像，肖像大概都是竖着的吧；横屏称为landscape，风景画。都是画像，所以称为art direction，不知道这样理解靠谱不】。使用一张图片，根据viewport宽度去进行缩放的方案，可以代替为使用适应浏览器viewport，更加合适的多个图片的方案。

The result of using only one image that is scaled up or down based on the viewport width.

Use several different images to more appropriately fill the browser viewport.

【zz:上图是一张图片的方案，使用缩放填充屏幕，明显看到适合于PC的图片，在平板和手机上效果不好。下图是不同屏幕方向使用了不同的图片。下图方案的效果明显好于上图的方案】

Improve resource loading performance

当使用到或的srcset及sizes属性时，浏览器会根据当前场景加载合适的图片。这种有天赋的实现得益于HTML解释器，并且可以利用浏览器图片缓存及预加载特性。【zz:看不出来跟HTML解释器有毛线关系，规范这么定义的，为什么还说是native implementation】

View a live demo

一个事实是，互联网的创建是用来存放猫的图片的【zz:汗一个，明明是作者自己喜欢猫】。使用我们可以通过改变控件大小，从而模拟出一个猫

的

惊奇能力的

效果【zz:翻的比较恶心，自己用demo试吧。】。

使用chrome38或更高版本查看效果。改变窗口大小，查看猫的动作变化。【zz:链接在这里 -http://googlechrome.github.io/samples/picture-element/

】

正式开始介绍之前，这个demo只是介绍了提供的最基本的特性。我们来一起挖掘一下语法吧【zz:那么问题来了。。。。】

The syntax

下面的着一小段HTML和CSS的代码就是实现demo的全部内容了

img {display: block; margin: 0 auto;}

media="(min-width: 650px)"

srcset="images/kitten-stretching.png">

media="(min-width: 465px)"

srcset="images/kitten-sitting.png">

src="images/kitten-curled.png"

alt="a cute kitten">

注意没有用到任何的JavaScript和第三方的库。CSS样式，

Use with elements

标签自身并没有特定的属性。当标签用作标签的容器时，奇迹发生了。

标签用于加载例如音视频的媒体内容，现已更新为支持图片加载，同时也加入了新特性：

srcset

(required)

可以指定一个图片文件的路径(e.g. srcset="kitten.png")。

或是指定一个带有像素分辨率描述符的一串图片文件路径(e.g. srcset="kitten.png,

kitten@2X.png 2x")1x的描述符可以省略。

media

(optional)

sizes

(optional)

支持一个单个的宽度描述符(e.g. sizes="100vw")或是一个使用宽度描述符的media query(e.g. sizes="(max-width:30em) 100vw")。

或是逗号隔开的一串media queries，后面带着宽度描述符(e.g. sizes="(max-width:30em 100vw), (max-width:50em) 50vw, clac(33vw - 100px)"),同样的，列在最后一个的是缺省时使用的。

type

(optional)

支持MIME类型(e.g. type="image/webp" or type="image/vnd.ms-photo").

浏览器会根据提示选择加载属性值中指定的最合适的图片资源。列表中的顺序也是有关系的！浏览器会加载一个匹配条件的元素，而忽略后面的元素【zz:想想if语句就知道了，反正实现也是这么做的，匹配就ok了，不会在找到的情况下也遍历整个列表】

Add a final element

更新后的标签可以在标签中使用，作为当浏览器不支持picture标签时或是没有任何标签匹配时的最终的备用选择。要求在标签中使用-你如果忘记则会导致没有图片可以显示。

使用标签声明在块中使用的缺省的图片。由于浏览器解析到标签后为忽略它后面的定义，因此需要将作为的最后一个子节点。image标签可以使用alt属性。

Combine with pixel density descriptors

通过使用1x，1.5x，2x和3x的像素密度描述符可以支持不同的高分辨率显示。这个srcset新属性支持标签和标签

media="(min-width: 650px)"

srcset="images/kitten-stretching.png,

images/kitten-stretching@1.5x.png 1.5x,

images/kitten-stretching@2x.png 2x">

media="(min-width: 465px)"

srcset="images/kitten-sitting.png,

images/kitten-sitting@1.5x.png 1.5x

images/kitten-sitting@2x.png 2x">

src="images/kitten-curled.png"

srcset="images/kitten-curled@1.5x.png 1.5x,

images/kitten-curled@2x.png 2x"

alt="a cute kitten">

Combine with width descriptors

Web Fundamentals【zz:谷歌新推出的Web开发最佳实践手册】中覆盖到了标签的新的sizes特性。

--------------------------------------------------------------------------------------------------------------------------------------------

"When the final size of the image isn't known, it can be difficult to specify a density descriptor for the image sources. This is especially true for images that span a proportional width of the browser and are fluid, depending on the size of the browser.

Instead of supplying fixed image sizes and densities, the size of each supplied image can be specified by adding a width descriptor along with the size of the image element, allowing the browser to automatically calculate the effective pixel density and choose the best image to download."

--------------------------------------------------------------------------------------------------------------------------------------------

下面是一个使用sizes特性来达到覆盖80% viewport窗口区域的例子。通过组合使用srcset特性以提供4个版本的相同内容的灯塔相片，相片的宽度分别为160px，320px，640px及1280px。

sizes="80vw"

srcset="lighthouse-160.jpg 160w,

lighthouse-320.jpg 320w,

lighthouse-640.jpg 640w,

lighthouse-1280.jpg 1280w">

浏览器会根据viewport与硬件显示分辨率来选择加载最合适的图片：

举例来说，最左的viewport的宽为800px。则浏览器会加载lighthouse-640.jpg。除非device pixel ratio为2x-这种情况下，浏览器会选择加载lighthouse-1280.jpg。

由于属于的扩展，sizes属性可以在和标签中使用。

sizes="80vw"

srcset="lighthouse-landscape-640.jpg 640w,

lighthouse-landscape-1280.jpg 1280w,

lighthouse-landscape-2560.jpg 2560w">

sizes="80vw"

srcset="lighthouse-160.jpg 160w,

lighthouse-320.jpg 320w,

lighthouse-640.jpg 640w,

lighthouse-1280.jpg 1280w">

这是前一个案例的扩展，当viewport为800px或以上时，浏览器会使用横屏的灯塔图片

左侧的viewport宽度大于800px，因此显示一个横屏版本的灯塔图片

Load alternative image file formats

标签的type属性是用来选择加载并不是被所有浏览器都支持的图片格式。例如，你可以选择在支持WebP格式的浏览器来加载这种类型的图片，但是在其他浏览器上使用JPEG格式的图片。示例如下：

Additional code examples 这有个opera的超全案例，http://dev.opera.com/articles/responsive-images/

剩下就没啥了，结束语的赶脚，感兴趣自己扫两眼吧，没有技术的东西了

Try it out today

The  element is currently available Chrome 38. Try it out with screen emulation in the Chrome DevTools.

If you have feedback on this new feature, drop us a line on the Chrome bug tracker.

If you're ready to start implementing  today but also want to add support for responsive images in additional browsers, refer to this element sample for using  with a polyfill.

Be sure to also check out the guide to images on Web Fundamentals for best practice examples of implementing images on the web.