Svelte Cloudinary

High-performance image delivery and uploading at scale in Svelte powered by Cloudinary. This is a community library supported by the Cloudinary Developer Experience team.

✨ Features

• Automatically optimize images and deliver in modern formats
• Remove backgrounds from images
• Dynamically add image and text overlays to images
• AI-based cropping and resizing
• Transform images using color and effects
• Generate Open Graph Social Media cards on the fly
• ...all at scale with Cloudinary

🚀 Getting Started

Installation

• Install svelte-cloudinary with:

npm install svelte-cloudinary

We support Svelte v3, v4, v5 (compatibility mode), and SvelteKit!

• Add an environment variable with your Cloud Name:

VITE_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Learn more about configuring Cloudinary

Adding an Image

<script>
  import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
  width="600"
  height="600"
  src="<Your Public ID>"
  alt="<Alt Text>" />

Learn more about CldImage on the Svelte Cloudinary Docs

📘 Docs

https://svelte.cloudinary.dev

❤️ Community & Support

• GitHub: Create an Issue

🛠 Contributing

Please read CONTRIBUTING.md prior to contributing.

Acknowledgement

Thanks cupcakearmy for handing off the original svelte-cloudinary to allow us to continue on the work for the Svelte community!

Contributors