Optimizing Images in Svelte/SvelteKit

Automatically optimize images using the CldImage component. By default, CldImage opts you in to automatic optimization including delivering the most optimal format for the browser (WebP, AVIF).

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

Example

• CldImage

  <script>
    import { CldImage } from 'svelte-cloudinary'
  </script>
  
  <CldImage
    width="960"
    height="600"
    src="images/turtle"
    sizes="100vw"
    alt="Turtle"
  />

• getCldImageUrl

Watch & Learn

Learn More

• Responsive Images
• CldImage
• getCldImageUrl