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).

Tip

You can further optimize delivery with responsive sizing by using the sizes prop.

Example

CldImage

import { CldImage } from 'astro-cloudinary';

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

• Expand Snippet
• Collapse Snippet

getCldImageUrl

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

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

• Expand Snippet
• Collapse Snippet

Learn More

• Responsive Images
• CldImage
• getCldImageUrl