几种解决移动端图片模糊问题的方案

Posted 2020-12-02 pyip

为了保证图片质量，我们应该尽可能让一个屏幕像素来渲染一个图片像素，所以，针对不同 DPR的屏幕，我们需要展示不同分辨率的图片。

1、media查询

使用 media查询判断不同的设备像素比来显示不同精度的图片：

.avatar{
    background-image: url(conardLi_1x.png);
}        
@media only screen and (-webkit-min-device-pixel-ratio:2){
     .avatar{
          background-image: url(conardLi_2x.png);
      }
}        
@media only screen and (-webkit-min-device-pixel-ratio:3){
     .avatar{
          background-image: url(conardLi_3x.png);
     }
}

此方案只适用于背景图

 

2、image-set

.avatar {
    background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x);
}

此方案只适用于背景图

 

3、srcset

使用 img标签的 srcset属性，浏览器会自动根据像素密度匹配最佳显示图片：

<img src="conardLi_1x.png"  srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">

 

4、javascript拼接图片url

使用 window.devicePixelRatio获取设备像素比，遍历所有图片，替换图片地址：

const dpr = window.devicePixelRatio;

const images =  document.querySelectorAll(‘img‘);

images.forEach((img)=>{
  img.src.replace(".", ‘@${dpr}x.’); 
})