Image & Video APIs
Menu

Configure the Javascript SDK in Svelte (video tutorial)

Last updated: Nov-24-2025

Overview

Learn how to install and configure the Cloudinary Javascript SDK using the Svelte community-developed library.

Video tutorial


This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

Jump to this spot in the video 0:00 With the Cloudinary Javascript SDK, you can easily access, transform and optimize your media assets directly in your SvelteKit application.

Install the dependency

Jump to this spot in the video 0:12 First, install the corresponding dependency, @cloudinary/url-gen:

Run the SvelteKit application

Jump to this spot in the video 0:20 Launch the sample SvelteKit application with the following command:

Import the Cloudinary package

Jump to this spot in the video 0:28 On the SvelteKit page, import the Cloudinary package:

Configure Cloudinary

Jump to this spot in the video 0:33 You can configure Cloudinary by passing your cloud name, accessible from your Cloudinary Dashboard. This configuration will generate an object that allows you to access the various methods from the library.

Remember to replace tutorials in this example with your own cloud name:

Add an image

Jump to this spot in the video 0:48 Create a variable to store the image reference. Use the image method, which accepts the asset's public ID (the identifier of a Cloudinary image) as its parameter. You can view this sample image of a sneaker with public ID cld-sample-5 inside your Media Library.

Optimize the image

Jump to this spot in the video 1:08 Configure your image to be automatically delivered in the best format for the requesting browser and optimized for compression, resulting in the smallest file size while maintaining visual quality.

Render the image

Jump to this spot in the video 1:19 Use a simple image tag with the image.toURL() method, placing the image's delivery URL in the src attribute of the image tag. Verify the delivery URL through Developer Tools to ensure Cloudinary delivers the image with the f_auto and q_auto qualifiers.

Keep learning

Related topics

If you like this, you might also like...

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.

AltStyle によって変換されたページ (->オリジナル) /

✔️ Feedback sent!

✖️
How helpful was this doc page?

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

*

Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Rate this page: