đŧī¸ Internal Image Optimization
This page demonstrates Astro's built-in image optimization for local images using the Image component.
âī¸ Comparison: Regular vs Optimized
Regular <img> tag
- No optimization
- Original file size (See image size in N/W tab)
- No format conversion
- No responsive sizing
Astro <Image> component
- Automatic optimization
- Compressed file size (See image size in N/W tab)
- Modern formats (WebP, AVIF)
- Responsive sizing
⨠Image Optimization Features
đī¸ Compression
Automatic compression with quality control
đ Format Conversion
Convert to modern formats like WebP and AVIF
đą Responsive
Generate multiple sizes for different devices
⥠Lazy Loading
Built-in lazy loading for better performance
âšī¸ How It Works
- Build-time optimization: Images are processed during the build
- Multiple formats: Generates WebP, AVIF, and fallback formats
- Size variants: Creates different sizes for responsive design
- Automatic srcset: Generates srcset attributes automatically
- Type safety: TypeScript support for image imports