Join the early access list for my course! https://learnastro.dev
Astro can optimize images in your src directory, preventing layout shift, reducing loading time, and more. Astro provides two tools: 1) an Image component and 2) a getImage function for server renders.
🔗 Key Links 🔗
- Docs: https://docs.astro.build/en/guides/images/
- Github: https://github.com/coding-in-public/astro-image-optimization-v3
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:00 Image component
5:12 Public or remote images
8:35 Markdown optimization
11:33 getImage function
14:04 Creating responsive optimized images
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: https://github.com/microsoft/cascadia-code
- Theme: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme
- Icons: https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedicons
---------------------------------------
🌐 Connect With Me 🌐
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog
- Twitter: https://twitter.com/cpenned
- Patreon: https://www.patreon.com/coding_in_public
- Buy Me a Coffee: https://www.buymeacoffee.com/chrispennington