对于不同的屏幕尺寸、分辨率或者其他大小不一的屏幕设备,需要在上面呈现出良好的图片
<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>
产生效果如图所示: