{"id":32555,"date":"2024-01-08T07:00:00","date_gmt":"2024-01-08T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32555"},"modified":"2025-04-16T13:21:12","modified_gmt":"2025-04-16T20:21:12","slug":"optimizing-images-websites-svelte-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary","title":{"rendered":"Optimizing Images for Websites With Svelte and Cloudinary"},"content":{"rendered":"\n<p>Dustin Goodman, engineering manager at This Dot, explores how to use Svelte and Cloudinary to optimize images for websites. Svelte is a JavaScript framework that can be used to create interactive user interfaces, and Cloudinary is a cloud-based service that can be used to store, manage, and deliver high-quality images.<\/p>\n\n\n\n<p>Check out Goodman&#8217;s five essential tips for Svelte and Cloudinary in action below:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"5 Essential Tips for Svelte Cloudinary in Action\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/IWAiVnZ5Q3E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>In the video, Goodman emphasizes the importance of optimizing images for websites, as it can significantly boost performance and engaging user experiences. He then demonstrates how to use the <a href=\"https:\/\/cloudinary.com\/products\/image\">Cloudinary image<\/a> component to automatically optimize the images, reducing their size while maintaining quality. He also shows how to use dynamic transformations to crop and resize the images, as well as AI-driven processing to fill in any blanks and adjust the color.<\/p>\n\n\n\n<p>Finally, he adds overlays to the images to highlight new products or active sales, and uses the background removal feature to give the headphones a brick background to match the other images.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>Optimizing images for websites is essential for creating a great user experience. It can make a huge difference in page load times and overall performance<\/p><cite>Dustin Goodman, Engineering Manager, This Dot Labs<\/cite><\/blockquote><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why Optimize Images?<\/h2>\n\n\n\n<p>Optimizing images for websites is essential for creating a great user experience. It can make a huge difference in page load times and overall performance. Images that aren\u2019t optimized can take longer to load, resulting in a slower website and a less engaging user experience.<\/p>\n\n\n\n<p>Using Svelte and Cloudinary together can help optimize images for websites quickly and easily. With Cloudinary, you can automatically optimize images, reducing their size while maintaining quality by simply using their cloud dashboard and <code>CldImage<\/code> component like this:<\/p>\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\">```\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\t<span class=\"hljs-keyword\">import<\/span> { CldImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'svelte-cloudinary'<\/span>;\n\n\t<span class=\"hljs-comment\">\/**\n\t * @type {{ src: string, title: string }&#91;]}\n\t *\/<\/span>\n\t<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">let<\/span> images = &#91;];\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\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4\"<\/span>&gt;<\/span>\n\t{#each images as image}\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"overflow-hidden rounded-lg\"<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{500}<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"auto\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{image.src}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{image.title}<\/span> \/&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t{\/each}\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/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<h2 class=\"wp-block-heading\">Using the Cloudinary Image Component<\/h2>\n\n\n\n<p>Goodman demonstrates how to use the Cloudinary image component to automatically optimize images. This component can be used to crop and resize images, and AI-driven processing to fill in any blanks and adjust the color. It can also be used to add overlays to the images to highlight new products or active sales, and the background removal feature gives the headphones a brick background to match the other images.<\/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\">```\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n\t<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{500}<\/span>\n\t<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{500}<\/span>\n\t<span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"pad\"<\/span>\n\t<span class=\"hljs-attr\">removeBackground<\/span>=<span class=\"hljs-string\">{true}<\/span>\n\t<span class=\"hljs-attr\">effects<\/span>=<span class=\"hljs-string\">{&#91;<\/span>\n\t\t{\n\t\t\t<span class=\"hljs-attr\">autoContrast:<\/span> <span class=\"hljs-attr\">true<\/span>,\n\t\t\t<span class=\"hljs-attr\">vibrance:<\/span> <span class=\"hljs-attr\">10<\/span>,\n\t\t\t<span class=\"hljs-attr\">improve:<\/span> <span class=\"hljs-attr\">true<\/span>\n\t\t},\n\t\t<span class=\"hljs-attr\">...<\/span>(<span class=\"hljs-attr\">image.effects<\/span> ?? &#91;])\n\t]}\n\t<span class=\"hljs-attr\">overlays<\/span>=<span class=\"hljs-string\">{image.overlays<\/span> ?? &#91;]}\n\t<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{image.src}<\/span>\n\t<span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{image.title}<\/span>\n\/&gt;<\/span>\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<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Optimizing images for websites is essential for creating a great user experience. Using Svelte and Cloudinary together can help optimize images quickly and easily. With Cloudinary, you can automatically optimize images, reducing their size while maintaining quality. You can also use dynamic transformations to crop and resize the images, and leverage AI-driven processing to fill in any blanks and adjust the color. To ensure your images are consistent, add overlays to the images to highlight context and use the background removal feature.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dustin Goodman, engineering manager at This Dot, explores how to use Svelte and Cloudinary to optimize images for websites. Svelte is a JavaScript framework that can be used to create interactive user interfaces, and Cloudinary is a cloud-based service that can be used to store, manage, and deliver high-quality images. Check out Goodman&#8217;s five essential [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":32570,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165,388,376],"class_list":["post-32555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation","tag-optimize","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>5 Image Optimization Tips for Websites With Svelte and Cloudinary<\/title>\n<meta name=\"description\" content=\"Dustin Goodman, engineering manager at This Dot, explores how to use Svelte and Cloudinary to optimize images for websites. Read on.\" \/>\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\/optimizing-images-websites-svelte-cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizing Images for Websites With Svelte and Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Dustin Goodman, engineering manager at This Dot, explores how to use Svelte and Cloudinary to optimize images for websites. Read on.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-08T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T20:21:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-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\/optimizing-images-websites-svelte-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Optimizing Images for Websites With Svelte and Cloudinary\",\"datePublished\":\"2024-01-08T15:00:00+00:00\",\"dateModified\":\"2025-04-16T20:21:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary\"},\"wordCount\":460,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA\",\"keywords\":[\"Image Transformation\",\"Optimize\",\"Svelte\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary\",\"name\":\"5 Image Optimization Tips for Websites With Svelte and Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA\",\"datePublished\":\"2024-01-08T15:00:00+00:00\",\"dateModified\":\"2025-04-16T20:21:12+00:00\",\"description\":\"Dustin Goodman, engineering manager at This Dot, explores how to use Svelte and Cloudinary to optimize images for websites. Read on.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimizing Images for Websites With Svelte and 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":"5 Image Optimization Tips for Websites With Svelte and Cloudinary","description":"Dustin Goodman, engineering manager at This Dot, explores how to use Svelte and Cloudinary to optimize images for websites. Read on.","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\/optimizing-images-websites-svelte-cloudinary","og_locale":"en_US","og_type":"article","og_title":"Optimizing Images for Websites With Svelte and Cloudinary","og_description":"Dustin Goodman, engineering manager at This Dot, explores how to use Svelte and Cloudinary to optimize images for websites. Read on.","og_url":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2024-01-08T15:00:00+00:00","article_modified_time":"2025-04-16T20:21:12+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-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\/optimizing-images-websites-svelte-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Optimizing Images for Websites With Svelte and Cloudinary","datePublished":"2024-01-08T15:00:00+00:00","dateModified":"2025-04-16T20:21:12+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary"},"wordCount":460,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA","keywords":["Image Transformation","Optimize","Svelte"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary","url":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary","name":"5 Image Optimization Tips for Websites With Svelte and Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA","datePublished":"2024-01-08T15:00:00+00:00","dateModified":"2025-04-16T20:21:12+00:00","description":"Dustin Goodman, engineering manager at This Dot, explores how to use Svelte and Cloudinary to optimize images for websites. Read on.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/optimizing-images-websites-svelte-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimizing Images for Websites With Svelte and 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\/v1704749557\/5_Tips_Svelte_in_action-Blog\/5_Tips_Svelte_in_action-Blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32555","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=32555"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32555\/revisions"}],"predecessor-version":[{"id":37448,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32555\/revisions\/37448"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32570"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}