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

前端学习
8月1日
编辑

Joker织梦开发者

现下流行的网页基本都是基于响应式布局设计（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 提供了一套完整解决方法，那就是的 srcset 属性，或者 HTML5 的元素。看以下示例：

<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="">
<source media="(min-width: 468px)" srcset="">
<img src="demo-250x250.jpg">
</picture>

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

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