Images & Media: Sharp, Fast, Flexible

Use modern formats, proper sizing, and intrinsic ratios. Always include dimensions to prevent layout shift.

Responsive Image with <picture>

<picture>
  <source srcset="assets/placeholder.svg" media="(min-width: 60rem)">
  <img src="assets/placeholder.svg" alt="Decorative gradient" width="800" height="400" loading="lazy">
</picture>

Maintain Aspect Ratio

.media {{ aspect-ratio: 16 / 9; width: 100%; max-width: 60rem; }}

• Inline SVGs are crisp at any size.
• Provide width/height to reserve space.
• Lazy‑load below‑the‑fold media: loading="lazy".