img 响应式图片的实现

应式图片即针对不同的设备分辨率和尺寸，显示对应的最佳分辨率的图片。

具体表现为：

高分辨率的屏幕，显示高分辨率图像（确保高清屏上，图片依然足够清晰）
低分辨率的屏幕，显示低分辨率图像（提升移动端网速较慢时的访问速度）。
高清屏是怎样让图片变模糊的？
此时需要学习一个新概念 —— 设备像素比

设备像素比 = 物理像素(设备像素) / 独立像素(CSS像素)
1
普通屏上1个css像素对应1个物理像素
高清屏上1个css像素对应4个或更多物理像素
以css像素为200px*300px的 img标签为例，普通屏幕下对应的物理像素为200*300，而高清屏（如苹果的retina屏幕）对应物理像素为400*600

即4个物理像素显示一个css像素

若图片资源的分辨率为200*300

在普通屏幕上，1个css像素刚好对应1个物理像素，则图片能清晰显示

在高清屏幕上，1个css像素对应4个物理像素，而位图像素不可分割，屏幕便只能就近取色，导致图片模糊

为了解决高清屏导致图片模糊的问题，便需要使用更高分辨率的图片，如400*600的图片，但更高分辨率的图片尺寸也会更大，需要消耗更长的页面加载时间。

对于普通屏，更高分辨率的图片虽然不会模糊，但会少一些锐利度或者色差，同样会造成资源浪费。

所以最佳方案为：随屏幕分辨率的不同，加载对应分辨率的图片。
————————————————
版权声明：本文为CSDN博主「朝阳39」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41192489/article/details/126038175