对于不同的屏幕尺寸、分辨率或者其他大小不一的屏幕设备，需要在上面呈现出良好的图片
<img>元素，本文主要针对元素<img>的响应式这种情况，列举一些解决思路。
1、现象
观察下图，通过鼠标控制放大缩小，不断的放大后，图片清晰度就会慢慢出现模糊，越放大，像素就会越小 
2、背景原因：
关于devicePixelRatio像素大小的比率公式：
window.devicePixelRatio=当前设备的物理像素分辨率/css像素分辨率
要保证图片1:1显示的话，前提条件需要保证devicePixelRatio为1。一旦通过鼠标伸缩放大或者更改设备的分辨率，导致devicePixelRatio不一样情况下，需要通过更改(图像真实物理尺寸=图片的css尺寸*devicePixelRatio)，这样图片仍然可以保持清晰度
3、解决方案：
当前<img>元素的响应式图片，主要与css的媒体查询优化有点类似，一个侧重于图片，一个侧重于css
a、基于分辨率
- 当你想要为窄屏提供更小的图片时，因为小屏幕不需要像桌面端显示那么大的图片；以及你想为高/低分辨率屏幕提供不同分辨率的图片时，都可以通过矢量图（SVG 图片）、
srcset以及sizes属性来实现。 - 使用img的
srcset来解决设备像素比:srcset属性允许您指定一系列图像和它们对应的设备像素比。浏览器根据设备的屏幕像素密度选择合适的图像进行加载
ini
<img
srcset="elva-fairy-400w.jpg 2x, elva-fairy-600w.jpg 3x"
src="elva-fairy-200w.jpg"
alt="Elva dressed as a fairy" />- 使用img的
srcset和sizes来解决不同视口尺寸与设备像素比srcset的写法：文件名+空格+图片固定宽度。下文案例中，宽度里使用的480w表示图片原始物理宽度为480pxsizes的写法，媒体查询+空格+槽的宽度，其中这个槽的宽度主要是为了与srcset提供的宽度进行最接近的匹配
html
<img
srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />b、picture基于美术设计
- 当你想为不同布局提供不同剪裁的图片------比如在桌面布局上显示完整的、横向图片，而在手机布局上显示一张剪裁过的、突出重点的纵向图片，可以用
<picture>元素来实现。 - 主要使用media和srcset来解决响应式图片
在线测试地址：mdn.github.io/learning-ar...
800px以下：
800px以上：
html
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
<source media="(min-width: 800px)" srcset="elva-800w.jpg" />
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>- 拓展：满足各个浏览器，使用最新现代图像格式
html
<picture>
<source type="image/svg+xml" srcset="pyramid.svg" />
<source type="image/webp" srcset="pyramid.webp" />
<img
src="pyramid.png"
alt="regular pyramid built from four equilateral triangles" />
</picture>4、优势
- 提供更好的用体验，确保不同设备显示最佳效果
- 不同分辨率加载不同大小的图片资源，优化网页加载速度
5、next内置图片优化
由于项目中使用next.js的架构，引用图片资源，基本是使用next的内置组件,在处理不同屏幕或者像素下，处理的方案是跟上述原理一样的，只是图片资源被next提前处理了。
scss
<div className="relative w-[2.67rem] h-[2.67rem] rounded-[.44rem] mx-[.89rem] overflow-hidden">
<Image fill src="xxxx/xxxx/xxxxxx/popstone2" sizes="(min-width: 1440px) 64.44rem, 20rem" />
</div>产生效果如图所示：
