随着手机屏幕的经常出现，网页制作时不得不考虑图片在移动端下的效能、速度问题。
其最好的解决办法就是根据屏幕的不同大小和分辨率，提供不同尺寸和清晰度的图片。
那么，在花样、种类繁多的终端面前没有没有办法，让这个问题可以被高效的解决呢？一个屏幕一个屏幕的去写，显示是不切实际的。

这里有一些方法，可以达到我们的要求。

比如，我们有三种图片：
large.jpg (1024 x 768)
medium.jpg (640 x 480)
small.jpg (320 x 240)
smallest.jpg (240 x 180)

显然这个时候调用大图：rendered width × screen density > medium.jpg's width 640px
显然这个时候调用中图：rendered width × screen density > small.jpg's width 320px
显然这个时候调用小图：rendered width × screen density < smallest.jpg's width 240px

因为
rendered width = image’s width relative to viewport × viewport width

所以
image’s width relative to viewport比率 × viewport width × screen density分辨率(目前主要是1x和2x) > 640px

也就是说
viewport width > 640px ÷ ( image’s width relative to viewport × screen density )

有了viewport width, media query就可以这样写了：
viewport width > 640px ÷ ( 100vw(手机端单列下通常100vw) × 1x ) = 640px = 40em
viewport width > 640px ÷ ( 100vw(手机端单列下通常100vw) × 2x ) = 320px = 20em

36em 表示单列到三列的切换

所以
36em > viewport width > 40em 我们不需要large.jpg at 1x within the single-column layout.
36em > viewport width > 20em 我们需要large.jpg on 2x screens when the viewport is in that range.

对于三列结构
1x
viewport width > 640px ÷ ( 33.3vw × 1x ) = 1920px = 120em 当viewport width大于120em可以装载大图large.jpg
2x
viewport width > 640px ÷ ( 33.3vw × 2x ) = 960px = 60em > 36em 当viewport width大于60em可以装载大图large.jpg

新的标签 具体写法如下：


media="( (min-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or
( (max-device-pixel-ratio: 1.5) and (min-width: 120.001em) ) or
( (min-device-pixel-ratio: 1.5) and (min-width: 60.001em) )" />
media="( (max-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or
( (max-device-pixel-ratio: 1.5) and (min-width: 60.001em) ) or
( (min-device-pixel-ratio: 1.5) and (min-width: 10.001em) )" />







新的图像属性：srcset（source files’ dimensions） 和 sizes （image size relative to the viewport）

sizes="(min-width: 36em) 33.3vw,100vw" alt="A rad wolf" />

对于单列

srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="100vw"
alt="A rad wolf" />

=============================
picture新语法 The element is currently available Chrome 38.



media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
src="images/kitten-curled.png"
alt="a cute kitten">


The example below supports 1x, 1.5x, and 2x resolution screens:


media="(min-width: 650px)"
srcset="images/kitten-stretching.png,
images/kitten-stretching@1.5x.png 1.5x,
images/kitten-stretching@2x.png 2x">
media="(min-width: 465px)"
srcset="images/kitten-sitting.png,
images/kitten-sitting@1.5x.png 1.5x
images/kitten-sitting@2x.png 2x">
src="images/kitten-curled.png"
srcset="images/kitten-curled@1.5x.png 1.5x,
images/kitten-curled@2x.png 2x"
alt="a cute kitten">


Here's an example of using the sizes attribute to set the proportion of an image to always fill 80% of the viewport. It is combined with the srcset attribute to supply four versions of the same lighthouse photo in widths of 160px, 320px, 640px, and 1280px wide:

sizes="80vw"
srcset="lighthouse-160.jpg 160w,
lighthouse-320.jpg 320w,
lighthouse-640.jpg 640w,
lighthouse-1280.jpg 1280w">

宽度一样，清晰度不同
srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
width="500px" alt="lolcat">
Link: https://dev.opera.com/articles/responsive-images/
https://dev.opera.com/articles/native-responsive-images/

分辨率不同，图片不同
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

根据切换点






sizes/srcset更复杂，不推荐使用