majiayu000 Image Implementation
Convert and implement images into page sections.
Workflow
- User provides: page route, source folder, image-to-section mapping
- Run WebP conversion script
- Replace CDN placeholders with Next.js
<Image> - Add alt text keys to i18n files
Convert Images
./scripts/convert-to-webp.sh [input_dir] [output_dir]
Default paths:
- Input:
/public/raw/[page]/ - Output:
/public/images/[page]/
Generates responsive variants: 640w, 1024w, 1920w
Replace Patterns
See references/nextjs-patterns.md for code examples.
Quick Reference
| Image Type | Props | Use Case |
|---|---|---|
| Fixed size | width, height |
Testimonials, logos |
| Fill container | fill, sizes |
Hero, project thumbnails |
| Above fold | priority |
First visible image |
| Object fit | className="object-cover" |
Cropped images |
i18n Alt Text
Add to messages/de.json and messages/en.json:
{
"hero": {
"imageAlt": "Beschreibung des Bildes"
},
"projects": {
"items": {
"0": { "imageAlt": "Projekt 1 Beschreibung" }
}
}
}
Checklist
- Images converted to WebP
- Responsive variants generated
- CDN URLs replaced with local paths
-
<img>tags converted to<Image> - Alt text added to i18n
-
priorityset for above-fold images -
sizesprop set for responsive images