Last updated: Nov-21-2023
This video tutorial teaches you how to optimize and transform the images you deliver in a Svelte app by using the
CldImage component of the Svelte community-developed library.
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
|0:00||You can display Cloudinary-hosted images on your website using HTML, or you can use the
|0:31||Once Svelte Cloudinary is installed, import the
|0:59||When using the
|1:17||You can crop an image to a height and width of 600 pixels with the fill crop mode, to format your image as a square.|
|1:34||Use the AI-based
- Visit the Svelte community-developed library documentation to learn more about the Svelte-Cloudinary components, including their configuration, usage and examples.
- Check out the Transformation reference for a listing of all Cloudinary transformations, including syntax details and examples.
- Discover all the community-developed libraries that Cloudinary has to offer.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
Upload Assets in SvelteKitUpload assets using the Upload widget in a SvelteKit App
Gravity Crops for ImagesIndicate which areas to keep when cropping
Optimization TipsTips for delivering optimized images
Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.