Step
4/10
Pictures, perfected
Photos from the launch pad. Don't ship them at 4MB.
Your mission logs need photos . A 4 MB JPEG from your phone will work — and absolutely ruin the page load.
Astro ships an <Image> component. You give it the original. It gives you: three sizes , modern formats (WebP, AVIF), lazy loading, and the right width / height so layout doesn't shift.
Drop the photo in src/assets/ , then:
✦ src/pages/logs/launch-day.astro
read-only
1
2
3
4
5
6
7
8
9
10
11
12
13
---
import { Image } from "astro:assets";
import liftoff from "~/assets/liftoff.jpg";
---
<Image
src="{liftoff}"
alt="Apollo 42 clearing the tower"
widths="{[400, 800, 1200]}"
sizes="(max-width: 700px) 100vw, 700px"
format="webp"
loading="lazy"
/>You write nine lines. Astro generates this — for free :
✦ rendered HTML — generated, not authored
read-only
1
2
3
4
5
6
7
8
9
10
// what Astro actually sends to the browser:
<img>
src="/_astro/liftoff.D3kF.webp"
srcset="/_astro/liftoff.400.webp 400w, /_astro/liftoff.800.webp 800w, ..."
sizes="(max-width: 700px) 100vw, 700px"
alt="Apollo 42 clearing the tower"
width="1200"
height="800"
loading="lazy"
/>The browser picks the right size based on screen width. The image lazy-loads. Layout is reserved before pixels arrive. Three years of frontend best practices, one component.
— page 4 —