Guides / Image Optimization

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

With the Image 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

<x-cloudinary::image
  public-id="example"
  width="960"
  height="600"
  sizes="100vw"
  alt="My example"
/>