If you\u2019re using Svelte, you don\u2019t have a built-in way to optimize images. Cloudinary\u2019s svelte-cloudinary package is a great way to start serving optimized images quickly \u2014 let\u2019s dive in.<\/p>\n\n\n\n
The CldImage Component<\/h2>\n\n\n\n
Normally, you interact with Cloudinary by uploading images and requesting them via certain URL formats. The CldImage component abstracts the URL construction part away from you, so that you can interact with Cloudinary through passing props to a component instead.<\/p>\n\n\n\n
Here\u2019s what that might look like:<\/p>\n\n\n
```svelte\n\n<CldImage<\/span>\n\nheight<\/span>={840}<\/span>\n\nwidth<\/span>={700}<\/span>\n\nsrc<\/span>=\"orange-cat\"<\/span>\n\nalt<\/span>=\"An orange cat with its head leaning to one side, looking quizzically at the camera\"<\/span>\n\n\/><\/span>\n\n```<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nYou provide the component with the width and height of the images and the ID in Cloudinary, and you\u2019ll get back an optimized image matching the specifications. Some of the optimizations Cloudinary applies include:<\/p>\n\n\n\n
\n- Resizing and compressing the image from its original size, so that it looks good at the specified dimensions while minimizing the file size.<\/li>\n\n\n\n
- Converting the image to a modern format (like AVIF<\/a> or WebP) that can reduce the file size further. Cloudinary will serve different formats depending on the browser, since image format support can vary. <\/li>\n<\/ul>\n\n\n\n
In addition, these optimizations happen at request time<\/em> so you don\u2019t have to slow down your build to process images.<\/p>\n\n\n\nThere are many other ways Cloudinary can transform your images, including:<\/p>\n\n\n\n
\n- Dynamic cropping<\/a>.<\/li>\n\n\n\n
- Background removal<\/a>.<\/li>\n\n\n\n
- Generative fill<\/a> with AI.<\/li>\n\n\n\n
- Overlaying text or other images.<\/li>\n\n\n\n
- And more!<\/a><\/li>\n<\/ul>\n\n\n\n
Tutorial<\/h2>\n\n\n\n
Let\u2019s see how to use this in a Svelte project. We\u2019ll build a card displaying an animal that\u2019s up for adoption.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh7-us.googleusercontent.com\/Wwf9Gbrdt1aAyJIrAKMwL6KW-BE-Ym0539CXqlY8gLgw3PseUkJhfVBkRCfPAqPt-cdUOMbRCdt5FgnWbqkx6cBqLTp6jWDfDw08trE7MpNS-BD60C63ufrxmN9Nzd9fHDt7gQKC3MJZGYaJWc02XjM\")
<\/figure>\n\n\n\nFirst, you\u2019ll need an image to work with. I downloaded this image of an orange cat<\/a> from Unsplash, but feel free to bring your own image if you want. Take note of how large the image you downloaded is \u2014 mine was 8MB! With Cloudinary\u2019s APIs, we\u2019ll be able to serve a much smaller, more optimized image: it will be resized, compressed, and in a modern image format. This will also reduce our total page weight, which means the page will load faster and use less of our users\u2019 bandwidth.<\/p>\n\n\n\nOnce you have your image, upload it to your Media Library in the Cloudinary Console<\/a> and get the Public ID of the item.<\/p>\n\n\n\nNow we can set up our Svelte project. Scaffold a new project by running npm create svelte@latest<\/code> in a terminal. Choose the \u201cSkeleton project\u201d app template, and whatever you like from the other options. They shouldn\u2019t matter much for this demo.<\/p>\n\n\n\nTo set up svelte-cloudinary<\/code>, install the library with:<\/p>\n\n\n\nnpm install svelte-cloudinary<\/code><\/p>\n\n\n\nCreate a .env<\/code> file in the root of your project and add your Cloudinary cloud name<\/a>.<\/p>\n\n\n```\n\nVITE_PUBLIC_CLOUDINARY_CLOUD_NAME=\"CLOUD_NAME_GOES_HERE\"\n\n```\n\nThat should be all you need to start using the component. Let\u2019s try it out \u2013 replace the contents of\u00a0 `src\/routes\/+page.svelte` with the Cloudinary image component.\n\n```svelte\n\n<script<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0import<\/span> { CldImage } from<\/span> 'svelte-cloudinary'<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> src = 'orange-cat'<\/span>;\u00a0\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> alt = 'An orange cat with its head leaning to one side, looking quizzically at the camera'<\/span>;\n\n<\/span><\/script<\/span>><\/span>\n\n<CldImage<\/span> height<\/span>={840}<\/span> width<\/span>={700}<\/span> {src<\/span>} {alt<\/span>} \/><\/span>\n\n```<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nWe’ll pass the following props to the CldImage<\/code>:<\/p>\n\n\n\n\nwidth<\/code> and height<\/code> are the width and height of the image. This doesn\u2019t have to be the same as the width and height of the image you uploaded. Cloudinary will automatically resize the image to match the dimensions you request.<\/li>\n\n\n\nsrc<\/code> is the Cloudinary Public ID of the image you uploaded at the beginning.<\/li>\n\n\n\nalt<\/code> is a description of the image. This will be used to describe the image when users browse with assistive technology like a screen reader, or if the image fails to load.<\/li>\n<\/ul>\n\n\n\nRun the dev server with npm run dev<\/code> and navigate to the site. You should see the image on the page. Take a look at the network tab to see how big the image is now after being optimized by Cloudinary. Mine went from 8MB to 34KB \u2014 less than 1% of the size of the original image! While some of this decrease was accomplished by resizing and compressing the image, Cloudinary also converts the image to a more efficient file format like .avif to increase the cost savings even further.<\/p>\n\n\n\nIf you take a peek at the HTML generated by the component, you\u2019ll notice some additional attributes were added to make the image more performant by default.<\/p>\n\n\n\n
\nloading=\u201dlazy\u201d<\/strong><\/code>. This delay loading the image until it is in the user\u2019s viewport (MDN<\/a>).<\/li>\n\n\n\ndecoding=\u201dasync\u201d<\/strong><\/code>. If the image data takes a long time to decode, the browser will display the rest of the page content right away instead of waiting for decoding to finish (MDN<\/a>).<\/li>\n<\/ul>\n\n\n\nLet\u2019s take the image component a bit further. To display the image in a responsive card with some text added, you can add the following styles and markup.<\/p>\n\n\n
```svelte\n\n<script<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0import<\/span> { CldImage } from<\/span> 'svelte-cloudinary'<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> src = 'orange-cat'<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> alt = 'An orange cat with its head leaning to one side, looking quizzically at the camera'<\/span>;\n\n<\/span><\/script<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"card\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<CldImage<\/span> height<\/span>={840}<\/span> width<\/span>={700}<\/span> {src<\/span>} {alt<\/span>} class<\/span>=\"big-image\"<\/span> \/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"content\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0 <div<\/span> class<\/span>=\"title\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0 <CldImage<\/span> height<\/span>={200}<\/span> width<\/span>={200}<\/span> {src<\/span>} {alt<\/span>} class<\/span>=\"small-image\"<\/span> crop<\/span>=\"thumb\"<\/span> \/><\/span>\n\n\u00a0\u00a0\u00a0 <h1<\/span>><\/span>Sunny<\/h1<\/span>><\/span>\n\n\u00a0\u00a0\u00a0 <\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0 <p<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nMeet our charming orange tabby cat! This delightful feline, with its vibrant orange coat and captivating eyes, is sure to steal your heart. Known for its playful and affectionate nature, this cat is the perfect companion for both families and individuals. Whether it’s curling up on your lap for a cozy evening or entertaining you with its playful antics, this cat is full of personality. We’ve affectionately nicknamed them “Sunny,” but you can choose from a range of names like “Amber,” “Marmalade,” or “Leo” to suit their sunny disposition. Don’t miss out on the chance to bring a ray of sunshine into your life \u2013 adopt this orange beauty today!<\/p>\n\n\n
<\/p<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<style<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0.card<\/span> {\n\n\u00a0\u00a0\u00a0 font-family<\/span>: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,\n\n\u00a0\u00a0\u00a0 sans-serif;\n\n\u00a0\u00a0\u00a0 display<\/span>: grid;\n\n\u00a0\u00a0\u00a0 grid-template-columns<\/span>: 1<\/span>fr;\n\n\u00a0\u00a0\u00a0 border-radius<\/span>: 1rem<\/span>;\n\n\u00a0\u00a0\u00a0 border<\/span>: 1px<\/span> solid lightgrey;\n\n\u00a0\u00a0\u00a0 overflow<\/span>: hidden;\n\n\u00a0\u00a0\u00a0 max-width<\/span>: 800px<\/span>;\n\n\u00a0\u00a0\u00a0 margin<\/span>: 0<\/span> auto;\n\n\u00a0\u00a0\u00a0 align-items<\/span>: center;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0.content<\/span> {\n\n\u00a0\u00a0\u00a0 padding<\/span>: 1rem<\/span>;\n\n\u00a0\u00a0\u00a0 line-height<\/span>: 1.4<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0.card<\/span> :global(.big-image)<\/span> {\n\n\u00a0\u00a0\u00a0 display<\/span>: none;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0.card<\/span> :global(.small-image)<\/span> {\n\n\u00a0\u00a0\u00a0 border-radius<\/span>: 100%<\/span>;\n\n\u00a0\u00a0\u00a0 flex-basis<\/span>: 125px<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0.title<\/span> {\n\n\u00a0\u00a0\u00a0 display<\/span>: flex;\n\n\u00a0\u00a0\u00a0 gap<\/span>: 1rem<\/span>;\n\n\u00a0\u00a0\u00a0 align-items<\/span>: center;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0@media<\/span> (min-width:<\/span> 600px<\/span>) {\n\n\u00a0\u00a0\u00a0 .card<\/span> {\n\n\u00a0\u00a0\u00a0 grid-template-columns<\/span>: 300px<\/span> 1<\/span>fr;\n\n\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0 .card<\/span> :global(.big-image)<\/span> {\n\n\u00a0\u00a0\u00a0 display<\/span>: block;\n\n\u00a0\u00a0\u00a0 align-self<\/span>: stretch;\n\n\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0 .card<\/span> :global(.small-image)<\/span> {\n\n\u00a0\u00a0\u00a0 display<\/span>: none;\n\n\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0\u00a0}\n\n<\/span><\/style<\/span>><\/span>\n\n```<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nTo target the underlying <img><\/code> rendered by the CldImage<\/code> component, we pass a class<\/code> as a prop to the component. Since the <img class=\u201dbig-image\u201d><\/code> is outside of the component we\u2019re writing our styles in, we need to use :global(.big-image)<\/code> modifier to style it from inside Svelte\u2019s <style><\/code> block<\/a>. If you like, you can also style the CldImage<\/code> with inline styles via the style<\/code> prop.<\/p>\n\n\n\nIn this version, we\u2019re including two CldImage<\/code> components. Only one will be shown at a time, depending on the device\u2019s screen size. The first is the same as the image component we started with, and it will show on screens 600px and up. Here\u2019s what the card looks like at larger screen widths.<\/p>\n\n\n\n<\/figure>\n\n\n\nThe second is a \u201cthumbnail\u201d version that we display for small screens. With these parameters, Cloudinary will generate a second optimized image that is 200×200 and ~6KB. By default, Cloudinary will intelligently crop the image so the important part of the image is still in view. You can read more about Cloudinary\u2019s extensive resizing and cropping options in the documentation<\/a>.<\/p>\n\n\n\nIt\u2019s worth highlighting that both versions of the image use the same source. We don\u2019t have to manage two images \u2013 we only upload a single source image and Cloudinary transforms it based on our request.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh7-us.googleusercontent.com\/DAf7d8JMSJvUW_YecMCHSw77Wuyf8l0HU-CtEWcjc9MOzpDcrhzW1Ep__HSUOhjVccYO2YWGowO2gX3_dAhXfRkFyk-XiqnOX78g28lxa_zdT8g0vw1MhYttQC7AwPpAfJDRM-X5BhLtm_OQMYPvfcQ\")
<\/figure>\n\n\n\nYou can find the completed demo code on GitHub<\/a> and view the live version<\/a>.<\/p>\n\n\n\nWhere to Go From Here<\/h2>\n\n\n\n
This only scratched the surface of the possibilities with the Cloudinary Image component \u2013 see the documentation<\/a> for more and sign up<\/a> for a free account today.<\/p>\n\n\n\nIn addition to CldImage<\/code>, Svelte Cloudinary includes several other components you can use in your Svelte app:<\/p>\n\n\n\n