响应式图片最佳实践指南：优化LCP与Web性能的核心Web指标

responsive-images by jezweb/claude-skills

358 周安装量

670 GitHub Stars

GitHub

安装命令

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

开发性能优化用户体验

🇨🇳中文介绍

响应式图片

状态：生产就绪 ✅ 最后更新：2026-01-14 标准：Web 性能最佳实践，核心 Web 指标

快速开始

基础响应式图片

<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"
/>

配置

图片位置	loading	fetchpriority	原因
英雄图片/LCP	`eager`	`high`	优化 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"
/>

不要对 LCP 图片使用懒加载

问题：延迟 LCP，核心 Web 指标分数差

<!-- ❌ 错误 - 延迟 LCP -->
<img
  src="/hero.jpg"
  alt="Hero"
  loading="lazy"
/>

<!-- ✅ 正确 - 优先处理 LCP -->
<img
  src="/hero.jpg"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
/>

使用宽度描述符 (w)，而非密度描述符 (x)

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

<!-- ❌ 错误 - 仅考虑 DPR -->
<img
  src="/image.jpg"
  srcset="/image.jpg 1x, /image@2x.jpg 2x"
  alt="Image"
/>

<!-- ✅ 正确 - 考虑视口 + DPR -->
<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"
/>

例外：密度描述符适用于固定尺寸的图片，如徽标。

始终包含替代文本

问题：无法满足可访问性、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="100vw"

<!-- 内容宽度 (最大 800px) -->
sizes="(max-width: 768px) 100vw, 800px"

<!-- 侧边栏 (固定 300px) -->
sizes="300px"

<!-- 2列网格 -->
sizes="(max-width: 768px) 100vw, 50vw"

<!-- 3列网格 -->
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"

<!-- 带最大宽度的响应式 -->
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px"

比例	CSS	使用场景
16:9	`aspect-[16/9]`	视频缩略图，英雄图片
4:3	`aspect-[4/3]`	标准照片
3:2	`aspect-[3/2]`	DSLR 照片
1:1	`aspect-square`	个人资料图片，Instagram 风格
21:9	`aspect-[21/9]`	超宽横幅

值	行为	使用场景
`cover`	填充容器，裁剪边缘	卡片图片，背景
`contain`	适应内部，保留所有内容	徽标，产品照片
`fill`	拉伸以填充	除非必要，否则避免使用
`scale-down`	`contain` 或原始尺寸中较小的一个	混合内容尺寸

格式	质量	文件大小	浏览器支持	使用场景
JPEG	良好	中等	100%	照片，复杂图片
PNG	无损	大	100%	徽标，透明度
WebP	优秀	小	97%+	现代浏览器，照片
AVIF	优秀	最小	90%+	尖端技术，需要回退方案

推荐策略：使用 <picture> 实现 AVIF → WebP → JPEG 回退

令牌效率：通过防止 srcset/sizes 语法的试错，节省约 70% 预防的错误：上述记录了 6 个常见的响应式图片问题

🇺🇸English

Responsive Images

Status : Production Ready ✅ Last Updated : 2026-01-14 Standards : Web Performance Best Practices, Core Web Vitals

Quick Start

Basic Responsive Image

<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"
/>

