Programmable Media

Configure the Javascript SDK in Svelte (video tutorial)

Last updated: Sep-12-2024

Overview

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

Video tutorial


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...

Optimization Tips
Tips for delivering optimized images
Named Transformations
Simplify & standardize complex delivery URLs
Transformation Basics
Learn the basics of a transformation URL

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: