🖼️ SSR Internal Image Optimization

This page demonstrates Astro's SSR image optimization for images using the Image component.

⚖️ Comparison: Regular vs Optimized

Regular <img> tag

Regular image

No optimization
Original file size (See image size in N/W tab)
No format conversion
No responsive sizing

Astro <Image> component optimized in SSR

SSR request looks like: https://<domain>/_image?href=/_astro/space.BmHsqymY.webp&w=300&h=225&q=80&f=png

Optimized image

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 SSR Image optimization Works

Run-time optimization: Images are processed in SSR Lambda
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

← Back to Home