响应式网页中如何插入响应式图片

现下流行的网页基本都是基于响应式布局设计（responsive web design）的，本文讲解在响应式布局的网页中如何正确的插入图片使其能自适应屏幕大小，同时还能获得最佳的加载性能与显示效果，这种方式叫做”响应式图片”（responsive image）。

响应式图片的解决方案有很多，HTML、JavaScript 和 CSS 都可以实现，本文介绍HTML与CSS两种方式，因为实现最简单而且浏览器原生支持。

响应式图片简便方式

最简单的响应式图片实现方法为：

img {
    width: 100%;
    height: auto;
}

但这种方式可能会造成图片显示的尺寸比它的原始图片大。假设它的父容器 width 为300px，而图片原始宽度只有200px的时候，就会拉伸，造成图像模糊。

如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：

img {
    max-width: 100%;
    height: auto;
}

如果本文只介绍这样的方法，未免太肤浅。这种实现的方式虽简便，但不能达到最佳的加载性能和用户体验，原因有如下几点：

• 因为当原始图片较大，虽然在移动设备上显示时尺寸会自动缩小，但性能不佳（会加载大尺寸原图）。
• 桌面显示的面积较大，图像可以容纳更多细节。手机的屏幕较小，许多细节是看不清的，需要突出重点。
• 桌面显示器一般是单倍像素密度，而手机的显示屏往往是多倍像素密度，即多个像素合成为一个像素，称为 Retina 屏幕。图片文件很可能在桌面端很清晰，放到手机上会有点模糊，因为像素扩充了。

响应式图片最佳方式

针对以上问题，HTML提供了一套完整解决方法，那就是<img>的srcset属性，或者HTML5 的<picture> 元素。看以下示例：

<img srcset="demo-320w.jpg,
             demo-480w.jpg 1.5x,
             demo-640w.jpg 2x"
     src="demo-640w.jpg">

上面的代码中，srcset属性给出了三个图片URL，适应三种不同的像素密度。图片 URL 后面的像素密度描述符，格式是像素密度倍数 + 字母x。1x表示单倍像素密度，可以省略。浏览器根据当前设备的像素密度，选择需要加载的图片。如果srcset属性都不满足条件，那么就加载src属性指定的默认图片。

<picture>
  <source media="(min-width: 768px)" srcset="https://veidc.com/demo-768x90.jpg">
  <source media="(min-width: 468px)" srcset="https://veidc.com/demo-468x60.jpg">
  <img src="demo-250x250.jpg">
</picture>

上面这段代码用的是HTML5的 <picture> 元素 ，如果设备屏幕宽度达到768px或以上，则显示 demo-768×90.jpg；如果屏幕宽度达到468或以上，则显示demo-468×60.jpg；如果以上两个条件都不匹配，则显示demo-250×250.jpg。此方法最适合图片展示广告。

下面再给一个示例，同时考虑屏幕尺寸和像素密度的适配。

<picture>
  <source srcset="https:[email protected],https:[email protected] 2x"       
          media="(min-width: 990px)">
  <source srcset="https:[email protected],https:[email protected] 2x" 
          media="(min-width: 768px)">
  <img srcset="https:[email protected],https:[email protected] 2x" 
       alt="演示图片">
</picture>

注：<picture>元素目前已经获得所有主流浏览器支持，具体支持情况如下：

• IE 9或以上版本
• Chrome 38.0或以上版本
• firefox 38.0或以上版本
• Edge 13.0或以上版本
• Safari 9.0或以上版本
• Opera 25.0或以上版本