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

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

image.png

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

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

1.代码

修改前的HTML代码

//修改前的HTML代码——body部分



修改后的HTML代码




  
  菜鸟教程(runoob.com)


  
      
      
      
      
      
  
  
      
      
      
      
      Flowers
  

  
      
      
      
      Flowers
  


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

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


      
      
      
  

当设备小于等于800时,显示图片为1_800.jpg。其余时候显示图片1.jpg

你可能感兴趣的:(图片 使用srcset减小图片加载时间)