🌐 External Image Optimization

This page demonstrates how to optimize external images in Astro using various techniques.

📸 External Image Examples

Uses loading="lazy" and decoding="async" for performance

Uses srcset for responsive images

Uses picture element for format fallbacks

Use loading="lazy" to defer loading images until they're needed

<img loading="lazy" ... />

Use decoding="async" to prevent blocking the main thread

<img decoding="async" ... />

Use srcset and sizes for different screen sizes

<img srcset="small.jpg 300w, large.jpg 800w" />

Use <picture> element for WebP/AVIF with fallbacks

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="...">
</picture>

For better external image optimization, consider using image CDN services:

Automatic optimization, format conversion, and resizing

https://res.cloudinary.com/demo/image/fetch/w_400,f_auto,q_auto/https://example.com/image.jpg

Real-time image optimization and transformation

https://ik.imagekit.io/demo/tr:w-400,f-auto,q-auto/https://example.com/image.jpg

Global CDN with automatic optimization

https://imagedelivery.net/account/image-id/w=400,f=auto,q=auto

Preload critical images: Use <link rel="preload" as="image"> for above-the-fold images
Set dimensions: Always specify width and height to prevent layout shift
Use appropriate formats: WebP for photos, SVG for icons and simple graphics
Optimize quality: Use 80-85% quality for most images
Consider aspect ratios: Use CSS aspect-ratio to maintain layout
Implement blur placeholders: Show low-quality placeholders while loading