seo-images

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Image Optimization Analysis

图片优化分析

Checks

检查项

Alt Text

替代文本（Alt Text）

Present on all
```
<img>
```
elements (except decorative:
```
role="presentation"
```
)
Descriptive: describes the image content, not "image.jpg" or "photo"
Includes relevant keywords where natural, not keyword-stuffed
Length: 10-125 characters

Good examples:

"Professional plumber repairing kitchen sink faucet"
"Red 2024 Toyota Camry sedan front view"
"Team meeting in modern office conference room"

Bad examples:

"image.jpg" (filename, not description)
"plumber plumbing plumber services" (keyword stuffing)
"Click here" (not descriptive)

所有
```
<img>
```
元素均需包含（装饰性图片除外：需设置
```
role="presentation"
```
）
具备描述性：需描述图片内容，而非“image.jpg”或“photo”这类文件名
自然融入相关关键词，避免关键词堆砌
长度：10-125个字符

正面示例：

"专业水管工维修厨房水槽水龙头"
"2024款红色丰田凯美瑞轿车正面视图"
"现代办公室会议室中的团队会议场景"

负面示例：

"image.jpg"（仅文件名，无描述性）
"plumber plumbing plumber services"（关键词堆砌）
"点击此处"（无描述性）

File Size

文件大小

Tiered thresholds by image category:

Image Category	Target	Warning	Critical
Thumbnails	< 50KB	> 100KB	> 200KB
Content images	< 100KB	> 200KB	> 500KB
Hero/banner images	< 200KB	> 300KB	> 700KB

Recommend compression to target thresholds where possible without quality loss.

按图片类别划分的分层阈值：

图片类别	目标值	警告阈值	严重阈值
缩略图	< 50KB	> 100KB	> 200KB
内容图片	< 100KB	> 200KB	> 500KB
首屏/横幅图片	< 200KB	> 300KB	> 700KB

建议在不损失画质的前提下，将图片压缩至目标阈值。

Format

格式

Format	Browser Support	Use Case
WebP	97%+	Default recommendation
AVIF	92%+	Best compression, newer
JPEG	100%	Fallback for photos
PNG	100%	Graphics with transparency
SVG	100%	Icons, logos, illustrations

Recommend WebP/AVIF over JPEG/PNG. Check for

<picture>

element with format fallbacks.

格式	浏览器支持率	使用场景
WebP	97%+	首选推荐格式
AVIF	92%+	压缩效率最优，较新格式
JPEG	100%	照片类图片的兼容 fallback
PNG	100%	带透明通道的图形
SVG	100%	图标、标志、插画

推荐使用WebP/AVIF替代JPEG/PNG。检查是否使用

<picture>

元素配置格式降级方案。

Recommended

<picture>

Element Pattern

推荐的

<picture>

元素写法

Use progressive enhancement with the most efficient format first:

html

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
</picture>

The browser will use the first supported format. Current browser support: AVIF 93.8%, WebP 95.3%.

采用渐进增强策略，优先使用最高效的格式：

html

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
</picture>

浏览器会优先选择第一个支持的格式。当前浏览器支持率：AVIF 93.8%，WebP 95.3%。

JPEG XL — Emerging Format

JPEG XL — 新兴格式

In November 2025, Google's Chromium team reversed its 2022 decision and announced it will restore JPEG XL support in Chrome using a Rust-based decoder. The implementation is feature-complete but not yet in Chrome stable. JPEG XL offers lossless JPEG recompression (~20% savings with zero quality loss) and competitive lossy compression. Not yet practical for web deployment, but worth monitoring for future adoption.

2025年11月，谷歌Chromium团队推翻了2022年的决定，宣布将使用基于Rust的解码器恢复Chrome对JPEG XL的支持。该实现已功能完备，但尚未推送至Chrome稳定版。JPEG XL支持无损JPEG重压缩（零画质损失下约节省20%体积），且有损压缩表现优异。目前暂不适合用于网页部署，但值得关注其未来的普及情况。

Responsive Images

响应式图片

```
srcset
```
attribute for multiple sizes
```
sizes
```
attribute matching layout breakpoints
Appropriate resolution for device pixel ratios

html

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description"
>

为多尺寸图片配置
```
srcset
```
属性
```
sizes
```
属性需匹配布局断点
根据设备像素比选择合适的分辨率

html

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description"
>

Lazy Loading

懒加载

```
loading="lazy"
```
on below-fold images
Do NOT lazy-load above-fold/hero images (hurts LCP)
Check for native vs JavaScript-based lazy loading

html

<!-- Below fold - lazy load -->
<img src="photo.jpg" loading="lazy" alt="Description">

<!-- Above fold - eager load (default) -->
<img src="hero.jpg" alt="Hero image">

对首屏以下的图片设置
```
loading="lazy"
```
请勿对首屏/首屏英雄图启用懒加载（会损害LCP指标）
检查是使用原生懒加载还是基于JavaScript的懒加载

html

<!-- 首屏以下 - 启用懒加载 -->
<img src="photo.jpg" loading="lazy" alt="Description">

<!-- 首屏 - 立即加载（默认行为） -->
<img src="hero.jpg" alt="Hero image">

fetchpriority="high"

for LCP Images

为LCP图片设置

fetchpriority="high"

Add

fetchpriority="high"

to your hero/LCP image to prioritize its download in the browser's network queue:

html

<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">

Critical: Do NOT lazy-load above-the-fold/LCP images. Using

