{"id":31935,"date":"2023-11-30T07:00:00","date_gmt":"2023-11-30T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=31935"},"modified":"2023-11-30T16:03:38","modified_gmt":"2023-12-01T00:03:38","slug":"svelte-beginners-getting-started-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary","title":{"rendered":"Svelte for Beginners: Getting Started With Cloudinary"},"content":{"rendered":"\n<p>There are many JavaScript frameworks on the market today, and Svelte is one of the most exciting. Unlike other frameworks like React or Vue that do most of their work at runtime, Svelte <em>compiles<\/em> your component code for maximum efficiency and performance. It often scores highly in industry surveys \u2014 developers who use it enjoy using it, and developers who don\u2019t are interested in learning it.<\/p>\n\n\n\n<p>In this article, we\u2019ll explain what you need to know to get started with Svelte and how you can optimize your images with Cloudinary for even more performant Svelte apps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding Svelte<\/h2>\n\n\n\n<p>Let\u2019s understand the key features that set Svelte apart.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Compiled components.<\/strong> Svelte\u2019s main innovation is shifting the work of a framework to <em>compile-time<\/em> instead of <em>runtime<\/em>. Instead of writing component code that directly runs in the user\u2019s browser, your components are compiled ahead of time so the browser can do as little work as possible. This means that Svelte apps on average have smaller bundle sizes, since they don\u2019t need to ship a heavy framework runtime to the browser.&nbsp;<\/li>\n\n\n\n<li><strong>Simple state management. <\/strong>Managing state with Svelte is about as simple as you can get. To declare a piece of state, you create a variable with <code>let<\/code> and reference it in your component\u2019s template.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">```svelte\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">let<\/span> name = <span class=\"hljs-string\">'world'<\/span>;\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Hello {name}!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n```\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then, to update the state, assign to it and the component will update automatically.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">```svelte\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Hello {name}!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">on:click<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> {\n    name = 'folks'\n}}&gt;Update name<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n```\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Behind the scenes, the Svelte compiler will wire things up so that assigning to the <code>name<\/code> variable updates the correct place in the DOM. Updating state like this is only possible because Svelte is a compiler. There isn\u2019t a way in regular JavaScript to make assigning to a variable like this trigger an update to the DOM. But because Svelte is a compiler, it can <em>design<\/em> a more enjoyable component authoring experience instead of being constrained by what\u2019s possible in regular JavaScript.<\/p>\n\n\n\n<p>The upcoming release of Svelte 5 will introduce a new reactivity model with <a href=\"https:\/\/svelte.dev\/blog\/runes\" target=\"_blank\" rel=\"noreferrer noopener\">runes<\/a>, allowing you to extend Svelte\u2019s reactivity outside of components.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Minimal boilerplate<\/strong>. Svelte values a component authoring experience that lets you <a href=\"https:\/\/svelte.dev\/blog\/write-less-code\" target=\"_blank\" rel=\"noreferrer noopener\">write less code<\/a>. As we saw above, updating state is as simple as assigning to a variable. Svelte also includes features like <a href=\"https:\/\/svelte.dev\/docs\/element-directives#bind-property\" target=\"_blank\" rel=\"noreferrer noopener\">two-way binding<\/a><strong> <\/strong>to simplify controlling form inputs and <a href=\"https:\/\/svelte.dev\/docs\/svelte-components#script-3-$-marks-a-statement-as-reactive\" target=\"_blank\" rel=\"noreferrer noopener\">reactive declarations<\/a> that make it easy to derive state.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Batteries included. <\/strong>Building web apps is more than just reactive components. Svelte aims to handle common web app concerns beyond reactivity, so it also includes solutions for:\n<ul class=\"wp-block-list\">\n<li>Scoped styling.<\/li>\n\n\n\n<li>Animations with <code>transition:<\/code> and <code>animate:<\/code> directives.<\/li>\n\n\n\n<li>Global state management with stores.<\/li>\n\n\n\n<li>Form bindings with <code>bind:value<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>In addition, the Svelte team maintains <a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">SvelteKit<\/a>, the official Svelte application framework. SvelteKit includes routing, form handling, API endpoints, server rendering, packaging your app for various deployment platforms, and more features that make it easy to build a complete app with Svelte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comparing With Other Frameworks<\/h2>\n\n\n\n<p>One of the frameworks most unlike Svelte is React. While Svelte components are HTML-first (you write JavaScript inside a HTML-like template language), React components are JavaScript first (you write JSX inside a JavaScript function). In addition, Svelte has a simpler mental model, especially in regards to state management. Svelte&#8217;s compile-time approach makes it more efficient at updating the DOM and allows it to ship less code to the browser, but because React doesn&#8217;t have a compiler, it gives the most flexibility in how you write your components. Svelte also includes more features out of the box, like scoped styles, stores, and transitions.<\/p>\n\n\n\n<p>Vue is a lot more similar to Svelte. Both frameworks are template first, use a compiler, and include features like scoped styles. However, Svelte uses its compiler much more extensively than Vue does. It also has a much smaller runtime than Vue, though Vue&#8217;s runtime is much smaller than that of React. Svelte is also more opinionated &#8212; Vue gives you a lot of options for how you write your components (e.g. options vs composition API), while Svelte generally has one way to do things.<\/p>\n\n\n\n<p>Svelte isn\u2019t on the same level usage-wise as more established frameworks like <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a> or <a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vue<\/a>, but it&nbsp;has a passionate community and has more than proved itself to be a major contender in the front-end framework space. If you\u2019re interested to learn more about Svelte, take a look at the <a href=\"https:\/\/learn.svelte.dev\" target=\"_blank\" rel=\"noreferrer noopener\">official Svelte tutorial<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started With Svelte and Cloudinary<\/h2>\n\n\n\n<p>Just like Svelte makes it easy to write a performant web app, Cloudinary complements Svelte by making it easy to include performant images. By hosting your images with Cloudinary, Cloudinary will optimize and serve them to your web app\u2019s users. Some of the optimizations Cloudinary applies include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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<li>Converting the image to a modern format (like AVIF or WebP) that can reduce the file size further. Cloudinary will serve different formats depending on the browser, since image format support can vary.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>In addition, Cloudinary can apply various transformations to your images, such as dynamic cropping, background removal, and overlaying text or images. We\u2019ll see a few examples of these transformations later in the post.<br>The easiest way to use Cloudinary in your Svelte app is with the <a href=\"https:\/\/svelte.cloudinary.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\"><code>svelte-cloudinary<\/code><\/a> package. This package lets you use a Svelte component to display images from Cloudinary instead of writing the Cloudinary URL yourself. For example, instead of constructing the <code>src<\/code> for this <code>img<\/code> manually, you can use the <code>&lt;CldImage&gt;<\/code> component:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">```svelte\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>With CldImage<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n    <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{840}<\/span>\n    <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{700}<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"orange-cat\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"An orange cat with its head leaning to one side, looking quizzically at the camera\"<\/span>\n\/&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Without CldImage<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/dimxnfwwf\/image\/upload\/c_limit,w_700\/f_auto\/q_auto\/orange-cat\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"An orange cat with its head leaning to one side, looking quizzically at the camera\"<\/span>\n\/&gt;<\/span>\n```\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can also use Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\/node_integration\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js SDK<\/a> in your SvelteKit server routes to upload and transform images and manage your media stored in Cloudinary.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Examples of Cloudinary and Svelte<\/h2>\n\n\n\n<p>Using the <code>&lt;CldImage&gt;<\/code> component can be as simple as passing a <code>src<\/code> and the dimensions of the image, but there are all sorts of different customizations you can apply. Let\u2019s see some different ways to use the component in a Svelte app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Responsive Images<\/strong><\/h3>\n\n\n\n<p>You can set a <code>sizes<\/code> prop to tell the browser what size image to request at different breakpoints. This can help performance by instructing the browser to only download an image that is appropriate for the current screen width.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">```svelte\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n    <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{840}<\/span>\n    <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{700}<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"orange-cat\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"An orange cat with its head leaning to one side, looking quizzically at the camera\"<\/span>\n    <span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"(min-width: 600px) 33vw,\n   \t\t ((min-width: 300px) and (max-width: 600px)) 50vw,\n   \t\t (max-width: 300px) 100vw\"<\/span>\n\/&gt;<\/span>\n```\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This prop is the same as the <code>sizes<\/code> attribute on a regular <code>&lt;img&gt;<\/code>, so see <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLImageElement\/sizes\" target=\"_blank\" rel=\"noreferrer noopener\">MDN<\/a> for more details on how it works.<\/p>\n\n\n\n<p>The `CldImage` component will automatically generate the image\u2019s <code>srcset<\/code> property for you. If you inspect the image in your browser DevTools, you can see the generated <code>srcset<\/code> with the different images available for the browser to request. Note that the screenshot below truncates the actual attribute value.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"980\" height=\"380\" data-public-id=\"Web_Assets\/blog\/svelte-beginners-cloudinary-1_319387d268\/svelte-beginners-cloudinary-1_319387d268.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_980,h_380,c_scale\/f_auto,q_auto\/v1701387409\/Web_Assets\/blog\/svelte-beginners-cloudinary-1_319387d268\/svelte-beginners-cloudinary-1_319387d268.png?_i=AA\" alt=\"\" class=\"wp-post-31935 wp-image-31938\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1701387409\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387409\/Web_Assets\/blog\/svelte-beginners-cloudinary-1_319387d268\/svelte-beginners-cloudinary-1_319387d268.png?_i=AA 980w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387409\/Web_Assets\/blog\/svelte-beginners-cloudinary-1_319387d268\/svelte-beginners-cloudinary-1_319387d268.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387409\/Web_Assets\/blog\/svelte-beginners-cloudinary-1_319387d268\/svelte-beginners-cloudinary-1_319387d268.png?_i=AA 768w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Background Removal<\/strong><\/h3>\n\n\n\n<p>Cloudinary can <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_ai_background_removal_addon\" target=\"_blank\" rel=\"noreferrer noopener\">remove the background from your images<\/a> on the fly if you set the <code>removeBackground<\/code> prop on the component. You can also set <code>background<\/code> to apply a solid color background instead.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">```svelte\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n    <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{840}<\/span>\n    <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{700}<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"orange-cat\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"An orange cat with its head leaning to one side, looking quizzically at the camera\"<\/span>\n    <span class=\"hljs-attr\">removeBackground<\/span>\n    <span class=\"hljs-attr\">background<\/span>=<span class=\"hljs-string\">\"rgb:033F63\"<\/span>\n\/&gt;<\/span>\n```\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"545\" data-public-id=\"Web_Assets\/blog\/svelte-beginners-cloudinary-2_31939a8b9b\/svelte-beginners-cloudinary-2_31939a8b9b.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_545,c_scale\/f_auto,q_auto\/v1701387406\/Web_Assets\/blog\/svelte-beginners-cloudinary-2_31939a8b9b\/svelte-beginners-cloudinary-2_31939a8b9b.png?_i=AA\" alt=\"\" class=\"wp-post-31935 wp-image-31939\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1701387406\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387406\/Web_Assets\/blog\/svelte-beginners-cloudinary-2_31939a8b9b\/svelte-beginners-cloudinary-2_31939a8b9b.png?_i=AA 1696w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387406\/Web_Assets\/blog\/svelte-beginners-cloudinary-2_31939a8b9b\/svelte-beginners-cloudinary-2_31939a8b9b.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387406\/Web_Assets\/blog\/svelte-beginners-cloudinary-2_31939a8b9b\/svelte-beginners-cloudinary-2_31939a8b9b.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387406\/Web_Assets\/blog\/svelte-beginners-cloudinary-2_31939a8b9b\/svelte-beginners-cloudinary-2_31939a8b9b.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387406\/Web_Assets\/blog\/svelte-beginners-cloudinary-2_31939a8b9b\/svelte-beginners-cloudinary-2_31939a8b9b.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To use the <code>removeBackground<\/code> prop, you need to enable the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_ai_background_removal_addon\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary AI Background Removal add-on<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Intelligent Cropping<\/strong><\/h3>\n\n\n\n<p>Cloudinary can also <a href=\"https:\/\/cloudinary.com\/documentation\/resizing_and_cropping\" target=\"_blank\" rel=\"noreferrer noopener\">intelligently crop your images<\/a>. In this example we apply <code>crop=\"thumb\"<\/code> to crop the image for a thumbnail. By default, the component applies Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\/resizing_and_cropping#automatic_cropping_g_auto\" target=\"_blank\" rel=\"noreferrer noopener\">\u201cautomatic\u201d gravity mode<\/a> that keeps the most interesting area of the image in frame. In our example, that\u2019s the puppy\u2019s face, even though it\u2019s at the bottom of the picture.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">```svelte\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Uncropped image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n    <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{600}<\/span>\n    <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{400}<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"white-and-brown-puppy\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"A white and brown puppy looking into the camera.\"<\/span>\n\/&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Cropped image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n    <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{300}<\/span>\n    <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{300}<\/span>\n    <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"thumb\"<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"white-and-brown-puppy\"<\/span>\n    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"A white and brown puppy looking into the camera.\"<\/span>\n\/&gt;<\/span>\n```\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"912\" height=\"780\" data-public-id=\"Web_Assets\/blog\/svelte-beginners-cloudinary-3_31940b2a03\/svelte-beginners-cloudinary-3_31940b2a03.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_912,h_780,c_scale\/f_auto,q_auto\/v1701387402\/Web_Assets\/blog\/svelte-beginners-cloudinary-3_31940b2a03\/svelte-beginners-cloudinary-3_31940b2a03.png?_i=AA\" alt=\"\" class=\"wp-post-31935 wp-image-31940\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1701387402\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387402\/Web_Assets\/blog\/svelte-beginners-cloudinary-3_31940b2a03\/svelte-beginners-cloudinary-3_31940b2a03.png?_i=AA 912w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387402\/Web_Assets\/blog\/svelte-beginners-cloudinary-3_31940b2a03\/svelte-beginners-cloudinary-3_31940b2a03.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701387402\/Web_Assets\/blog\/svelte-beginners-cloudinary-3_31940b2a03\/svelte-beginners-cloudinary-3_31940b2a03.png?_i=AA 768w\" sizes=\"auto, (max-width: 912px) 100vw, 912px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Where to Next?<\/h2>\n\n\n\n<p>Hopefully this gives you a good idea of the possibilities with Svelte and Cloudinary. For more on Svelte and Cloudinary, check out the following resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.svelte.dev\" target=\"_blank\" rel=\"noreferrer noopener\">The official Svelte tutorial<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/svelte.cloudinary.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Svelte-Cloudinary documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/integrating-cloudinary-with-svelte-and-sveltekit\" target=\"_blank\" rel=\"noreferrer noopener\">Integrating Cloudinary with Svelte and SvelteKit<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a Carousel in 3 Ways in Svelte<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/javascript_configuration_in_svelte_tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">Configure the Javascript SDK in Svelte (video tutorial)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/transform_images_svelte_tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">Transform and optimize images in Svelte (video tutorial)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/upload_assets_in_sveltekit_tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">Upload assets in a SvelteKit app (video tutorial)<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>There are many JavaScript frameworks on the market today, and Svelte is one of the most exciting. Unlike other frameworks like React or Vue that do most of their work at runtime, Svelte compiles your component code for maximum efficiency and performance. It often scores highly in industry surveys \u2014 developers who use it enjoy [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":31937,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[336,251,376],"class_list":["post-31935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-ai","tag-responsive-images","tag-svelte"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Beginner&#039;s Guide to Svelte and Cloudinary Integration<\/title>\n<meta name=\"description\" content=\"Dive into Svelte and learn its integration with Cloudinary. Discover unique features, practical demos, and techniques for creating competitive web apps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Svelte for Beginners: Getting Started With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Dive into Svelte and learn its integration with Cloudinary. Discover unique features, practical demos, and techniques for creating competitive web apps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-30T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T00:03:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Svelte for Beginners: Getting Started With Cloudinary\",\"datePublished\":\"2023-11-30T15:00:00+00:00\",\"dateModified\":\"2023-12-01T00:03:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary\"},\"wordCount\":1280,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA\",\"keywords\":[\"AI\",\"Responsive Images\",\"Svelte\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary\",\"name\":\"Beginner's Guide to Svelte and Cloudinary Integration\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA\",\"datePublished\":\"2023-11-30T15:00:00+00:00\",\"dateModified\":\"2023-12-01T00:03:38+00:00\",\"description\":\"Dive into Svelte and learn its integration with Cloudinary. Discover unique features, practical demos, and techniques for creating competitive web apps.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Svelte for Beginners: Getting Started With Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Beginner's Guide to Svelte and Cloudinary Integration","description":"Dive into Svelte and learn its integration with Cloudinary. Discover unique features, practical demos, and techniques for creating competitive web apps.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary","og_locale":"en_US","og_type":"article","og_title":"Svelte for Beginners: Getting Started With Cloudinary","og_description":"Dive into Svelte and learn its integration with Cloudinary. Discover unique features, practical demos, and techniques for creating competitive web apps.","og_url":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2023-11-30T15:00:00+00:00","article_modified_time":"2023-12-01T00:03:38+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Svelte for Beginners: Getting Started With Cloudinary","datePublished":"2023-11-30T15:00:00+00:00","dateModified":"2023-12-01T00:03:38+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary"},"wordCount":1280,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA","keywords":["AI","Responsive Images","Svelte"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary","url":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary","name":"Beginner's Guide to Svelte and Cloudinary Integration","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA","datePublished":"2023-11-30T15:00:00+00:00","dateModified":"2023-12-01T00:03:38+00:00","description":"Dive into Svelte and learn its integration with Cloudinary. Discover unique features, practical demos, and techniques for creating competitive web apps.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/svelte-beginners-getting-started-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Svelte for Beginners: Getting Started With Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701384697\/Svelte_beginners_Cloudinary-blog\/Svelte_beginners_Cloudinary-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=31935"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31935\/revisions"}],"predecessor-version":[{"id":31944,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31935\/revisions\/31944"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/31937"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=31935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=31935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=31935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}