Image图片优化

全站图片根据浏览器智能使用webp或avif格式，智能使用大小图，采用方案：akamai CND智能转化服务+自定义封装MikImage组件。

一、定制化与akamai通用改变图片大小

1、定制化：

缩放不裁剪(推荐)：https://static.platform.michaels.com/kitten.png?fit=inside|500:100

剪裁效果：https://static.platform.michaels.com/kitten.png?impolicy=crop&width=500&height=100

2、通用图片大小：

https://static.platform.michaels.com/tst00/5977402330554081280.png?imwidth=100

官方文档：IMQuery

二、前端根据图片位置，按UI设计lg尺寸，全部添加分辨率后缀?fit=inside|500:100

 

 

三、图片全面切换CDN域名 https://static.platform.michaels.com/

自营商品图片可保留https://imgs.michaels.com/

四、上传图片清晰度与格式：

1、应考虑设备像素比到2的设备，比如mac、iPhone，图片分辨率应是使用大小的1.6倍以上

2、上传图片时使用java库统一转为jpg格式，不可保留webp格式因为有些浏览器不支持

3、后台添加图片时根据业务场景添加裁剪组件

五、使用基于next/image二次封装MikImage公共图像组件

1、引入michaels-ssr@1.2.127以上版本

2、代替原来的next/image组件

3、删除unoptimized、lazyBoundary、智能大小属性，因为公共组件里有设置

 

1import MikImage from 'michaels-ssr/components/MikImage'; 2<MikImage src="" />

4、MikImage封装智能大小图，定制化后缀?fit=inside|width:heigh会根据屏幕宽度与设备像素比(devicePixelRatio)智能使用大小图

六、操作步骤：目前图片方案，能解决绝大部分图片问题：
1、按UI设计lg尺寸，添加分辨率后缀?fit=inside|width:height（方便代码维护）
2、使用公共图片组件MikImage，会根据清晰度乘以1.6倍（清晰度与图片大小平衡）
3、长宽比例问题，前端UI自适应+后台添加图片后让用户剪裁（固定同一宽高比例）