图片使用srcset减小图片加载时间

下面的图是我使用GTmetrix来测试修改后网页性能的结果

image.png

---------------------------------------修改后---------------------------------------------------

至于修改前的没有截图....不过分数大概是 PageSpeed Scores:64% , YSlow Score:71%

1.代码

修改前的HTML代码

//修改前的HTML代码——body部分
<img src="img/1.jpg" style="width:100%;" />
<img src="img/2.jpg" style="width:100%;" />
<img src="img/3.jpg" style="width:100%;" />

修改后的HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
</head>
<body>
  <picture>
      <source srcset="img/1_800.jpg" media="(max-width: 800px)" />
      <source srcset="img/1_1200.jpg" media="(max-width:1200px)" />
      <source srcset="img/1_1600.jpg" media="(max-width:1600px)" />
      <source srcset="img/1.jpg" />
      <img src="img/1.jpg" alt="" style="width:100%;" />
  </picture>
  <picture>
      <source srcset="img/2_800.jpg" media="(max-width: 800px)" />
      <source srcset="img/2_1200.jpg" media="(max-width:1200px)" />
      <source srcset="img/2_1600.jpg" media="(max-width:1600px)" />
      <source srcset="img/2.jpg" />
      <img src="img/2.jpg" alt="Flowers" style="width:100%;" />
  </picture>

  <picture>
      <source srcset="img/3_800.jpg" media="(max-width: 800px)" />
      <source srcset="img/3_1200.jpg" media="(max-width:1200px)" />
      <source srcset="img/3.jpg" />
      <img src="img/3.jpg" alt="Flowers" style="width:100%;" />
  </picture>
</body>
</html>

2.原理:不同设备显示不同图片

其实是将图片（1.jpg）变为多张放大/缩小后的图片（1_800.jpg ,1_1200.jpg , 1_1600.jpg）
然后将使用media来根据屏幕大小选择不用的图片
如：

<picture>
      <source srcset="img/1_800.jpg" media="(max-width: 800px)" />
      <source srcset="img/1.jpg" />
      <img src="img/1.jpg" alt="" style="width:100%;" />
  </picture>

图片 使用srcset减小图片加载时间

1.代码

修改前的HTML代码

修改后的HTML代码

2.原理:不同设备显示不同图片

推荐阅读更多精彩内容

图片使用srcset减小图片加载时间