用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/BEKO2210/Firstbrain --skill seo-images命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Arquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.
Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
Ingeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
基于 SOC 职业分类
正在显示 SKILL.md
| name | seo-images |
| description | > |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | business-marketing |
| category | marketing |
| risk | safe |
| source | https://github.com/AgriciDaniel/claude-seo |
| tags | ["skill","business-marketing","marketing","seo","images"] |
<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>Use 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 sizessizes attribute matching layout breakpoints<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<!-- 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> elementsaspect-ratio CSS as alternative<!-- 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 |
|---|---|---|---|---|
| ... | ... | ... | ... | ... |
| Scenario | Action |
|---|---|
| URL unreachable | Report connection error with status code. Suggest verifying URL and checking if site requires authentication. |
| No images found on page | Report that no <img> elements were detected. Suggest checking if images are loaded via JavaScript or CSS background-image. |
| Images behind CDN or authentication | Note that image files could not be directly accessed for size analysis. Report available metadata (alt text, dimensions, format from markup) and flag inaccessible resources. |