mcpField
R
responsive-images

responsive-images

github.com/jezweb设计与 UI1.1k358 次安装3 周前更新
代码仓库

关于 responsive-images

面向 Web 开发者的响应式图片实践技能，关注性能与无障碍。内容涉及图片源选择、替代文本和宽高比处理，并引用 web.dev 与 MDN 资料。

主要功能

  1. 01响应式图片标记指南
  2. 02使用宽度描述符选择图片源
  3. 03替代文本要求
  4. 04宽高比与 object-fit 指南

适用场景

  1. 01为不同视口尺寸提供图片
  2. 02提升图片无障碍性
  3. 03防止图片在容器中变形

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jezweb/claude-skills --skill responsive-images

安装后在 Claude Code 中输入/responsive-images确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
.claude-plugin/
plugin.json
references/
aspect-ratio.md
lazy-loading.md
modern-formats.md
picture-element.md
srcset-sizes.md
rules/
responsive-images.md
templates/
image-component.tsx

详细介绍

响应式图像

状态：已投入生产 ✅ 最后更新：2026-01-14 标准：Web 性能最佳实践、Core Web Vitals

快速入门

基本响应式图像
<img
  src="/images/hero-800.jpg"
  srcset="
    /images/hero-400.jpg 400w,
    /images/hero-800.jpg 800w,
    /images/hero-1200.jpg 1200w,
    /images/hero-1600.jpg 1600w
  "
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 90vw,
         1200px"
  alt="Hero image description"
  width="1200"
  height="675"
  loading="lazy"
/>
主视觉图像（LCP）
<img
  src="/images/hero-1200.jpg"
  srcset="
    /images/hero-800.jpg 800w,
    /images/hero-1200.jpg 1200w,
    /images/hero-1600.jpg 1600w
  "
  sizes="100vw"
  alt="Hero image"
  width="1600"
  height="900"
  loading="eager"
  fetchpriority="high"
/>

配置

推荐图像尺寸
用例要生成的宽度Sizes 属性
全宽主视觉800w、1200w、1600w、2400w100vw
内容宽度400w、800w、1200w(max-width: 768px) 100vw, 800px
网格卡片（3 列）300w、600w、900w(max-width: 768px) 100vw, 33vw
侧边栏缩略图150w、300w150px
延迟加载规则
图像位置loadingfetchpriority原因
主视觉/LCPeagerhigh优化 LCP，优先下载
首屏内（非 LCP）eager省略正常加载
首屏外lazy省略延迟加载，直到接近视口
屏幕外轮播lazy省略延迟加载，直到交互发生

常见模式

全宽响应式图像
<img
  src="/images/banner-1200.jpg"
  srcset="
    /images/banner-600.jpg 600w,
    /images/banner-1200.jpg 1200w,
    /images/banner-1800.jpg 1800w,
    /images/banner-2400.jpg 2400w
  "
  sizes="100vw"
  alt="Full width banner"
  width="2400"
  height="800"
  loading="lazy"
  class="w-full h-auto"
/>
网格卡片图像（3 列）
<img
  src="/images/card-600.jpg"
  srcset="
    /images/card-300.jpg 300w,
    /images/card-600.jpg 600w,
    /images/card-900.jpg 900w
  "
  sizes="(max-width: 768px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  alt="Card image"
  width="900"
  height="600"
  loading="lazy"
  class="w-full h-auto"
/>
固定宽高比容器
<div class="aspect-[16/9] overflow-hidden">
  <img
    src="/images/video-thumbnail-800.jpg"
    srcset="
      /images/video-thumbnail-400.jpg 400w,
      /images/video-thumbnail-800.jpg 800w,
      /images/video-thumbnail-1200.jpg 1200w
    "
    sizes="(max-width: 768px) 100vw, 800px"
    alt="Video thumbnail"
    width="800"
    height="450"
    loading="lazy"
    class="w-full h-full object-cover"
  />
</div>
现代格式（WebP + AVIF）
<picture>
  <source
    srcset="
      /images/hero-800.avif 800w,
      /images/hero-1200.avif 1200w,
      /images/hero-1600.avif 1600w
    "
    sizes="100vw"
    type="image/avif"
  />
  <source
    srcset="
      /images/hero-800.webp 800w,
      /images/hero-1200.webp 1200w,
      /images/hero-1600.webp 1600w
    "
    sizes="100vw"
    type="image/webp"
  />
  <img
    src="/images/hero-1200.jpg"
    srcset="
      /images/hero-800.jpg 800w,
      /images/hero-1200.jpg 1200w,
      /images/hero-1600.jpg 1600w
    "
    sizes="100vw"
    alt="Hero image"
    width="1600"
    height="900"
    loading="eager"
    fetchpriority="high"
  />
