Last updated: Dec-11-2024
On this page:
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
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
0:12 | First, install the corresponding dependency, @cloudinary/url-gen : |
Run the SvelteKit application
0:20 | Launch the sample SvelteKit application with the following command: |
Import the Cloudinary package
0:28 | On the SvelteKit page, import the Cloudinary package: |
Configure Cloudinary
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
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
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
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
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
- Follow the Javascript SDK quick start to get up and running in five minutes.
- Learn how to transform your images and videos using the JavaScript SDK.
- Explore Cloudinary's Svelte community-developed library.
- Learn how to transform and optimize your assets.
- Delve into some more advanced transformation features, such as adding complex transformations and the Zoompan effect.
If you like this, you might also like...
Optimization Tips
Tips for delivering optimized imagesNamed Transformations
Simplify & standardize complex delivery URLsTransformation Basics
Learn the basics of a transformation URL
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.
✖️