Repository navigation
Image Optimization for Species Pages #254
Description
Description
Optimize species images for better performance and user experience by adding thumbnails, WebP format support, and lazy loading.
Current State
- All images stored as JPEG (800×600, 85% quality)
- Full-size images loaded on every page
- No progressive loading or thumbnails
- Average image size: ~100-200KB
Proposed Improvements
1. Generate Thumbnails
Sizes Needed:
- Thumbnail: 150×150 (for galleries, lists)
- Medium: 400×300 (for cards)
- Large: 800×600 (current, for detail views)
Implementation:
- Update image download scripts to generate all sizes
- Store with naming convention: `{hash}_thumb.jpg`, `{hash}_medium.jpg`, `{hash}_large.jpg`
- Update database to store multiple sizes
2. WebP Format Support
Benefits:
- 25-35% smaller file sizes vs. JPEG
- Better compression at same quality
- Wide browser support (96%+ as of 2024)
Implementation:
// Generate both JPEG and WebP
await sharp(buffer)
.resize(800, 600)
.jpeg({ quality: 85 })
.toFile(jpegPath);
await sharp(buffer)
.resize(800, 600)
.webp({ quality: 85 })
.toFile(webpPath);HTML Usage:
<picture>
<source srcset="/images/species/abc123.webp" type="image/webp">
<img src="/images/species/abc123.jpg" alt="...">
</picture>3. Lazy Loading
Implementation:
- Add `loading="lazy"` attribute to images below fold
- Use Intersection Observer for custom loading
- Show placeholder/skeleton while loading
Pug Template:
img(
src=image.url
alt=image.alt
loading="lazy"
class="w-full h-auto"
)4. Progressive JPEG Encoding
Enable progressive JPEG for better perceived performance:
await sharp(buffer)
.jpeg({ quality: 85, progressive: true })
.toFile(path);Tasks
- Update image download scripts to generate multiple sizes
- Add WebP format generation alongside JPEG
- Update database schema to store multiple URLs
- Create migration to generate thumbs/WebP for existing images
- Update templates to use `
` element - Add lazy loading to species galleries
- Enable progressive JPEG encoding
- Test on various browsers and devices
- Measure performance improvements
- Update documentation
Acceptance Criteria
- Thumbnails generated for all images
- WebP format available with JPEG fallback
- Images lazy-load below the fold
- Page load time reduced by 30%+
- Works on all supported browsers
- Existing images migrated to new format
Performance Targets
- Thumbnail size: <20KB
- Medium size: <50KB
- Large JPEG: <150KB
- Large WebP: <100KB
- Gallery page load: <2s on 3G
Priority
Low - Nice to have but current performance is acceptable.
Related to #240 (External Data Sources Integration)
Activity