seo-images

Name: seo-images
Author: AgriciDaniel

3.8kinstalls1.8kforks

How to install seo-images?

agricidaniel/claude-seo/seo-images

$npx -y skills add AgriciDaniel/claude-seo --skill seo-images

Installs into the current project.

Summary

Image optimization analysis for SEO and performance. Checks alt text, file sizes, formats, responsive images, lazy loading, CLS prevention, image SERP rankings (via DataForSEO), and image file optimization (WebP/AVIF conversion, IPTC/XMP metadata injection). Use when user says "i

Files · 1

View on GitHub

SKILL.md

1	# Image Optimization Analysis
2
3	## Checks
4
5	### Alt Text
6	- Present on all `<img>` elements (except decorative: `role="presentation"`)
7	- Descriptive: describes the image content, not "image.jpg" or "photo"
8	- Includes relevant keywords where natural, not keyword-stuffed
9	- Length: 10-125 characters
10
11	Good examples:
12	- "Professional plumber repairing kitchen sink faucet"
13	- "Red 2024 Toyota Camry sedan front view"
14	- "Team meeting in modern office conference room"
15
16	Bad examples:
17	- "image.jpg" (filename, not description)
18	- "plumber plumbing plumber services" (keyword stuffing)
19	- "Click here" (not descriptive)
20
21	### File Size
22
23	Tiered thresholds by image category:
24
25	\| Image Category \| Target \| Warning \| Critical \|
26	\|----------------\|--------\|---------\|----------\|
27	\| Thumbnails \| < 50KB \| > 100KB \| > 200KB \|
28	\| Content images \| < 100KB \| > 200KB \| > 500KB \|
29	\| Hero/banner images \| < 200KB \| > 300KB \| > 700KB \|
30
31	Recommend compression to target thresholds where possible without quality loss.
32
33	### Format
34	\| Format \| Browser Support \| Use Case \|
35	\|--------\|-----------------\|----------\|
36	\| WebP \| 97%+ \| Default recommendation \|
37	\| AVIF \| 92%+ \| Best compression, newer \|
38	\| JPEG \| 100% \| Fallback for photos \|
39	\| PNG \| 100% \| Graphics with transparency \|
40	\| SVG \| 100% \| Icons, logos, illustrations \|
41
42	Recommend WebP/AVIF over JPEG/PNG. Check for `<picture>` element with format fallbacks.
43
44	#### Recommended `<picture>` Element Pattern
45
46	Use progressive enhancement with the most efficient format first:
47
48	```html
49	<picture>
50	<source srcset="image.avif" type="image/avif">
51	<source srcset="image.webp" type="image/webp">
52	<img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
53	</picture>
54	```
55
56	The browser will use the first supported format. Current browser support: AVIF 93.8%, WebP 95.3%.
57
58	#### JPEG XL: Emerging Format
59
60	Third-party reporting and Wikipedia describe a Rust-based JPEG XL decoder as shipped in Chrome 145 stable (2026-02-10) behind the `chrome://flags/#enable-jxl-image-format` flag, not enabled by default; no Google-owned confirmation was retrieved in the fact pack. Because default support is not confirmed, it is not yet practical for production web delivery. Keep serving AVIF/WebP with JPEG fallback and monitor.
61
62	### Responsive Images
63	- `srcset` attribute for multiple sizes
64	- `sizes` attribute matching layout breakpoints
65	- Appropriate resolution for device pixel ratios
66
67	```html
68	<img
69	src="image-800.jpg"
70	srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
71	sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
72	alt="Description"
73	>
74	```
75
76	### Lazy Loading
77	- `loading="lazy"` on below-fold images
78	- Do NOT lazy-load above-fold/hero images (hurts LCP)
79	- Check for native vs JavaScript-based lazy loading
80
81	```html
82	<!-- Below fold - lazy load -->
83	<img src="photo.jpg" loading="lazy" alt="Description">
84
85	<!-- Above fold - eager load (default) -->
86	<img src="hero.jpg" alt="Hero image">
87	```
88
89	#### Detected lazy-loader methods (`lazy_method` field)
90
91	`scripts/parse_html.py` classifies each image's lazy-loading mechanism via the
92	`lazy_method` field on every image entry. Five values:
93
94	\| `lazy_method` \| Signal detected \| Common stack \|
95	\|---\|---\|---\|
96	\| `native` \| `loading="lazy"` HTML attribute \| Modern browsers, plain HTML \|
97	\| `perfmatters` \| `data-perfmatters-src`/`-srcset` OR class `perfmatters-lazy` \| WordPress + Perfmatters plugin \|
98	\| `ewww` \| `data-ewww-src` / `data-eio` OR class `lazyload-eio` \| WordPress + EWWW Image Optimizer \|
99	\| `js-generic` \| `data-src` / `data-lazy-src` / `data-original` / `data-srcset` OR class `lazyload`/`lazyloaded`/`lazy` \| Lazysizes, vanilla-lazyload, jQuery plugins \|
100	\| `none` \| Neither attribute nor class signal \| Page is not lazy-loading this image \|
101
102	When auditing image SEO, report `lazy_method` alongside `loading` so users know
103	whether their site is using a JS-driven lazy-loader (in which case the native
104	`loading="lazy"` attribute is intentionally absent, that is not a regression).
105
106	### `fetchpriority="high"` for LCP Images
107
108	Add `fetchpriority="high"` to your hero/LCP image to prioritize its download in the browser's network queue:
109
110	```html
111	<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">
112	```
113
114	Critical: Do NOT lazy-load above-the-fold/LCP images. Using `loadi

People who liked this also viewed

6 picks

Type

seo-images

3.8kinstalls1.8kforks

View on GitHub

How to install seo-images?

agricidaniel/claude-seo/seo-images

$npx -y skills add AgriciDaniel/claude-seo --skill seo-images

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Image Optimization Analysis
2
3	## Checks
4
5	### Alt Text
6	- Present on all `<img>` elements (except decorative: `role="presentation"`)
7	- Descriptive: describes the image content, not "image.jpg" or "photo"
8	- Includes relevant keywords where natural, not keyword-stuffed
9	- Length: 10-125 characters
10
11	Good examples:
12	- "Professional plumber repairing kitchen sink faucet"
13	- "Red 2024 Toyota Camry sedan front view"
14	- "Team meeting in modern office conference room"
15
16	Bad examples:
17	- "image.jpg" (filename, not description)
18	- "plumber plumbing plumber services" (keyword stuffing)
19	- "Click here" (not descriptive)
20
21	### File Size
22
23	Tiered thresholds by image category:
24
25	\| Image Category \| Target \| Warning \| Critical \|
26	\|----------------\|--------\|---------\|----------\|
27	\| Thumbnails \| < 50KB \| > 100KB \| > 200KB \|
28	\| Content images \| < 100KB \| > 200KB \| > 500KB \|
29	\| Hero/banner images \| < 200KB \| > 300KB \| > 700KB \|
30
31	Recommend compression to target thresholds where possible without quality loss.
32
33	### Format
34	\| Format \| Browser Support \| Use Case \|
35	\|--------\|-----------------\|----------\|
36	\| WebP \| 97%+ \| Default recommendation \|
37	\| AVIF \| 92%+ \| Best compression, newer \|
38	\| JPEG \| 100% \| Fallback for photos \|
39	\| PNG \| 100% \| Graphics with transparency \|
40	\| SVG \| 100% \| Icons, logos, illustrations \|
41
42	Recommend WebP/AVIF over JPEG/PNG. Check for `<picture>` element with format fallbacks.
43
44	#### Recommended `<picture>` Element Pattern
45
46	Use progressive enhancement with the most efficient format first:
47
48	```html
49	<picture>
50	<source srcset="image.avif" type="image/avif">
51	<source srcset="image.webp" type="image/webp">
52	<img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
53	</picture>
54	```
55
56	The browser will use the first supported format. Current browser support: AVIF 93.8%, WebP 95.3%.
57
58	#### JPEG XL: Emerging Format
59
60	Third-party reporting and Wikipedia describe a Rust-based JPEG XL decoder as shipped in Chrome 145 stable (2026-02-10) behind the `chrome://flags/#enable-jxl-image-format` flag, not enabled by default; no Google-owned confirmation was retrieved in the fact pack. Because default support is not confirmed, it is not yet practical for production web delivery. Keep serving AVIF/WebP with JPEG fallback and monitor.
61
62	### Responsive Images
63	- `srcset` attribute for multiple sizes
64	- `sizes` attribute matching layout breakpoints
65	- Appropriate resolution for device pixel ratios
66
67	```html
68	<img
69	src="image-800.jpg"
70	srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
71	sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
72	alt="Description"
73	>
74	```
75
76	### Lazy Loading
77	- `loading="lazy"` on below-fold images
78	- Do NOT lazy-load above-fold/hero images (hurts LCP)
79	- Check for native vs JavaScript-based lazy loading
80
81	```html
82	<!-- Below fold - lazy load -->
83	<img src="photo.jpg" loading="lazy" alt="Description">
84
85	<!-- Above fold - eager load (default) -->
86	<img src="hero.jpg" alt="Hero image">
87	```
88
89	#### Detected lazy-loader methods (`lazy_method` field)
90
91	`scripts/parse_html.py` classifies each image's lazy-loading mechanism via the
92	`lazy_method` field on every image entry. Five values:
93
94	\| `lazy_method` \| Signal detected \| Common stack \|
95	\|---\|---\|---\|
96	\| `native` \| `loading="lazy"` HTML attribute \| Modern browsers, plain HTML \|
97	\| `perfmatters` \| `data-perfmatters-src`/`-srcset` OR class `perfmatters-lazy` \| WordPress + Perfmatters plugin \|
98	\| `ewww` \| `data-ewww-src` / `data-eio` OR class `lazyload-eio` \| WordPress + EWWW Image Optimizer \|
99	\| `js-generic` \| `data-src` / `data-lazy-src` / `data-original` / `data-srcset` OR class `lazyload`/`lazyloaded`/`lazy` \| Lazysizes, vanilla-lazyload, jQuery plugins \|
100	\| `none` \| Neither attribute nor class signal \| Page is not lazy-loading this image \|
101
102	When auditing image SEO, report `lazy_method` alongside `loading` so users know
103	whether their site is using a JS-driven lazy-loader (in which case the native
104	`loading="lazy"` attribute is intentionally absent, that is not a regression).
105
106	### `fetchpriority="high"` for LCP Images
107
108	Add `fetchpriority="high"` to your hero/LCP image to prioritize its download in the browser's network queue:
109
110	```html
111	<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">
112	```
113
114	Critical: Do NOT lazy-load above-the-fold/LCP images. Using `loadi

People who liked this also viewed

6 picks

Type