</picture>
艺术指导（不同裁剪）
<picture>
  <source
    media="(max-width: 640px)"
    srcset="
      /images/product-portrait-400.jpg 400w,
      /images/product-portrait-800.jpg 800w
    "
    sizes="100vw"
  />
  <source
    media="(min-width: 641px)"
    srcset="
      /images/product-landscape-800.jpg 800w,
      /images/product-landscape-1200.jpg 1200w,
      /images/product-landscape-1600.jpg 1600w
    "
    sizes="(max-width: 1024px) 90vw, 1200px"
  />
  <img
    src="/images/product-landscape-1200.jpg"
    alt="Product image"
    width="1200"
    height="675"
    loading="lazy"
  />
</picture>

防止错误

始终包含宽度和高度

问题：图像加载时发生布局偏移（CLS 得分较差）


<img src="/image.jpg" alt="Image" loading="lazy" />


<img
  src="/image.jpg"
  alt="Image"
  width="800"
  height="600"
  loading="lazy"
/>

来源：Web.dev - 优化 CLS

不要对 LCP 图像进行延迟加载

问题：LCP 延迟，Core Web Vitals 得分较差


<img
  src="/hero.jpg"
  alt="Hero"
  loading="lazy"
/>


<img
  src="/hero.jpg"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
/>

来源：Web.dev - 优化 LCP

使用宽度描述符（w），而非密度描述符（x）

问题：浏览器无法为视口选择最佳图像


<img
  src="/image.jpg"
  srcset="/image.jpg 1x, /[email protected] 2x"
  alt="Image"
/>


<img
  src="/image-800.jpg"
  srcset="
    /image-400.jpg 400w,
    /image-800.jpg 800w,
    /image-1200.jpg 1200w
  "
  sizes="(max-width: 768px) 100vw, 800px"
  alt="Image"
  width="800"
  height="600"
/>

例外：对于 Logo 等固定尺寸图像，密度描述符是合适的。

始终包含 Alt 文本

问题：无法满足无障碍、SEO 和屏幕阅读器要求


<img src="/product.jpg" />


<img src="/product.jpg" alt="Red leather messenger bag with brass buckles" />


<img src="/decorative-line.svg" alt="" role="presentation" />
使用 object-fit 设置宽高比

问题：容器尺寸与图像尺寸不同时，图像会被拉伸或压扁


<div class="w-full h-64">
  <img src="/image.jpg" alt="Image" class="w-full h-full" />
</div>


<div class="w-full h-64">
  <img
    src="/image.jpg"
    alt="Image"
    class="w-full h-full object-cover"
  />
</div>

快速参考

Sizes 属性模式

sizes="100vw"


sizes="(max-width: 768px) 100vw, 800px"


sizes="300px"


sizes="(max-width: 768px) 100vw, 50vw"


sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"


sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px"
常见宽高比
比例CSS用例
16:9aspect-[16/9]视频缩略图、主视觉图像
4:3aspect-[4/3]标准照片
3:2aspect-[3/2]DSLR 照片
1:1aspect-square个人资料图片、Instagram 风格图像
21:9aspect-[21/9]超宽横幅
object-fit 值
值效果用例
cover填满容器，裁剪边缘卡片图像、背景
contain适应容器内部，保留全部内容Logo、产品照片
fill拉伸以填满容器除非必要，否则避免使用
scale-down取 contain 与原始尺寸中较小者混合内容尺寸
格式对比
格式质量文件大小浏览器支持用例
JPEG良好中等100%照片、复杂图像
PNG无损大100%Logo、透明图像
WebP出色小97%+现代浏览器、照片
AVIF出色最小90%+前沿场景，需提供后备格式

推荐策略：使用 <picture> 按 AVIF → WebP → JPEG 的顺序提供后备格式

资源

Token 效率：通过避免在 srcset/sizes 语法上反复试错，节省约 70% 防止的错误：以上记录了 6 种常见响应式图像问题

评论

支持 Markdown