loading="lazy"

on LCP images directly harms LCP scores. Reserve

loading="lazy"

for below-the-fold images only.

为你的英雄图/LCP图片添加

fetchpriority="high"

，以在浏览器的网络队列中优先下载该图片：

html

<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">

重点注意： 请勿对首屏/LCP图片启用懒加载。在LCP图片上使用

loading="lazy"

会直接降低LCP分数。仅对首屏以下的图片保留

loading="lazy"

设置。

decoding="async"

for Non-LCP Images

为非LCP图片设置

decoding="async"

Add

decoding="async"

to non-LCP images to prevent image decoding from blocking the main thread:

html

<img src="photo.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">

为非LCP图片添加

decoding="async"

，以避免图片解码阻塞主线程：

html

<img src="photo.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">

CLS Prevention

CLS预防

```
width
```
and
```
height
```
attributes set on all
```
<img>
```
elements
```
aspect-ratio
```
CSS as alternative
Flag images without dimensions

html

<!-- Good - dimensions set -->
<img src="photo.jpg" width="800" height="600" alt="Description">

<!-- Good - CSS aspect ratio -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">

<!-- Bad - no dimensions -->
<img src="photo.jpg" alt="Description">

所有
```
<img>
```
元素均需设置
```
width
```
和
```
height
```
属性
可使用CSS的
```
aspect-ratio
```
作为替代方案
标记未设置尺寸的图片

html

<!-- 规范写法 - 设置尺寸 -->
<img src="photo.jpg" width="800" height="600" alt="Description">

<!-- 规范写法 - 使用CSS宽高比 -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">

<!-- 不规范写法 - 未设置尺寸 -->
<img src="photo.jpg" alt="Description">

File Names

文件名

Descriptive:
```
blue-running-shoes.webp
```
not
```
IMG_1234.jpg
```
Hyphenated, lowercase, no special characters
Include relevant keywords

具备描述性：使用
```
blue-running-shoes.webp
```
而非
```
IMG_1234.jpg
```
使用连字符分隔、全小写，无特殊字符
包含相关关键词

CDN Usage

CDN使用

Check if images served from CDN (different domain, CDN headers)
Recommend CDN for image-heavy sites
Check for edge caching headers

检查图片是否通过CDN分发（不同域名、CDN响应头）
建议图片密集型网站使用CDN
检查边缘缓存头

Output

输出

Image Audit Summary

图片审计摘要

Metric	Status	Count
Total Images	-	XX
Missing Alt Text	❌	XX
Oversized (>200KB)	⚠️	XX
Wrong Format	⚠️	XX
No Dimensions	⚠️	XX
Not Lazy Loaded	⚠️	XX

指标	状态	数量
图片总数	-	XX
缺失替代文本	❌	XX
体积过大(>200KB)	⚠️	XX
格式不规范	⚠️	XX
未设置尺寸	⚠️	XX
未启用懒加载	⚠️	XX

Prioritized Optimization List

优先级优化列表

Sorted by file size impact (largest savings first):

Image	Current Size	Format	Issues	Est. Savings
...	...	...	...	...

按文件体积影响排序（节省空间从大到小）：

图片	当前体积	格式	问题点	预估节省空间
...	...	...	...	...

Recommendations

建议

Convert X images to WebP format (est. XX KB savings)
Add alt text to X images
Add dimensions to X images
Enable lazy loading on X below-fold images
Compress X oversized images

将X张图片转换为WebP格式（预估节省XX KB空间）
为X张图片添加替代文本
为X张图片设置尺寸
为X张首屏以下的图片启用懒加载
压缩X张体积过大的图片

seo-images

Original

Translation

Image Optimization Analysis

图片优化分析

Checks

检查项

Alt Text

替代文本（Alt Text）

File Size

文件大小

Format

格式

Recommended
`<picture>`
Element Pattern

推荐的
`<picture>`
元素写法

JPEG XL — Emerging Format

JPEG XL — 新兴格式

Responsive Images

响应式图片

Lazy Loading

懒加载

`fetchpriority="high"`
for LCP Images

为LCP图片设置
`fetchpriority="high"`

`decoding="async"`
for Non-LCP Images

为非LCP图片设置
`decoding="async"`

CLS Prevention

CLS预防

File Names

文件名

CDN Usage

CDN使用

Output

输出

Image Audit Summary

图片审计摘要

Prioritized Optimization List

优先级优化列表

Recommendations

建议

seo-images

Original

Translation

Image Optimization Analysis

图片优化分析

Checks

检查项

Alt Text

替代文本（Alt Text）

File Size

文件大小

Format

格式

Recommended <picture> Element Pattern

推荐的<picture>元素写法

JPEG XL — Emerging Format

JPEG XL — 新兴格式

Responsive Images

响应式图片

Lazy Loading

懒加载

fetchpriority="high" for LCP Images

为LCP图片设置fetchpriority="high"

decoding="async" for Non-LCP Images

为非LCP图片设置decoding="async"

CLS Prevention

CLS预防

File Names

文件名

CDN Usage

CDN使用

Output

输出

Image Audit Summary

图片审计摘要

Prioritized Optimization List

优先级优化列表

Recommendations

建议

Recommended
`<picture>`
Element Pattern

推荐的
`<picture>`
元素写法

`fetchpriority="high"`
for LCP Images

为LCP图片设置
`fetchpriority="high"`

`decoding="async"`
for Non-LCP Images

为非LCP图片设置
`decoding="async"`