Hero Image (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"
/>

Configuration

Recommended Image Sizes

Use Case	Widths to Generate	Sizes Attribute
Full-width hero	800w, 1200w, 1600w, 2400w	`100vw`
Content width	400w, 800w, 1200w	`(max-width: 768px) 100vw, 800px`
Grid cards (3-col)	300w, 600w, 900w	`(max-width: 768px) 100vw, 33vw`
Sidebar thumbnail	150w, 300w	`150px`

Lazy Loading Rules

Image Position	loading	fetchpriority	Why
Hero/LCP	`eager`	`high`	Optimize LCP, prioritize download
Above fold (not LCP)	`eager`	omit	Load normally
Below fold	`lazy`	omit	Defer until near viewport
Off-screen carousel	`lazy`

Common Patterns

Full-Width Responsive Image

<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"
/>

Grid Card Image (3 columns)

<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"
/>

Fixed Aspect Ratio Container

<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>

Modern Formats (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>

Art Direction (Different Crops)

<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>

Error Prevention

Always Include Width and Height

Problem : Layout shift when images load (poor CLS score)

<!-- ❌ WRONG - causes layout shift -->
<img src="/image.jpg" alt="Image" loading="lazy" />

<!-- ✅ CORRECT - browser reserves space -->
<img
  src="/image.jpg"
  alt="Image"
  width="800"
  height="600"
  loading="lazy"
/>

Source : Web.dev - Optimize CLS

Don't Lazy Load LCP Images

Problem : Delayed LCP, poor Core Web Vitals score

<!-- ❌ WRONG - delays LCP -->
<img
  src="/hero.jpg"
  alt="Hero"
  loading="lazy"
/>

<!-- ✅ CORRECT - prioritizes LCP -->
<img
  src="/hero.jpg"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
/>

Source : Web.dev - Optimize LCP

Use Width Descriptors (w), Not Density (x)

Problem : Browser can't choose optimal image for viewport

<!-- ❌ WRONG - only considers DPR -->
<img
  src="/image.jpg"
  srcset="/image.jpg 1x, /image@2x.jpg 2x"
  alt="Image"
/>

<!-- ✅ CORRECT - considers viewport + DPR -->
<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"
/>

Exception : Density descriptors are appropriate for fixed-size images like logos.

Always Include Alt Text

Problem : Fails accessibility, SEO, and screen readers

<!-- ❌ WRONG -->
<img src="/product.jpg" />

<!-- ✅ CORRECT - descriptive alt text -->
<img src="/product.jpg" alt="Red leather messenger bag with brass buckles" />

<!-- ✅ CORRECT - decorative images use empty alt -->
<img src="/decorative-line.svg" alt="" role="presentation" />

Aspect Ratio with object-fit

Problem : Image stretches or squashes when container size differs from image dimensions

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

<!-- ✅ CORRECT - maintains aspect ratio -->
<div class="w-full h-64">
  <img
    src="/image.jpg"
    alt="Image"
    class="w-full h-full object-cover"
  />
</div>

Quick Reference

Sizes Attribute Patterns

<!-- Full width -->
sizes="100vw"

<!-- Content width (max 800px) -->
sizes="(max-width: 768px) 100vw, 800px"

<!-- Sidebar (fixed 300px) -->
sizes="300px"

<!-- 2-column grid -->
sizes="(max-width: 768px) 100vw, 50vw"

<!-- 3-column grid -->
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"

<!-- Responsive with max-width -->
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px"

Common Aspect Ratios

Ratio	CSS	Use Case
16:9	`aspect-[16/9]`	Video thumbnails, hero images
4:3	`aspect-[4/3]`	Standard photos
3:2	`aspect-[3/2]`	DSLR photos
1:1	`aspect-square`	Profile pictures, Instagram-style
21:9	`aspect-[21/9]`	Ultrawide banners

object-fit Values

Value	Behavior	Use Case
`cover`	Fill container, crop edges	Card images, backgrounds
`contain`	Fit inside, preserve all content	Logos, product photos
`fill`	Stretch to fill	Avoid unless necessary
`scale-down`	Smaller of `contain` or original size	Mixed content sizes

Format Comparison

Format	Quality	File Size	Browser Support	Use Case
JPEG	Good	Medium	100%	Photos, complex images
PNG	Lossless	Large	100%	Logos, transparency
WebP	Excellent	Small	97%+	Modern browsers, photos
AVIF	Excellent	Smallest	90%+	Cutting-edge, fallback required

Recommended Strategy : AVIF → WebP → JPEG fallback using <picture>

Resources

Token Efficiency : ~70% savings by preventing trial-and-error with srcset/sizes syntax Errors Prevented : 6 common responsive image issues documented above

Weekly Installs

358

Repository

jezweb/claude-skills

GitHub Stars

652

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code284

opencode236

gemini-cli235

cursor212

codex209

antigravity207

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

106,200 周安装

全宽英雄图片	800w, 1200w, 1600w, 2400w	`100vw`
内容宽度	400w, 800w, 1200w	`(max-width: 768px) 100vw, 800px`
网格卡片 (3列)	300w, 600w, 900w	`(max-width: 768px) 100vw, 33vw`
侧边栏缩略图	150w, 300w	`150px`