下载掌阅APP，畅读海量书库
立即打开
HTML 5.1新增picture元素和img元素的srcset、sizes属性，使得响应式图片的实现更为简单便捷，很多主流浏览器的新版本也对这些新增加的内容支持良好。
在HTML5中，使用<img>标签可以把图像插入网页中，具体用法如下。
<img src="URL" alt="替代文本" />
img元素向网页中嵌入一幅图像，从技术上分析，<img>标签并不会在网页中插入图像，而是从网页上链接图像，<img>标签创建的是被引用图像的占位空间。
图4.1 在网页中插入图像
提示： <img>标签有两个必需的属性：alt属性和src属性。具体说明如下。
alt属性：设置图像的替代文本。
src属性：定义显示图像的URL。
【示例】 在页面中插入一幅照片，在浏览器中的预览效果如图4.1所示。
<img src="images/1.jpg" width="400" alt="读书女生"/>
HTML5为<img>标签定义了多个可选属性，简单说明如下。
height：定义图像的高度。取值单位可以是像素或者百分比。
width：定义图像的宽度。取值单位可以是像素或者百分比。
ismap：将图像定义为服务器端图像映射。
usemap：将图像定义为客户端图像映射。
longdesc：指向包含长的图像描述文档的URL。
不再推荐使用HTML4中的部分属性，如align（水平对齐方式）、border（边框粗细）、hspace（左右空白）、vspace（上下空白），对于这些属性，HTML5建议使用CSS属性代替使用。
流内容是由页面上的文本引述出来的。在HTML5出现之前，没有专门实现这个目的的元素，因此一些开发人员使用没有语义的div元素表示。通过引入figure和figcaption元素，HTML5改变了这种情况。
流内容可以是图表、照片、图形、插图、代码片段，以及其他类似的独立内容。可以由页面上的其他内容引出figure。figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。例如：
<figure>
<p>思索</p>
<img src="images/1.jpg" width="350" />
</figure>
这里figure只有一张照片，放置多个图像或其他类型的内容（如数据表格、视频等）也是允许的。figcaption元素并不是必需的，但如果包含它，它就必须是figure元素内嵌的第一个或最后一个元素。
【示例】 下面包含新闻图片及其标题的figure，显示在article文本中间。图以缩进的形式显示，这是浏览器的默认样式，如图4.2所示。
<article>
<h1>我国首次实现月球轨道交会对接 嫦娥五号完成在轨样品转移</h1>
<p>12月6日，航天科技人员在北京航天飞行控制中心指挥大厅监测嫦娥五号上升器与轨道器返回器组合体交会对接
情况。</p>
<p>记者从国家航天局获悉，12月6日5时42分，嫦娥五号上升器成功与轨道器返回器组合体交会对接，并于6时
12分将月球样品容器安全转移至返回器中。这是我国航天器首次实现月球轨道交会对接。</p>
<figure>
<figcaption>新华社记者<b>金立旺</b>摄</figcaption>
<img src="images/news.jpg" alt="嫦娥五号完成在轨样品转移" /> </figure>
<p>来源：<a href="http://www.xinhuanet.com/">新华网</a></p>
</article>
图4.2 流内容显示效果
figure元素可以包含多个内容块。不过，不管figure包含多少内容，只允许有一个figcaption。
注意： 不要简单地将figure作为在文本中嵌入独立内容实例的方法。在这种情况下，通常更适合用aside元素。要了解如何结合使用blockquote和figure元素。
可选的figcaption必须与其他内容一起包含在figure里面，不能单独出现在其他位置。figcaption中的文本是对内容的一句简短描述即可，就像照片的描述文本。
在默认情况下，现代浏览器会为figure添加宽40 px的左右外边距。可以使用CSS的margin-left和margin-right属性修改这一样式。例如，使用margin-left:0;让图像直接抵到页面左边缘。还可以使用figure { float: left; }让包含figure的文本环绕在它周围，这样文本就会围绕在图像的右侧。可能还需要为figure设置width，使之不至于占据太大的水平空间。
网站图标一般显示在浏览器选项卡、历史记录、书签、收藏夹或地址栏中。图标大小一般为16 px×16 px，透明背景。移动设备iPhone图标大小为57 px×57 px或114 px×114 px（Retina屏），iPad图标大小为72 px×72 px或144 px×144 px（Retina屏）。Android系统支持该尺寸的图标。
【示例】 下面通过多步操作，演示如何在一个网站中插入图标。
第1步，创建一个大小为16 px×16 px的图像，保存为favicon.ico，注意扩展名为.ico。为Retina屏创建一个32 px×32 px的图像。
提示： ico文件允许在同一个文件中包含多个不同尺寸的同名文件。
第2步，为触屏设备至少创建一个图像，并保存为PNG格式。如果只创建了一个图像，将其命名为apple-touchicon.png。如有需要，还可以创建其他的触屏图标。
第3步，将图标图像放在网站根目录下。
第4步，新建HTML5文档，在网页头部位置输入下面的代码。
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
第5步，浏览网页，浏览器会自动在根目录寻找特定的文件名，找到后就将图标显示出来。
如果浏览器无法显示，可能是浏览器缓存过大和生成图标过慢，尝试清除缓存，或者先访问图标链接（http://localhost/favicon.ico），然后再访问网站，就可以正常显示了。
使用alt属性可以为图像添加一段描述性文本，当图像由于某种原因不显示的时候，就将这段文字显示出来。屏幕阅读器可以朗读这些文本，以帮助视障访问者理解图像的内容。
HTML5规范推荐将alt文本理解为图像的替代性描述。例如：
<img src="tulip.jpg" alt="上海鲜花港 - 郁金香" />
在IE浏览器中，替代文本出现在一个带叉的小方块旁边，且两者由一个方框包围。在Firefox和Opera等其他浏览器中，替代文本是单独出现的。Chrome和Safari浏览器不会显示alt文本，而是显示缺失图像的图标。
提示： 如果图像对内容的价值较小，对视障用户来说不太重要，则可以提供空的替代文本，即alt=""。如果图像与邻近的文本表达的信息相似，也可以将alt属性置空。
注意，不要用alt文本代替图像的caption。在这种情况下，可以考虑将img放入一个figure元素，并添加一个figcaption元素。
如果图像是页面设计的一部分，而不是内容的一部分，则考虑使用CSS的backgroundimage属性引入该图像，而不是使用img标记。
Retina是一种显示标准，就是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，也称为视网膜显示屏。
在网页设计中，通过改变图像显示的尺寸，在保持所有显示屏上图像尺寸相同的情况下，让使用Retina显示屏的用户看到更高清的图像。
【实现方法】
调整img的height和width属性均为原图像的1/2，由于图像的高度和宽度比例保持不变，图像不会失真。注意，由于图像源是同一个文件，加载时间没有变化。
【示例】 假设在网页中插入一个40 px×30 px尺寸的图像，也就是让图像在所有的显示屏上都显示为40 px×30 px，包括普通屏和Retina屏。那么，先创建80 px×60 px大小的图像。然后，设计如下代码。
<img src="photo.jpg" width="40" height="30" alt="" />
浏览器将80 px×60 px的图像缩小，以40 px×30 px的尺寸显示。对于80 px×60 px的图像来说，总数为4800 px，普通屏会显示为1200 px，Retina屏就可以显示为4800 px，让图像看起来更清晰。
如果设计40 px×30 px的图像，Retina屏就会拉伸图像，使用1200 px填充4800 px的空间，就会导致图像清晰度降低。
提示： 图标字体与SVG图像文件格式在缩放时不会导致失真。对于单色的图标，建议尽可能地使用图标字体，而非使用图像。对于标识和其他非照片类图像，可以考虑使用SVG格式。
<picture>标签仅作为容器，可以包含一个或多个<source>子标签。<source>可以加载多媒体源，它包含如下属性。
srcset：必需，设置图片文件路径，如srcset=" img/minpic.png"。或者是由逗号分隔的用像素密度描述的图片路径，如srcset="img/minpic.png,img/maxpic.png 2x"。
media：设置媒体查询，如media=" (min-width: 320px) "。
sizes：设置宽度，如sizes="100vw"。或者是媒体查询宽度，如sizes="(min-width: 320 px) 100vw"。也可以是逗号分隔的媒体查询宽度列表，如sizes="(min-width: 320 px) 100vw, (min-width:640 px) 50vw, calc(33vw – 100 px) "。
type：设置MIME类型，如type= "image/webp"或者type= "image/vnd.ms-photo "。
浏览器将根据source的列表顺序，使用第一个合适的source元素，并根据设置属性，加载具体的图片源，同时忽略后面的<source>标签。
注意： 建议在<picture>标签尾部添加<img>标签，用来兼容不支持<picture>标签的浏览器。
【示例】 使用picture元素设计在不同视图下加载不同的图片，演示效果如图4.3所示。
<picture>
<source media="(min-width: 650px)" srcset="images/kitten-large.png">
<source media="(min-width: 465px)" srcset="images/kitten-medium.png">
<!-- img标签用于不支持picture元素的浏览器 -->
<img src="images/kitten-small.png" alt="a cute kitten" id="picimg">
</picture>
图4.3 根据视图大小加载图片
本例以屏幕的方向作为条件，当屏幕方向为横屏时加载kitten-large.png图片，当屏幕方向为竖屏时加载kitten-medium.png图片。演示效果如图4.4所示。
<picture>
<source media="(orientation: portrait)" srcset="images/kitten-medium.png">
<source media="(orientation: landscape)" srcset="images/kitten-large.png">
<!-- img标签用于不支持picture元素的浏览器 -->
<img src="images/kitten-small.png" alt="a cute kitten" id="picimg">
图4.4 根据屏幕方向加载图片
提示： 可以结合多种条件，例如屏幕方向和视图大小，分别加载不同的图片，代码如下。
<picture>
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset=" images/minpic_
landscape.png">
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset=" images/minpic_
portrait.png">
<source media="(min-width: 640px) and (orientation: landscape)" srcset=" images/middlepic_landscape.png">
<source media="(min-width: 640px) and (orientation: portrait)" srcset="images/middlepic_portrait.png">
<img src="images/picture.png" alt=" this is a picture ">
</picture>
本例以屏幕像素密度作为条件，设计当像素密度为2 x时，加载后缀为_retina.png的图片，当像素密度为1 x时加载无retina后缀的图片。
<picture>
<source media="(min-width: 320px) and (max-width: 640px)" srcset="images/minpic_retina.png 2x">
<source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x">
<img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture">
</picture>
提示： 有关srcset属性的详细说明请参考下面的介绍。
本例以图片的文件格式作为条件。当支持webp格式图片时，加载webp格式图片；当不支持webp格式图片时，加载png格式图片。
<picture>
<source type="image/webp" srcset="images/picture.webp">
<img src="images/picture.png" alt=" this is a picture ">
</picture>
除了source元素外，HTML5为img元素新增了srcset属性。srcset属性是一个包含一个或多个源图的集合，不同源图用逗号分隔，每一个源图由以下两部分组成。
图像URL。
x（图像像素比描述）或w（图像像素宽度描述）的描述符。描述符需要与图像URL以一个空格进行分隔，w描述符的加载策略是通过sizes属性里的声明计算选择的。
如果没有设置第二部分，则默认为1 x。在同一个srcset里，不能混用x描述符和w描述符，也不能在同一个图像中既使用x描述符，又使用w描述符。
sizes属性的写法与srcset相同，也是用逗号分隔的一个或多个字符串，每个字符串由以下两部分组成。
媒体查询。最后一个字符串不能设置媒体查询，作为匹配失败后回退选项。
图像size（大小）信息。注意，不能使用%描述图像大小，如果想用百分比表示，应使用类似于vm（100 vm = 100%设备宽度）的单位描述，其他（如px、em等）的可以正常使用。
sizes给出的不同媒体查询选择图像大小的建议，只对w描述符起作用。也就是说，如果srcset用的是x描述符，或根本没有定义srcset，则sizes是没有意义的。
注意： 除了IE浏览器不兼容外，其他浏览器全部支持该技术，详细信息可以访问http://caniuse.com/#search=srcset。
【示例】 设计屏幕5像素比（如高清2k屏）的设备使用2500 px×2500 px的图片，3像素比的设备使用1500 px×1500 px的图片，2像素比的设备使用1000 px×1000 px的图片，1像素比（如普通笔记本显示屏）的设备使用500 px×500 px的图片。对于不支持srcset的浏览器，显示src的图片。
第1步，设计之前，先准备5张图片。
500.png：大小等于500 px×500 px。
1000.png：大小等于1000 px×1000 px。
1500.png：大小等于1500 px×1500 px。
2000.png：大小等于2000 px×2000 px。
2500.png：大小等于2500 px×2500 px。
第2步，新建HTML5文档，输入以下代码，然后在不同屏幕比的设备上进行测试。
<img width="500" srcset="
images/2500.png 5x,
images/1500.png 3x,
images/1000.png 2x,
images/500.png 1x "
src="images/500.png"
/>
对于srcset没有给出像素比的设备，不同浏览器的选择策略不同。例如，没有给出1.5像素比的设备要使用哪张图片，浏览器可以选择2像素比的图片，也可以选择1像素比的图片。
w描述符可以简单地理解为描述源图的像素大小，无关宽度还是高度，在大部分情况下可以理解为宽度。如果没有设置sizes，一般是按照100 vm选择加载图片的。
【示例1】 如果视口在500 px及以下时，使用500 w的图片；如果视口在1000 px及以下时，使用1000 w的图片，以此类推。如果在媒体查询都满足的情况下，使用2000 w的图片。实现代码如下所示。
<img width="500" srcset="
images/2000.png 2000w,
images/1500.png 1500w,
images/1000.png 1000w,
images/500.png 500w
"
sizes="
(max-width: 500px) 500px,
(max-width: 1000px) 1000px,
(max-width: 1500px) 1500px,
2000px "
src="images/500.png"
/>
如果没有对应的w描述符，一般选择第一个大于它的。如果有一个媒体查询是700 px，一般加载1000 w对应的源图。
【示例2】 使用百分比设置视口宽度。
<img width="500" srcset="
images/2000.png 2000w,
images/1500.png 1500w,
images/1000.png 1000w,
images/500.png 500w
"
sizes="
(max-width: 500px) 100vm,
(max-width: 1000px) 80vm,
(max-width: 1500px) 50vm,
2000px "
src="images/500.png"
/>
这里设计图片的选择：视口宽度乘以1、0.8或0.5，根据得到的像素选择不同的w描述符。例如，如果viewport为800 px，对应80 vm，就是800 px×0.8=640 px，应该加载一个640 w的源图，但是srcset中没有640 w，这时会选择第一个大于640 w的源图，也就是1000 w的源图。如果没有设置，一般是按照100 vm选择加载图片的。