图片在Web上的使用占比已经非常的高，特别是在手淘互动这样的环境之下，我们每一个项目的图片使用量都非常的大。如果能把图片用好，的确是件不容易的事情，而且面对的挑战也不小。经常会碰到有关于图片如何加载，如何适配，如何优化等等。

另外在移动端开发中，很多同学在Web上使用图片的方法一般都是通过<img>标签和CSS的background-image属性来处理。也正因如此，很多同学却忘记了这两者应该如何？怎么使用又是最优的。甚至有很多前端同学都已经忘记了这两者的差异是什么？

加上Web的技术不断革新，事实上除了前面提到的加载图片的方式之外，还有其他的方式，比如HTML5的<picture>（虽然这个元素标签曾经一度废弃过，但后来又添加回来了）。就算还是使用img标签，也有了新的优化，比如img的srcset属性。

那么面对这么多的变化，以及使用的场景，我们应该怎么来选择，才是最优的选择。今天这篇文章，我们就来一起探讨一下这些东西，希望大家会喜欢。

Web引入图片的姿势

Web上如何引入图片，其实前面已经简单的提到过。这也是探索Web上图片最基础的部分。所以花点时间来简单的描述一下。一般在Web上引入图片，大体分为两种类型，其一是通过 HTML元素引入图片，其二是通过 CSS样式引入图片。

HTML元素引入图片

通过HTML元素在Web上引入图片最常见的方式是通过<img>元素来引入。比如：

<img src="logo.png" alt="w3cplus" />

img元素是通过src来引入图片资源（图片的路径），除此src属性之外，还有其属性，比如上例中的alt属性提供有意义的描述（当图片加载失败的时候，alt的内容将会显示在Web上。这些描述有助于提高您的网站的可访问性，因为它们能提供语境给屏幕阅读器及其他辅助性技术），width和hegiht等常用属性。在HTML5中还给img元素添加了两个新属性 srcset 和sizes。

srcset 属性增强了 img 元素的行为，让您能够轻松地针对不同设备特性提供多种图片文件。类似于 CSS 原生的 image-set 函数，srcset 也允许浏览器根据设备特性选择最佳图像，例如，在 2x 显示屏上使用 2x 图像，将来甚至允许在网络带宽有限时对 2x 设备使用 1x 图像。

在不支持 srcset 的浏览器上，浏览器只需使用 src 属性指定的默认图像文件。 正因如此，无论设备能力如何，一定要始终包含一个在任何设备上都能显示的 1x 图像。如果 srcset 受支持，则会在进行任何请求之前对逗号分隔的图像/条件列表进行解析，并且只会下载和显示最合适的图像。 比如，你现在可以换个姿势使用<img>来根据不同的环境加载不同的图片：

<img
    srcset="quilt_2/detail/large.jpg  1920w, 
            quilt_2/detail/medium.jpg  960w,
            quilt_2/detail/small.jpg   480w"
    src="quilt_2/detail/medium.jpg"
    alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork.">

另外，img的sizes属性也非常的强大。该属性可以使图片资源尺寸的值被用来指定图像的预期尺寸。当srcset使用w描述符时，用户代理使用当前图像大小来选择srcset中合适的一个图像URL。被选中的尺寸影响图像的显示大小。如果没有设置srcset属性，或者没值，那么sizes属性也将不起作用。来看一个简单的例子：

<img src="lighthouse-200.jpg" sizes="50vw"
    srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
            lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
            lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
            lighthouse-1800.jpg 1800w" alt="a lighthouse">

在上面的例子中，渲染了一张宽度为视窗宽度一半（sizes="50vw"）的图像，根据浏览器的宽度及其设备像素比，允许浏览器选择正确的图像，而不考虑浏览器窗口有多大。

上面我们看到的仅是srcset和sizes属性的冰山一角，有关于更详细的东西我们不在这里阐述，如果你感兴趣的话，可以观注后续的更新，因为我最近正在探讨如何借助这两个特性在移动端不同的设备上加载所需要的图像资源。

在HTML5中新增了一个元素标签：<picture>。该元素可以通过若干个<source>，而且浏览器会自动匹配<source>的type、media、srcset等属性，来找到最适合当前布局、视窗宽度、设备像素密度的图像资源。其次在该元素里面还可以内嵌一个img标签，用来作为其降级处理，一旦浏览器不支持picture元素，会自动引入内嵌的img引入的图片。比如下面这个示例：

<picture>
    <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
    <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
    <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

上面的例子中，如果浏览器宽度至少为 800px，则将根据设备分辨率使用 head.jpg 或 head-2x.jpg。如果浏览器宽度在 450px 和 800px 之间，则将根据设备分辨率使用 head-small.jpg 或 head-small-2x.jpg。对于屏幕宽度小于 450px，且不支持 picture 元素向后兼容的情况，浏览器将渲染 img 元素，因此要始终包含该元素。

是不是看上去picture有点类似于具备了srcset和sizes属性的img。

CSS引入图片

除了熟悉的