Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/BEKO2210/Firstbrain --skill seo-imagesThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| 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. |