How to Use Static Assets in Astro
Discover how to effectively use static assets in Astro by organizing files in the public folder, referencing images with proper attributes, and optimizing them for SEO and layout stability. This lesson helps you enhance your website's performance and accessibility by handling images, fonts, and other assets correctly.
We'll cover the following...
When it comes to working with static assets in Astro, we must remember to place everything in the public folder at the root of the project. A common practice is to organize assets into separate folders based on their file extensions—for example:
Please note that any files placed inside this folder will be copied over to the build folder as is, without any modification. Therefore, avoid placing other files inside the public folder that need to be automatically optimized—such as bundled and minified—by Astro.
Referring static assets
As we progress through this course, we'll use a few static assets, such as an image for the logo and social media icons. To reference static assets in Astro, simply use an img tag and provide the path to the ...