> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Transform and optimize images in Svelte (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/sveltekit-cldimage

## Overview

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](https://svelte.cloudinary.dev/).

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

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | You can display Cloudinary-hosted images on your website using HTML, or you can use the `CldImage` component from the [Svelte community-developed library](https://svelte.cloudinary.dev/) for simplified access to Cloudinary's transformation and optimization features.
|

### Deliver an image using an the Cloudinary CldImage component
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=31 :player=cld} | Once Svelte Cloudinary is [installed](https://svelte.cloudinary.dev/installation/), import the `CldImage` component into your project and replace your existing image tag with `CldImage`. In addition, instead of referencing the entire delivery URL, just specify the public ID.
|
```javascript
import { CldImage } from 'svelte-cloudinary';
...
<cldImage
  src={<public_id>}
  width={<width>}
  height={<height>}
  alt={<alt>}/>
```

### Automatically optimize your images
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=59 :player=cld} | When using the `CldImage` component, your images are delivered with `f_auto` and `q_auto` by default. This means they're automatically delivered in the best format for the requesting browser and compressed for optimal performance while maintaining visual quality.
|

### Format your image as a square
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=17 :player=cld} |  You can crop an image to a height and width of 600 pixels with the [fill](transformation_reference#c_fill) crop mode, to format your image as a square.
|

```javascript
<cldImage
  src={<public_id>}
  width={600}
  height={600}
  alt={<alt>}
  crop="fill"/>
```

### Automatically focus on the most important part of the image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=34 :player=cld} | Use the AI-based `gravity="auto"` property to ensure that all cropped images center on the essential area, avoiding any unwanted cuts.
|

```javascript
<cldImage
  src={<public_id>}
  width={600}
  height={600}
  alt={<alt>}
  crop="fill"
  gravity="auto"/>
```

### Apply any transformation using the `CldImage` component
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=41 :player=cld} | The `CldImage` component provides access to all Cloudinary [transformations](transformation_reference), such as special effects, text and image overlays, and more.
|

## Keep learning

> **READING**:
>
> * Visit the [Svelte community-developed library](https://svelte.cloudinary.dev/) documentation to learn more about the Svelte-Cloudinary components, including their configuration, usage and examples.

> * Check out the [Transformation reference](transformation_reference) for a listing of all Cloudinary transformations, including syntax details and examples.

> * Discover all the [community-developed libraries](cloudinary_sdks#community_developed_libraries) that Cloudinary has to offer.

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

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

  
  
  
    Upload Assets in SvelteKit
    Upload assets using the Upload widget in a SvelteKit app 
  

  
  
  
    Gravity Crops for Images
    Indicate which areas to keep when cropping 
  

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

&nbsp;

&nbsp;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.
&nbsp;