Image optimization for Astro

The Image System I Reach For on Every Astro Site

Responsive images, art direction, background images, SVGs, icons, videos, and GIF replacements. Drop them into your pages and never think about image optimization again.

Get Image Systems — $49

Pay once. Lifetime access. Free updates forever.

Ready by: 31st May

Image Systems

Images become a cinch.

Images without the import hassle
Built-in Cumulative Layout Shift (CLS) prevention
Sane optimization defaults
Automatic responsive srcset
Use better image formats easily
Art direction – optimized, with one config
Background Image component
Repeatable image patterns
SVG Background patterns
Using optimized images in components
Video component with CLS prevention
Videos for GIF replacements
Github Actions with cached images

Every Image Situation Already Handled For You

Optimized Images

Drop in the file path, get responsive sizes, modern formats, and lazy loading. One component, no imports needed.

<Image src="/path/to/image.png" alt="Alt Text" />

Art Direction

Different images at different breakpoints. Add your sources, set your breakpoints, and the Picture component generates the correct markup.

<Picture
artDirection={[
  { src: "/src/asset prose-responsives/square", max: 600 },
  {
    src: "/src/asset prose-responsives/landscape",
    min: 1000,
  },
]}

Optimized background images

Pick your image, set cover or repeat. One component, fully optimized, no imports needed.

<BackgroundImage
src="/src/asset prose-responsives/patterns/schoolbg.png"
repeat={true}

Local SVGs

Point to any SVG in your project. Get semantic markup with sensible defaults, plus classes and attributes.

Image goes here

SVG Icons

Grab any free icon from Iconify’s library. Thousands of icons, one component. Loaded dynamically so they don’t block rendering.

Image goes here

SVG Backgrounds

Use SVG patterns as backgrounds with one line of code. Reusable patterns, ready to drop in.

Image goes here

Videos

Width and height metadata is pulled automatically with FFmpeg so Lighthouse stays happy.

Image goes here

Performant GIFs

Looping, muted videos that behave like GIFs — a fraction of the file size. Built on the Video component, so no layout shifts either.

Image goes here

Images Shouldn't Be Complicated

Images have gotten way too complicated nowadays. We have to:

Optimize them for the best performance
Use srcset to create responsive images
Use picture and source tags to support image formats
Add width and height to prevent layout shifts (to make Google happy for SEO)
And lazy load them so they don’t block rendering…

The result of that looks like this:

<picture>
  <source srcset="path-1 400w, path-2 680w" type="image/avif">
  <source srcset="path-1 400w, path-2 680w" type="image/webp">
  <img
    src="path-1"
    srcset="path-1 400w, path-2 680w"
    alt="image"
    loading="lazy"
    decoding="async"
    width="680"
    height="261" />
</picture>

That’s way too difficult to write and maintain manually.

So I Made Them Simple Again

I’m not a fan of unnecessary frustration, so I built an Image component that lets me use images just like the good old days — one single line with zero configurations

<Image src="/path/to/image.png" alt="Alt Text" />

What's inside

Six production-tested patterns. Each one solves a specific image problem I've hit across 10+ Astro sites.

1. Art Direction

Breakpoint-specific crops without the markup mess. A clean pattern for serving different images at different viewports — square on mobile, landscape on desktop — without hand-writing <source> tags every time.

2. Background Images

Optimized images in CSS layouts. A utility pattern that generates optimized URLs you can use with background-image. Hero sections, banners, overlays — all with proper optimization instead of raw full-size files.

3. MDX & Markdown Images

Content images that don’t punish mobile users. A component pattern that gives your markdown images responsive behavior with automatic srcset — so your blog posts serve the right size to every device.

4. Framework Interop

Using optimized images in React, Svelte, or Vue components. You can’t optimize images inside the framework — that’s Astro’s job. But getting them across the boundary cleanly? That’s where most people waste time trying client:only workarounds and fragile hacks. This pattern shows you the clean approach.

5. Video as GIF Replacement

Animated GIFs are massive. A 5-second loop can be 10MB. The modern fix is using <video> with optimized formats — but Astro doesn’t handle video optimization in its build pipeline. This pattern gives you a production workflow for optimized video loops that replace GIFs at a fraction of the file size.

6. CI Performance

Image-heavy builds that don’t timeout. Strategies for caching, incremental optimization, and configuration that keeps your build pipeline fast — even with hundreds of images across dozens of pages.

HOW IT FITS TOGETHER

These aren’t six disconnected tips.

Art direction handles the viewport problem. Background images handle the CSS problem. MDX images handle the content problem. Framework interop handles the component boundary problem. Video replacement handles the animation problem. CI performance makes sure the whole thing actually ships.

Each pattern supports the next. You stop improvising and start reusing. deo>

CRedibility

I’ve been building for the web for over 10 years. The last 2-3 have been deep in Astro — 10+ production sites, each one refining these patterns a little more.

You might know my writing from CSS-Tricks, Smashing Magazine, A List Apart, Sitepoint, or freeCodeCamp. Same approach here: step by step, no hand-waving, every decision explained.

I built these patterns because I was tired of re-solving them. Now I’m packaging them so you don’t have to either.

I built this from the image patterns I’ve refined across production Astro projects over 2-3 years. Ten-plus sites. Each one surfaced a new edge case that made the system better.

If you’ve read my work on CSS-Tricks, Smashing Magazine, or A List Apart — same approach. Step by step. Every trade-off explained. No hand-waving.

Image Systems

The complete guide — every decision explained, on the course platform — plus source code you drop into your project.

Six patterns. Every one tested in production. Every decision already made.

[Get Image Systems — $49]

One payment. Lifetime access. Includes source code.

Or get everything.

Image Systems is one of 8 modules in Practical Astro. The full collection — Content Systems, Images, SEO, Server Patterns, Database, Auth, Payments, and CMS Integration — is $149.

That’s every module, current and future. The price goes up as more modules ship.

[Get Practical Astro — $149]

FAQ

Is this only about responsive srcset?

No. srcset is one piece. This covers art direction, CSS background images, content images in MDX, framework component interop, video/GIF replacement, and CI build performance. The full production image workflow.

Will this still help as Astro evolves?

Yes. Astro added responsive image support in v5.10, which handles the common case. This module covers everything that feature doesn’t: art direction, background images, MDX content images, framework components, and build performance. The decision framework applies regardless of which Astro version you’re on.

What if I’m not using React or Svelte?

The framework interop pattern shows the general approach for passing optimized images across component boundaries. It applies to any UI framework Astro supports. The other four patterns work regardless of which frameworks you use.

Is this for beginners?

No. It’s built for developers who already know Astro basics and have hit real image problems in production. If you haven’t built an Astro site yet, start with the docs first.

Stop re-solving the same image problems on every project

You’ve already fought with art direction, background images, and slow builds. You don’t need another tutorial. You need the system.

[Get Image Systems — $49]

One payment. Lifetime access. Includes source code.