Choose <picture> vs srcset vs sizes for responsive images |
Responsive Images Craft |
| Pick the right image format (JPEG, WebP, AVIF, PNG, SVG) |
Image Format Strategy |
Set loading, decoding, fetchpriority correctly for LCP |
Loading and Decode Craft |
| Show a placeholder while images load (blur-up, LQIP, skeleton) |
Placeholder Strategies |
| Lazy-load YouTube/Vimeo, handle video autoplay policies |
Video and Embed Craft |
| Decide inline SVG vs img vs CSS mask-image for icons |
SVG Craft |
| Apply object-fit, image reveal, before/after slider, lightbox |
Image Effects Craft |
| Set up Sharp, CDN transforms, compression budgets |
Build Pipeline Optimization |
| Map design breakpoints to Drupal responsive image styles |
Drupal Media Pipeline |