SuperAPI AI 工具集

responsive-images

设计与创作

查看项目

更新于 10-15 23:31

技能介绍

用途:帮助前端开发者实现高性能响应式图片,减少布局偏移并改善 Core Web Vitals。

主要能力:提供 img 的 srcset、sizes 写法示例,覆盖全宽横幅、内容宽度、三列网格卡片、侧栏缩略图等尺寸;给出懒加载规则(首屏 LCP 图用 loading="eager" 与 fetchpriority="high",折叠下方用 lazy);用 picture 与 source 组合 WebP、AVIF,并保留 JPEG 回退;用 media 实现不同裁剪的 art direction;用 aspect-ratio 容器配合 object-fit 保持比例。

使用方式:按推荐尺寸生成多档图片,在 img 上用 w 描述符而非 x,并按布局填 sizes 表达式;始终写 width、height 与有意义的 alt(装饰图用空 alt)。常见宽高比例有 16:9、4:3、3:2、1:1、21:9。

限制与提醒:LCP 图片不要用懒加载,否则会延迟 LCP;宽高缺失会导致 CLS;固定尺寸图(如 logo)可用密度描述符。资料未提供安装命令、价格或平台限制等信息。