responsive-images

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Responsive Images

响应式图片

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

状态：已就绪可用于生产环境 ✅ 最后更新：2026-01-14 遵循标准：Web性能最佳实践、Core Web Vitals

Quick Start

快速开始

Basic Responsive Image

基础响应式图片

html

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

html

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

首屏英雄图（LCP）

html

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

html

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

使用场景	需生成的宽度	sizes属性值
全屏英雄图	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`

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`	omit	Defer until interaction

图片位置	loading属性	fetchpriority属性	原因
首屏英雄图/LCP	`eager`	`high`	优化LCP，优先下载
首屏非LCP图片	`eager`	省略	正常加载
首屏以下图片	`lazy`	省略	进入视口附近再加载
屏幕外轮播图	`lazy`	省略	交互时再加载

Common Patterns

常见实现模式

Full-Width Responsive Image

全屏响应式图片

html

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

html

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

网格卡片图片（3列）

html

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

html

<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

固定宽高比容器

html

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

html

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

现代图片格式（WebP + AVIF）

html

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

html

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

艺术方向（不同裁剪方式）

html

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

html

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

html

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

问题：图片加载时出现布局偏移（导致CLS分数不佳）

html

<!-- ❌ 错误 - 会导致布局偏移 -->
<img src="/image.jpg" alt="Image" loading="lazy" />

<!-- ✅ 正确 - 浏览器会预留空间 -->
<img
  src="/image.jpg"
  alt="Image"
  width="800"
  height="600"
  loading="lazy"
/>

来源：Web.dev - Optimize CLS

Don't Lazy Load LCP Images

不要对LCP图片使用懒加载

Problem: Delayed LCP, poor Core Web Vitals score

html

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

问题：延迟LCP加载，导致Core Web Vitals分数不佳

html

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

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

来源：Web.dev - Optimize LCP

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

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

Problem: Browser can't choose optimal image for viewport

html

<!-- ❌ 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.

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

html

<!-- ❌ 错误 - 仅考虑设备像素比 -->
<img
  src="/image.jpg"
  srcset="/image.jpg 1x, /image@2x.jpg 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。

Always Include Alt Text

始终添加替代文本（Alt Text）

Problem: Fails accessibility, SEO, and screen readers

html

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

问题：不符合无障碍要求，影响SEO和屏幕阅读器使用

html

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

<!-- ✅ 正确 - 描述性替代文本 -->
<img src="/product.jpg" alt="带有黄铜搭扣的红色皮革邮差包" />

<!-- ✅ 正确 - 装饰性图片使用空替代文本 -->
<img src="/decorative-line.svg" alt="" role="presentation" />

Aspect Ratio with object-fit

使用object-fit保持宽高比

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

html

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

问题：容器尺寸与图片尺寸不同时，图片会拉伸或挤压变形

html

<!-- ❌ 错误 - 图片变形 -->
<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>

Quick Reference

快速参考

Sizes Attribute Patterns

sizes属性常见模式

html

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

html

<!-- 全屏 -->
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"

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

比例	CSS写法	适用场景
16:9	`aspect-[16/9]`	视频缩略图、英雄图
4:3	`aspect-[4/3]`	标准照片
3:2	`aspect-[3/2]`	单反相机照片
1:1	`aspect-square`	头像、Instagram风格图片
21:9	`aspect-[21/9]`	超宽横幅

object-fit Values

object-fit属性值说明

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

属性值	行为	适用场景
`cover`	填充容器，裁剪边缘	卡片图片、背景图
`contain`	完整适配容器，保留所有内容	Logo、产品照片
`fill`	拉伸填充容器	除非必要否则避免使用
`scale-down`	取contain或原尺寸中较小的那个	混合尺寸内容

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>

格式	画质	文件大小	浏览器支持度	适用场景
JPEG	良好	中等	100%	照片、复杂图片
PNG	无损	较大	100%	Logo、透明图片
WebP	优秀	较小	97%+	现代浏览器、照片
AVIF	优秀	最小	90%+	前沿技术，需提供降级方案

推荐策略：使用

<picture>

标签实现AVIF → WebP → JPEG的降级方案

Resources

参考资源

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

令牌效率：通过避免srcset/sizes语法的试错，可节省约70%的时间 预防的错误：上文记录的6种常见响应式图片问题

responsive-images

Original

Translation

Responsive Images

响应式图片

Quick Start

快速开始

Basic Responsive Image

基础响应式图片

Hero Image (LCP)

首屏英雄图（LCP）

Configuration

配置说明

Recommended Image Sizes

推荐图片尺寸

Lazy Loading Rules

懒加载规则

Common Patterns

常见实现模式

Full-Width Responsive Image

全屏响应式图片

Grid Card Image (3 columns)

网格卡片图片（3列）

Fixed Aspect Ratio Container

固定宽高比容器

Modern Formats (WebP + AVIF)

现代图片格式（WebP + AVIF）

Art Direction (Different Crops)

艺术方向（不同裁剪方式）

Error Prevention

错误预防

Always Include Width and Height

始终添加宽度和高度属性

Don't Lazy Load LCP Images

不要对LCP图片使用懒加载

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

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

Always Include Alt Text

始终添加替代文本（Alt Text）

Aspect Ratio with object-fit

使用object-fit保持宽高比

Quick Reference

快速参考

Sizes Attribute Patterns

sizes属性常见模式

Common Aspect Ratios

常见宽高比

object-fit Values

object-fit属性值说明

Format Comparison

图片格式对比

Resources

参考资源