下面的图是我使用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>
当设备小于等于800时，显示图片为1_800.jpg。其余时候显示图片1.jpg
网友评论