Skip to content

Optimizing Images in Astro

Optimization plays a critical role in making your website load as fast as possible.

With the CldImage component, your images will be automatically optimized with automatic compression and by delivering the most efficient format based on your browser or device (WebP, AVIF, etc).

Example

Turtle

CldImage
getCldImageUrl

import { CldImage } from 'astro-cloudinary';

<CldImage
  width="960"
  height="600"
  src="<Your Public ID>"
  sizes="100vw"
  alt="<Description>"
/>

import { getCldImageUrl } from 'astro-cloudinary/helpers';

getCldImageUrl({
  width: 960,
  height: 600,
  src: '<Your Public ID>'
});

Prioritizing Critical Images

For images that are critical to page load (like hero images), you can improve performance by using fetchpriority="high" and loading="eager" to prioritize their loading and improve Largest Contentful Paint (LCP).

<CldImage
  src="<Your Public ID>"
  width="1920"
  height="1080"
  alt="<Description>"
  sizes="100vw"
  fetchpriority="high"
  loading="eager"
/>

Learn More