Copied from chat with Gemini
Posted on 21st May 2026 at 15:30 by Admin
Images
In Astro, it is significantly better to place your images in src/assets/images/ rather than the public/ directory for your content posts.
Why src/assets/ is the Superior Choice
-
Automatic Optimization: When images are in src/, Astro can automatically compress them, convert them to modern formats (like WebP or AVIF), and generate correct widths and heights. Images in public/ are copied as-is without any optimization.
-
Layout Shifts Prevention: Astro’s <Image /> component can automatically read the dimensions of files inside src/. This prevents Cumulative Layout Shift (CLS) on your pages because the browser knows the image size before it loads.
-
Broken Link Protection: If you type a wrong path to an image in src/, your build will fail and tell you immediately. Images in public/ are not checked during compilation, which can lead to broken images on your live site without you realizing it.
Audio
Audio files should be in /public/assets/audio. (As the only one currently is)
Why Audio Files Belong in public/
-
No Build Optimization: Astro contains specific built-in optimization pipelines (astro:assets) designed exclusively for image compression and formatting (like converting .png to .webp). Astro does not have an internal component or compression engine for processing, encoding, or slicing audio streams.
-
Direct Browser Streaming: When an audio file sits inside the public/ directory, the web server can serve it directly to the browser with standard HTTP range requests. This allows users to scrub through a timeline or play a track instantly without waiting for the entire .mp3 file to download first.
-
Avoid Import Overhead: If you place non-image media into src/, you have to import them as static assets via JavaScript imports to get their resolved paths, which adds unnecessary complexity to a basic Markdown post.
The Best Practice Setup for Your Audio
Keep your folder setup direct and lean using the public/layout:
└── assets/
└── audio/
└── podcast-clip.mp3Listen to the recording below:
Tidying up
For each image in /public/assets/images:
- Move it to /src/assets/images
- Check where it’s used with grep
- Fix code