Optimize Astro Images — Smaller Static Output
Compress the images in your Astro project before building — smaller static output, faster page loads, and a leaner starting point for Astro's Image component.
Quick answer
Drop your Astro project's src/assets or public/ image folder into TinyPixels before building. It compresses every file in place, reducing static output size while working alongside Astro's own image optimization, not against it.
How to compress images before an Astro build
Download and open TinyPixels
Free to install on Mac or Windows — no account needed to start.
Drop your src/assets or public/ folder in
public/ files bypass Astro's image pipeline entirely, so compress those directly.
Convert to WebP or AVIF if needed
Give Astro's Image component an even leaner starting point.
Commit and build
Smaller static output ships with no config changes needed.
Astro's Image component optimizes on build — compress the source first
Astro's built-in Image component generates responsive, correctly-sized variants at build time for images in src/assets. But files in public/ are copied to the output completely unprocessed — if that source is an unoptimized 8MB export from a design tool, it ships exactly that size.
Compressing source images before they land in either folder reduces your static output size directly, and gives Astro's image pipeline a leaner starting point for every generated variant.
Works with Astro Image
Compressing the source complements built-in optimization, doesn't conflict with it.
public/ files ship as-is
Compressing these directly matters most since Astro never touches them.
Bulk project processing
Compress your entire static asset folder in one pass.
Format conversion included
Convert to WebP or AVIF sources for even smaller output.
Where Astro's image pipeline applies — and where it doesn't
| Location | Processed by Astro's Image component? |
|---|---|
| src/assets, referenced via <Image> | Yes — resized, converted, and optimized at build time |
| public/ folder | No — copied to dist/ exactly as committed |
| src/assets, referenced via plain <img src={...}> | No — the Image component has to be used explicitly |
If a page uses a plain <img> tag instead of Astro's <Image> component — common for background images or third-party template code — pre-compression is the only optimization that file will ever get.
Common mistakes with Astro project images
Putting everything in public/ out of habit
public/ completely bypasses Astro's Image component — reserve it for files that genuinely need to be served unprocessed (like favicons or robots.txt), and use src/assets for anything Astro should optimize.
Using plain <img> tags with src/assets imports
Importing from src/assets doesn't automatically get you optimization — you need the <Image> or <Picture> component specifically for Astro's build-time processing to kick in.
Not compressing images used in MDX or Markdown content collections
Content collection images referenced in Markdown frontmatter follow the same src/assets vs public/ rules — audit these separately from your component-level images.
Assuming static output means no image work is needed
Astro's static output mode still benefits enormously from smaller source files — a leaner build means faster CI and smaller deploy artifacts either way.
Frequently asked questions
Does Astro's built-in image optimization replace pre-compression?
Astro's Image component resizes and converts images at build time, but it still starts from whatever source file you provide. Compressing that source first means less work for Astro's image pipeline and a smaller starting point.
Should I compress images in src/assets or public/ in an Astro project?
Both. Images in src/assets get processed by Astro's image pipeline, while files in public/ are copied to the output as-is with no processing at all. Compressing images in either location before committing reduces final output size.
Does compressing images slow down an Astro build?
No — the opposite. Pre-compressed source images mean Astro's image pipeline has less data to process at build time, which can make static builds faster, not slower.
Can I batch compress my whole Astro project's images at once?
Yes. Drop your assets or public image folder into TinyPixels and every file compresses in one pass, ready to commit before your next build.
Shrink your Astro build today
Free to start. No credit card, no account, no cloud. See Pro pricing →
Related tools
Optimize Next.js Images
Compress public assets before deploying Next.js.
Compress Vite Assets
Compress public assets before deploying with Vite.
WebP Converter
Convert any format to WebP locally.
Optimize Svelte Images
The same approach for SvelteKit's static/ folder.
Image Compressor Hub
Every format, platform, and framework in one place.
Optimize React Images
Compress images for your React app before build.
Optimize Vue Images
Compress images for your Vue app before build.
Optimize Angular Images
Compress images for your Angular app before build.
Read more: Fix your Lighthouse score where it actually matters → · Best image format for websites in 2026 →