npx skills add https://github.com/agricidaniel/claude-seo --skill seo-images<img> 元素上均存在(装饰性图片除外:role="presentation")良好示例:
不良示例:
按图像类别分级的阈值:
| 图像类别 | 目标值 | 警告值 | 临界值 |
|---|---|---|---|
| 缩略图 | < 50KB | > 100KB |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| > 200KB |
| 内容图像 | < 100KB | > 200KB | > 500KB |
| 横幅/主图 | < 200KB | > 300KB | > 700KB |
建议在不损失质量的情况下尽可能压缩至目标阈值。
| 格式 | 浏览器支持率 | 使用场景 |
|---|---|---|
| WebP | 97%+ | 默认推荐 |
| AVIF | 92%+ | 最佳压缩,较新格式 |
| JPEG | 100% | 照片的备用格式 |
| PNG | 100% | 带透明度的图形 |
| SVG | 100% | 图标、徽标、插图 |
推荐使用 WebP/AVIF 而非 JPEG/PNG。检查是否使用带格式回退的 <picture> 元素。
<picture> 元素模式采用渐进增强策略,优先使用最高效的格式:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="描述性替代文本" width="800" height="600" loading="lazy" decoding="async">
</picture>
浏览器将使用第一个支持的格式。当前浏览器支持率:AVIF 93.8%,WebP 95.3%。
2025年11月,谷歌的 Chromium 团队推翻了其2022年的决定,宣布将使用基于 Rust 的解码器在 Chrome 中恢复对 JPEG XL 的支持。该实现功能完整但尚未进入 Chrome 稳定版。JPEG XL 提供无损 JPEG 重新压缩(零质量损失下节省约20%)和有竞争力的有损压缩。目前尚不适用于网页部署,但值得关注其未来的采用情况。
srcset 属性提供多种尺寸sizes 属性匹配布局断点<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="描述"
>
loading="lazy"<!-- 首屏以下 - 延迟加载 -->
<img src="photo.jpg" loading="lazy" alt="描述">
<!-- 首屏 - 立即加载(默认) -->
<img src="hero.jpg" alt="主图">
fetchpriority="high"为主图/LCP 图像添加 fetchpriority="high",以在浏览器的网络队列中优先下载:
<img src="hero.webp" fetchpriority="high" alt="主图描述" width="1200" height="630">
关键点: 切勿对首屏/LCP 图像进行延迟加载。在 LCP 图像上使用 loading="lazy" 会直接损害 LCP 分数。仅对首屏以下的图像使用 loading="lazy"。
decoding="async"为非 LCP 图像添加 decoding="async",以防止图像解码阻塞主线程:
<img src="photo.webp" alt="描述" width="600" height="400" loading="lazy" decoding="async">
<img> 元素上设置 width 和 height 属性aspect-ratio CSS 作为替代方案<!-- 良好 - 设置了尺寸 -->
<img src="photo.jpg" width="800" height="600" alt="描述">
<!-- 良好 - CSS 宽高比 -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="描述">
<!-- 不良 - 无尺寸 -->
<img src="photo.jpg" alt="描述">
blue-running-shoes.webp 而非 IMG_1234.jpg| 指标 | 状态 | 数量 |
|---|---|---|
| 图像总数 | - | XX |
| 缺失替代文本 | ❌ | XX |
| 尺寸过大 (>200KB) | ⚠️ | XX |
| 格式错误 | ⚠️ | XX |
| 无尺寸信息 | ⚠️ | XX |
| 未延迟加载 | ⚠️ | XX |
按文件大小影响排序(节省空间最大的优先):
| 图像 | 当前大小 | 格式 | 问题 | 预计节省 |
|---|---|---|---|---|
| ... | ... | ... | ... | ... |
每周安装量
133
代码仓库
GitHub 星标数
2.2K
首次出现
2026年2月19日
安全审计
安装于
codex126
github-copilot125
opencode125
gemini-cli124
cursor124
kimi-cli123
<img> elements (except decorative: role="presentation")Good examples:
Bad examples:
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.
| 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.
<picture> Element PatternUse progressive enhancement with the most efficient format first:
<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%.
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.
srcset attribute for multiple sizes
sizes attribute matching layout breakpoints
Appropriate resolution for device pixel ratios
<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"
loading="lazy" on below-fold images
Do NOT lazy-load above-fold/hero images (hurts LCP)
Check for native vs JavaScript-based lazy loading
<!-- Below fold - lazy load --> <img src="photo.jpg" loading="lazy" alt="Description"> <!-- Above fold - eager load (default) --> <img src="hero.jpg" alt="Hero image">fetchpriority="high" for LCP ImagesAdd fetchpriority="high" to your hero/LCP image to prioritize its download in the browser's network queue:
<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.
decoding="async" for Non-LCP ImagesAdd decoding="async" to non-LCP images to prevent image decoding from blocking the main thread:
<img src="photo.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">
width and height attributes set on all <img> elements
aspect-ratio CSS as alternative
Flag images without dimensions
<!-- 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">blue-running-shoes.webp not IMG_1234.jpg| Metric | Status | Count |
|---|---|---|
| Total Images | - | XX |
| Missing Alt Text | ❌ | XX |
| Oversized (>200KB) | ⚠️ | XX |
| Wrong Format | ⚠️ | XX |
| No Dimensions | ⚠️ | XX |
| Not Lazy Loaded | ⚠️ | XX |
Sorted by file size impact (largest savings first):
| Image | Current Size | Format | Issues | Est. Savings |
|---|---|---|---|---|
| ... | ... | ... | ... | ... |
Weekly Installs
133
Repository
GitHub Stars
2.2K
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex126
github-copilot125
opencode125
gemini-cli124
cursor124
kimi-cli123
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装