Julian lechnerandClaude Opus 5.5
d841ce6ead
Keep the decision steps in SKILL.md and move catalogs, examples, and checklists verbatim to references/ to reduce the context cost of loading the skill. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
40 lines
1.5 KiB
Markdown
40 lines
1.5 KiB
Markdown
# Image Optimization
|
|
|
|
Every image on your site affects page speed, which affects SEO and conversions.
|
|
|
|
## Format Guide
|
|
|
|
| Format | Best For | Compression | Browser Support |
|
|
|--------|----------|-------------|:---:|
|
|
| **WebP** | Photos, graphics — default choice | Lossy + lossless | ~96% |
|
|
| **AVIF** | Highest compression, newest | Better than WebP | ~94% |
|
|
| **JPEG** | Fallback for older browsers | Lossy only | Universal |
|
|
| **PNG** | Transparency, screenshots | Lossless | Universal |
|
|
| **SVG** | Logos, icons, illustrations | Vector (scales) | Universal |
|
|
|
|
## Optimization Checklist
|
|
|
|
- [ ] **Serve WebP** with JPEG/PNG fallback (`<picture>` element or CDN auto-format)
|
|
- [ ] **Resize to display size** — don't serve 4000px images in 800px containers
|
|
- [ ] **Compress** — target quality 75-85% for photos, near-lossless for screenshots
|
|
- [ ] **Lazy load** below-the-fold images (`loading="lazy"`)
|
|
- [ ] **Set explicit dimensions** — `width` and `height` attributes prevent layout shift (CLS)
|
|
- [ ] **Use a CDN** with auto-optimization (Cloudflare, Vercel, Imgix, Cloudinary)
|
|
- [ ] **Add alt text** — descriptive, keyword-relevant, not stuffed
|
|
|
|
## Quick Optimization Commands
|
|
|
|
```bash
|
|
# Convert to WebP (using cwebp)
|
|
cwebp -q 80 input.png -o output.webp
|
|
|
|
# Batch convert with ImageMagick
|
|
mogrify -format webp -quality 80 *.png
|
|
|
|
# Optimize JPEG (using jpegoptim)
|
|
jpegoptim --max=80 --strip-all *.jpg
|
|
|
|
# Check image sizes on a page
|
|
curl -s https://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
|
|
```
|