Image optimization with astro:assets - Performance & Optimization

Performance: Image optimization with astro:assets

HIGH IMPACT

This affects page load speed by reducing image file sizes and improving rendering time for images.

Loading images on a webpage efficiently

Astro

---
import { getImage } from 'astro:assets';
const optimizedImage = await getImage({ src: '/images/photo.jpg', width: 800, format: 'webp' });
---
<img src={optimizedImage.src} alt="Photo" loading="lazy" decoding="async" />

Automatically resizes, converts to efficient formats, and lazy loads images to speed up rendering.

📈 Performance GainReduces image size by 50-80%, cuts LCP by 300-500ms, and defers offscreen images.

Loading images on a webpage efficiently

Astro

<img src="/images/photo.jpg" alt="Photo">

Loads full-size images without optimization, causing slow page loads and large data usage.

📉 Performance CostBlocks rendering until large images load, increasing LCP by several hundred milliseconds.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unoptimized full-size images	Minimal	Triggers 1 reflow per image load	High paint cost due to large images	[X] Bad
astro:assets optimized images with lazy loading	Minimal	Single reflow after image loads	Low paint cost with smaller images	[OK] Good

Rendering Pipeline

astro:assets processes images at build time to generate optimized versions. The browser loads smaller, faster images, reducing layout and paint delays.

→Network Load

→Layout

→Paint

⚠️ BottleneckNetwork Load due to large unoptimized images

Core Web Vital Affected

LCP

This affects page load speed by reducing image file sizes and improving rendering time for images.

Optimization Tips

1Always use astro:assets to resize and convert images to modern formats like WebP.

2Enable lazy loading to defer offscreen images and reduce initial load time.

3Avoid loading full-size images directly to prevent slow LCP and high data usage.

Performance Quiz - 3 Questions

How does using astro:assets for images improve page load performance?

A By disabling image loading until user clicks

B By loading all images at full size immediately

C By generating smaller, optimized images and lazy loading them

D By converting images to GIF format

DevTools: Performance

How to check: Open DevTools > Performance tab > Record page load > Look for image load times and LCP event timing.

What to look for: Check if images load quickly and LCP occurs early; large image load times indicate poor optimization.