check-images
Analyze and validate images on web pages. Use when users ask to check image alt tags, verify image accessibility, find missing alt attributes, audit image SEO, or check image optimization. Detects missing alt, empty alt, decorative images without proper markup, oversized images, and missing dimensions.
When & Why to Use This Skill
The Check Images skill is a specialized web auditing tool designed to enhance website SEO and accessibility by analyzing image attributes. It automatically identifies critical issues such as missing or generic alt text, lack of image dimensions (which impacts Cumulative Layout Shift), and missing lazy-loading attributes. By ensuring all images are properly optimized and compliant with WCAG standards, this skill helps improve search engine rankings and provides a better user experience for visually impaired visitors.
Use Cases
- SEO Auditing: Scan high-traffic landing pages to find and fix missing alt tags, ensuring all visual content is discoverable by search engine crawlers.
- Accessibility Compliance: Perform automated checks to verify that informative images have descriptive text while decorative images are correctly marked, meeting A11y standards.
- Performance & UX Optimization: Identify images lacking width and height attributes to prevent layout shifts and detect large images that need lazy-loading to improve page load speed.
- Content Quality Assurance: Audit generic alt text (e.g., 'image.jpg' or 'photo') to ensure high-quality, context-aware descriptions are used across the site.
| name | check-images |
|---|---|
| description | Analyze and validate images on web pages. Use when users ask to check image alt tags, verify image accessibility, find missing alt attributes, audit image SEO, or check image optimization. Detects missing alt, empty alt, decorative images without proper markup, oversized images, and missing dimensions. |
Check Images
Analyze and validate images on web pages for accessibility and SEO compliance.
Quick Start
cd /path/to/html-checker/scripts
bun src/check-images.ts <URL>
CLI Options
| Option | Short | Default | Description |
|---|---|---|---|
--verbose |
-v |
false | Show all images including valid ones |
--json |
-j |
false | Output results as JSON |
Checks Performed
| Check | Severity | Description |
|---|---|---|
| Missing alt | Error | Image has no alt attribute |
| Empty alt | Warning | Image has alt="" (verify if decorative) |
| Generic alt | Warning | Alt text like "image", "photo", "picture" |
| Long alt | Info | Alt text exceeds 125 characters |
| Missing dimensions | Warning | No width/height attributes (CLS risk) |
| No lazy loading | Info | Large images without loading="lazy" |
Usage Examples
# Basic check
bun src/check-images.ts https://example.com
# Verbose output
bun src/check-images.ts https://example.com --verbose
# JSON output
bun src/check-images.ts https://example.com --json
Output Example
Image Analysis for https://example.com
Summary:
Total Images: 25
With alt: 20
Missing alt: 3
Empty alt: 2
Issues Found: 5
[ERROR ] Missing alt at position 5
<img src="/hero.jpg">
[WARNING] Empty alt at position 12
<img src="/divider.png" alt="">
[WARNING] Generic alt at position 18
<img src="/team.jpg" alt="image">
Recommendations:
- Add descriptive alt text to all informative images
- Use alt="" only for decorative images
- Add width/height to prevent layout shifts
Accessibility Guidelines
- Informative images: Describe the content/function
- Decorative images: Use empty alt (alt="")
- Functional images: Describe the action (e.g., "Search", "Submit")
- Complex images: Use longdesc or aria-describedby
SEO Impact
- Alt text helps search engines understand images
- Improves image search rankings
- Required for Google Images indexing
Related Files
- Command:
plugins/html-checker/commands/check-images.md - Scripts:
plugins/html-checker/scripts/src/check-images.ts - Check Links:
plugins/html-checker/skills/check-links/ - Check A11y:
plugins/html-checker/skills/check-a11y/