Render Images to Pages with Astros Static Serving and Static Assets

There are two ways that Astro gives us to serve static content to our users. The first unoptimized way is to just put your assets in the public folder of your application. This will make your assets publicly available. If you had asset.png stored in your public folder you would access in your code with /asset.png.

When you use the public folder, however, you don't get any optimization and Astro will just serve what is in there no matter what. If you'd like to optimize your assets Astro gives you an assets folder that you can use inside src. Moving your asset there in tandem with the Image component from astro:assets will give you an optimized webp version of the image you want to load. You'll also be able to control the width/height and quality that is loaded.

Challenge

It's time for you to test what you know so far. You've learned about Astro pages, components, styling, and static images.

Use your knowledge to modify the home and about pages to look like the screenshots below.

If you get stuck you can check the code linked on the lesson page.