dragoon0x Image Treatment
Aspect Ratios
| Ratio | Use |
|---|---|
| 1:1 | Avatars, product thumbnails, app icons |
| 4:3 | Standard photos, cards |
| 3:2 | Photography, landscape |
| 16:9 | Hero banners, video thumbnails |
| 21:9 | Cinematic banners, ultra-wide heroes |
Responsive Images
<picture>
<source media="(min-width: 1024px)" srcset="large.webp">
<source media="(min-width: 768px)" srcset="medium.webp">
<img src="small.webp" alt="Descriptive text" loading="lazy">
</picture>
Loading Strategy
- Above fold: Eager loading, preload critical images
- Below fold:
loading="lazy"native lazy loading - Placeholders: Blurred thumbnail (LQIP) or dominant color
- Progressive JPEG: Loads blurry then sharp
- WebP/AVIF with JPEG fallback
Art Direction
- Different crops for different viewports (not just resize)
- Mobile: tighter crop focused on subject
- Desktop: wider crop with context
object-fit: coverwith consideredobject-position