3.4 设计图像
3.4.1 使用img元素
在HTML5中，使用<img>标签可以把图像插入网页中，具体用法如下。
<img src="URL" alt="替代文本" />
img元素向网页中嵌入一幅图像，从技术上分析，<img>标签并不会在网页中插入图像，而是从网页上链接图像，<img>标签创建的是被引用图像的占位空间。
提示：<img>标签有两个必需的属性：src属性和alt属性。具体说明如下。
alt：设置图像的替代文本。
src：定义显示图像的URL。
【示例】在页面中插入一幅照片，在浏览器中预览效果如图3.13所示。
<img src="images/1.jpg" width="400" alt="读书女生"/>
图3.12 以模态对话框形式打开图像
图3.13 在网页中插入图像
HTML5为<img>标签定义了多个可选属性，简单说明如下。
height：定义图像的高度。取值单位可以是像素或者百分比。
width：定义图像的宽度。取值单位可以是像素或者百分比。
ismap：将图像定义为服务器端图像映射。
usemap：将图像定义为客户端图像映射。
longdesc：指向包含长的图像描述文档的URL。
其中不再推荐使用HTML4中部分属性，如align（水平对齐方式）、border（边框粗细）、hspace（左右空白）、vspace（上下空白），对于这些属性，HTML5建议使用CSS属性代替。
3.4.2 定义流内容
流内容是由页面上的文本引述出来的。在HTML5出现之前，没有专门实现这个目的的元素，因此一些开发人员使用没有语义的div元素来表示。通过引入figure和figcaption，HTML5改变了这种情况。
流内容可以是图表、照片、图形、插图、代码片段，以及其他类似的独立内容。可以由页面上的其他内容引出figure。figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。例如：
这个figure只有一张照片，不过放置多个图像或其他类型的内容（如数据表格、视频等）也是允许的。figcaption元素并不是必需的，但如果包含它，它的位置必须是figure元素内嵌的第一个或最后一个元素。
【示例】在本示例中，包含新闻图片及其标题的figure，显示在article文本中间。图片以缩进的形式显示，这是浏览器的默认样式。
figure元素可以包含多个内容块。不过不管figure包含有多少内容，只允许有一个figcaption。
3.4.3 使用picture元素
<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: 320px)100vw"。也可以是逗号分隔的媒体查询宽度列表，如sizes="(min-width: 320px) 100vw,(min-width: 640px) 50vw, calc(33vw-100px)"。
type：设置MIME类型，如type="image/webp"或者type="image/vnd.ms-photo"。
浏览器将根据source的列表顺序，使用第一个合适的source元素，并根据这些设置属性，加载具体的图片源，同时忽略后面的<source>标签。
注意：建议在<picture>标签尾部添加<img>标签，用来兼容不支持<picture>标签的浏览器。
【示例】使用picture元素设计在不同视图下加载不同的图片，演示效果如图3.14所示。
图3.14 根据视图大小加载图片
3.4.4 设计横屏和竖屏显示
本例根据屏幕的方向作为条件，当屏幕以横屏方向显示时加载kitten-large.png的图片，当屏幕以竖屏方向显示时加载kitten-medium.png的图片。演示效果如图3.15所示。
图3.15 根据屏幕方向加载图片
提示：可以结合多种条件，例如，屏幕方向和视图大小，分别加载不同的图片。代码如下。
3.4.5 根据分辨率显示不同图像
本例以屏幕像素密度作为条件，设计当像素密度为2x时，加载后缀为_retina.png的图片，当像素密度为1x时加载无后缀retina的图片。
提示：有关srcset属性的详细说明请参考下面介绍。
3.4.6 根据格式显示不同图像
本例以图片的文件格式作为条件。当支持webp格式图片时加载webp格式图片，否则，加载png格式图片。
3.4.7 自适应像素比
除source元素外，HTML5为img元素也新增了srcset属性。srcset属性是一个包含一个或多个源图的集合，不同源图用逗号分隔，每一个源图由下面两部分组成。
图像URL。
x（像素比描述）或w（图像像素宽度描述）的描述符。描述符需要与图像URL以一个空格进行分隔，w描述符的加载策略是通过sizes属性里的声明来计算选择的。
如果没有设置第二部分，则默认为1x。在同一个srcset里，不能混用x描述符和w描述符，或者在同一个图像中，既使用x描述符，也使用w描述符。
sizes属性的写法与srcset相同，也是用逗号分隔的一个或多个字符串，每个字符串由下面两部分组成。
媒体查询。最后一个字符串不能设置媒体查询，作为匹配失败后回退选项。
图像size（大小）信息。注意，不能使用%来描述图像大小，如果想用百分比来表示，应使用类似于vm（100vm=100%设备宽度）的单位来描述，其他的（如px、em等）可以正常使用。
sizes里给出的不同媒体查询选择图像大小的建议，只对w描述符起作用。也就是说，如果srcset里用的是x描述符，或根本没有定义srcset，这个sizes是没有意义的。
注意：除了IE不兼容外，其他浏览器全部支持该技术，详细信息可以访问http://caniuse.com/#search=srcset。
【示例】设计屏幕5像素比（如高清2K屏）的设备使用2500px×2500px的图片，3像素比的设备使用1500px×1500px的图片，2像素比的设备使用1000px×1000px的图片，1像素比（如普通笔记本显示屏）的设备使用500px×500px的图片。对于不支持srcset的浏览器，显示src的图片。
第1步，设计之前，先准备5张图。
500.png：大小等于500px×500px。
1000.png：大小等于1000px×1000px。
1500.png：大小等于1500px×1500px。
2000.png：大小等于2000px×2000px。
2500.png：大小等于2500px×2500px。
第2步，新建HTML5文档，输入下面代码即可，然后在不同屏幕比的设备上进行测试。
对于srcset里没有给出像素比的设备，不同浏览器的选择策略不同。例如，如果没有给出1.5像素比的设备要使用哪张图，浏览器可以选择2像素比的，也可以选择1像素比的，等等。
3.4.8 自适应视图宽
w描述符可以简单理解为描述源图的像素大小，无关宽度还是高度，大部分情况下可以理解为宽度。如果没有设置sizes，一般是按照100vm来选择加载图片。
【示例1】设计如果视口在500px及以下时，使用500w的图片；如果视口在1000px及以下时，使用1000w的图片，以此类推。最后再设置媒体查询都满足的情况下，使用2000w的图片。实现代码如下。
如果没有对应的w描述，一般选择第一个大于它的。例如，如果有一个媒体查询是700px，一般加载1000w对应的源图。
【示例2】使用百分比来设置视口宽度。
这里设计图片的选择：视口宽度乘以1、0.8或0.5，根据得到的像素来选择不同的w。例如，如果viewport为800px，对应80vm，就是800×0.8=640px，应该加载一个640w的源图，但是srcset中没有640w，这时会选择第一个大于640w的，也就是1000w。如果没有设置，一般是按照100vm来选择加载图片。