{"id":31906,"date":"2023-11-29T07:00:00","date_gmt":"2023-11-29T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=31906"},"modified":"2025-10-26T14:14:47","modified_gmt":"2025-10-26T21:14:47","slug":"5-ways-transform-images-svelte-online-store","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/5-ways-transform-images-svelte-online-store","title":{"rendered":"5 Ways to Transform Images in Svelte for Enhancing Your Online Store"},"content":{"rendered":"\n

In this guide, we aim to enhance the aesthetics and user experience of your online store with five key techniques that utilize the power of Svelte, a modern web-framework, and Cloudinary, an image and video API solution. Jump right into the action with hands-on examples present in our GitHub Repo<\/a>, or explore these techniques live here<\/a>.<\/p>\n\n\n\n

The Unseen Impact of E-commerce<\/h2>\n\n\n\n

Gone are the days when one had to physically venture to shops. E-commerce has drastically remodeled how we purchase goods. From groceries and clothing to books and transportation, e-commerce caters to pretty much all consumer demands. This shift is a testament to the convenience offered by the online shopping experience, available around the clock from anywhere globally.<\/p>\n\n\n\n

The Critical Role of Images in Online Shopping<\/h2>\n\n\n\n

Picture this: a web-store with a detailed write-up about their premium quality shoes, but without any accompanying images. Regardless of how engaging your text might be, the lack of visual confirmation could deter potential customers. This anecdote depicts the importance of high-resolution images in an e-commerce platform. The first visualization of a product significantly contributes to the customer’s purchasing decision. Images aren’t just ornamental additions; they serve as an instigator to potential sales.<\/p>\n\n\n\n

The Power-Packed Combination: Svelte and Cloudinary<\/h2>\n\n\n\n

Amid rising competition, prioritizing areas such as performance optimization, accessibility, SEO management, scalability, security, and adherence to web standards is necessary for staying afloat. Here’s where building an online store with Svelte<\/a> proves beneficial. It offers features designed to enhance user engagement, such as reactivity, server-side rendering, no virtual DOM, and SEO metadata management. But what is e-commerce without top-notch visuals?<\/p>\n\n\n\n

Techniques to Optimize Images on Your Online Store<\/h2>\n\n\n\n

Creating enticing visuals can be an exhaustive process, and to optimize it, we use Cloudinary along with Svelte for e-commerce. Cloudinary aids us in managing and transforming images, creating a visually delightful experience for the user.<\/p>\n\n\n\n

We’ll continue by exploring five critical techniques.<\/p>\n\n\n\n

1. Dynamic Cropping and Resizing<\/h3>\n\n\n\n

Online stores often face the challenge of displaying product images of various dimensions and orientations while maintaining a consistent layout for accessibility and SEO purposes.<\/p>\n\n\n\n

In the dummy products array, some images are portraits, while some are landscapes. Such differences in layouts aren’t best for an optimized user experience.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Dynamic cropping and resizing allow us to present images in a structured and uniform manner, regardless of their original orientation or size.<\/p>\n\n\n\n

You can show a list of products like this:<\/p>\n\n\n

{#each products as { name, id, image, price, slug, sale }, index (id)}\n\t<div<\/span> class<\/span>=\"w-full h-full rounded-lg overflow-hidden bg-[#F0EFEB]\"<\/span>><\/span>\n\t\t<a<\/span> href<\/span>={<\/span>`\/product<\/span>\/${slug<\/span>}`}><\/span>\n\t\t\t<CldImage<\/span> src<\/span>={image}<\/span> alt<\/span>={name}<\/span> \/><\/span>\n\t\t <!-- Other Product Info --><\/span>\n\t\t<\/a<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n{\/each}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Here’s how the product grid will look:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
As you can see above, serving original images isn’t the best decision since they vary in layout and size, which results in a bad user experience.<\/p>\n\n\n\n
Now let’s update the code like this:<\/p>\n\n\n
<CldImage<\/span>\n  crop<\/span>=\"fill\"<\/span>\n  width<\/span>={500}<\/span>\n  height<\/span>={300}<\/span>\n  gravity<\/span>=\"auto\"<\/span>\n  src<\/span>={image}<\/span>\n  alt<\/span>={name}<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The above updates the crop of the images and makes them look much more consistent and optimized.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We’ll use the width<\/code> and height<\/code> props of CldImage<\/code> to resize images to 500×300 pixels. In the above example, we’ve set the crop<\/code> mode to fill<\/code>, which scales the image to the desired dimensions without distorting it, though it may remove part of the image, such as the top of the third product, the “Carrot Cake.” You can explore all the cropping and resizing modes available here<\/a>.<\/p>\n\n\n\n
2. Background Removal<\/h3>\n\n\n\n
You might want to remove the backgrounds to make the product images look the same and don’t want different backgrounds to distract the customers.<\/p>\n\n\n\n
You can remove the background by adding the removeBackground<\/code> option with the CldImage<\/code>. You might need to sign up for the Cloudinary AI Background Removal<\/a> add-on, which gives 15 free edits.<\/p>\n\n\n
<CldImage<\/span>\n  crop<\/span>=\"pad\"<\/span>\n  width<\/span>={500}<\/span>\n  height<\/span>={300}<\/span>\n  removeBackground<\/span>\n  gravity<\/span>=\"auto\"<\/span>\n  src<\/span>={image}<\/span>\n  alt<\/span>={name}<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Here is how the product cards will look like now.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Here’s a side-by-side comparison with the original image:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
After removing the background, we can put in a new background color to make the images look more consistent or have a similar feel.<\/p>\n\n\n\n
You can add a background like this:<\/p>\n\n\n
<CldImage<\/span>\n  crop<\/span>=\"pad\"<\/span>\n  width<\/span>={500}<\/span>\n  height<\/span>={300}<\/span>\n  removeBackground<\/span>\n  gravity<\/span>=\"auto\"<\/span>\n  background<\/span>=\"teal\"<\/span>\n  src<\/span>={image}<\/span>\n  alt<\/span>={name}<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
3. AI Generative Fill<\/h3>\n\n\n\n
Our online store needs a banner to highlight the products. The first image captures user’s attention. A popular choice for this is a carousel banner.<\/p>\n\n\n\n
With a carousel banner, you might serve the images in large widths like this.<\/p>\n\n\n
<CldImage<\/span> width<\/span>={1440}<\/span> height<\/span>={600}<\/span> priority<\/span> src<\/span>={image}<\/span> alt<\/span>={name}<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
In the above code, we specify the image dimensions as 1440 by 600 pixels. These dimensions may be bigger than the original image size, which can make the resultant image cropped, as seen below.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
When creating banners, cups, t-shirts, or other promotional items featuring the product, it’s challenging to predict every image size and use, especially after the product photo shoot is complete.<\/p>\n\n\n\n
To address this, we can use Cloudinary AI Generative Fill<\/a>, which uses AI to extend the image, filling in the extra space by mirroring the existing content.<\/p>\n\n\n\n
We can use this feature by adding the fillBackground<\/code> property to the CldImage<\/code> component for AI to intelligently fill in the background, expanding the image to the required dimensions.<\/p>\n\n\n
<CldImage<\/span>\n  fillBackground<\/span>\n  width<\/span>={1440}<\/span>\n  height<\/span>={600}<\/span>\n  priority<\/span>\n  src<\/span>={image}<\/span>\n  alt<\/span>={name}<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
With just a single update, the previously cropped image is now expanded. There’s no longer a need for costly product photo shoots.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
4. Overlays<\/h3>\n\n\n\n
You might want to feature special offers or new items with text overlays on the images; we can use the overlays<\/code> property of CldImage<\/code> for this.<\/p>\n\n\n\n
We can also customize its appearance, including the font, color, size, font weight, background, etc.<\/p>\n\n\n\n
You can add overlays by adding the following:<\/p>\n\n\n
<CldImage<\/span>\n  crop<\/span>=\"fill\"<\/span>\n  width<\/span>={500}<\/span>\n  height<\/span>={300}<\/span>\n  gravity<\/span>=\"auto\"<\/span>\n  src<\/span>={image}<\/span>\n  alt<\/span>={name}<\/span>\n  overlays<\/span>={<\/span>\n    sale<\/span>\n      ? [\n          {\n            width:<\/span> 130<\/span>,\n            crop:<\/span> \"fit<\/span>\",\n            position:<\/span> {\n              x:<\/span> 0<\/span>,\n              y:<\/span> 0<\/span>,\n              gravity:<\/span> \"north_west<\/span>\",\n            },\n            effects:<\/span> [\n              {\n                background:<\/span> \"red<\/span>\",\n              },\n            ],\n            text:<\/span> {\n              color:<\/span> \"white<\/span>\",\n              fontFamily:<\/span> \"Lato<\/span>\",\n              fontSize:<\/span> 32<\/span>,\n              fontWeight:<\/span> \"bold<\/span>\",\n              text:<\/span> sale<\/span>,\n            },\n          },\n        ]\n      :<\/span> []\n  }\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Here’s how the Product Cards look like now:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
To add an online store logo to banners or product images, we can use the overlays<\/code> property with the logo’s public ID.<\/p>\n\n\n\n
Update the Carousel Image code like this:<\/p>\n\n\n
<CldImage<\/span>\n  fillBackground<\/span>\n  width<\/span>={1440}<\/span>\n  height<\/span>={600}<\/span>\n  priority<\/span>\n  src<\/span>={image}<\/span>\n  alt<\/span>={name}<\/span>\n  overlays<\/span>={[<\/span>\n    {\n      publicId:<\/span> `pfdisarufkbbbcd3jv9m<\/span>`,\n      position:<\/span> {\n        x:<\/span> 10<\/span>,\n        y:<\/span> 10<\/span>,\n        gravity:<\/span> \"south_east<\/span>\",\n      },\n      effects:<\/span> [\n        {\n          crop:<\/span> \"fill<\/span>\",\n          gravity:<\/span> \"auto<\/span>\",\n          width:<\/span> 120<\/span>,\n          height:<\/span> 120<\/span>,\n        },\n      ],\n    },\n  ]}\n\/><\/span>;<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Here’s how the carousel image will look now.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
5. Optimization<\/h3>\n\n\n\n
Optimizing image formats and quality for faster page loads significantly improves user experience, leading to higher conversion rates.<\/p>\n\n\n\n
One way to boost performance is to serve images in modern image formats like webp<\/code> and avif<\/code> because of their amazing compression that can speed up page loading time.<\/p>\n\n\n\n
By default, this format<\/code> property is set to auto<\/code> which automatically opts images into being automatically delivered with the best image format<\/a> based on each visitor\u2019s browser optimizing loading time, saving bandwidth, and boosting performance.<\/p>\n\n\n\n
If you want to further customize the format in the images, we can set the format<\/code> property in the CldImage<\/code> component like so:<\/p>\n\n\n
format=\"webp\"<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
With this update, the product images will now serve in the webp<\/code> format.<\/p>\n\n\n\n
For further compression, the quality<\/code> property is similarly automatically set to auto<\/code>, which lets Cloudinary automatically use the best compression level and encoding settings to balance visual quality with file size tailored to the image content and the viewer\u2019s browser.<\/p>\n\n\n\n
This is particularly useful when the original images are high-resolution, but you only need to display a preview.<\/p>\n\n\n\n
If you\u2019d like to customize this, such as adding a higher compression, you can adjust the image’s quality with:<\/p>\n\n\n
quality='30'<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Bonus: Dynamic Social Media Cards<\/h3>\n\n\n\n
Optimized OG images and Twitter cards are crucial for social sharing, as they capture attention and drive traffic from social platforms to your online store.<\/p>\n\n\n\n
The CldOgImage<\/code> component from svelte-cloudinary<\/code> can be used to convert product images into optimized Open Graph images and Twitter cards for social sharing.<\/p>\n\n\n
<script<\/span>><\/span>\n\timport<\/span> { CldImage, CldOgImage } from<\/span> 'svelte-cloudinary'<\/span>;\n\n\texport<\/span> let<\/span> data;\n\n\t$: ({ name, id, image, price, slug, description, longDescription } = data);\n<\/span><\/script<\/span>><\/span>\n\n<svelte:head<\/span>><\/span>\n\t<title<\/span>><\/span>\n\t\t{name} | Cloudinary Svelte Demo\n\t<\/title<\/span>><\/span>\n\t<meta<\/span> name<\/span>=\"description\"<\/span> content<\/span>={description}<\/span> \/><\/span>\n<\/svelte:head<\/span>><\/span>\n\n<CldOgImage<\/span> src<\/span>={image}<\/span> alt<\/span>={<\/span>`${name<\/span>} | Cloudinary<\/span> Svelte<\/span> Demo<\/span>`}\n\ttwitterTitle<\/span>={<\/span>`${name<\/span>} | Cloudinary<\/span> Svelte<\/span> Demo<\/span>`} \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
This component adds the following meta tags to the Head element of the page.<\/p>\n\n\n
<title<\/span>><\/span>Strawberry Cream Jar | Cloudinary Svelte demo<\/title<\/span>><\/span>\n<meta<\/span>\n  name<\/span>=\"description\"<\/span>\n  content<\/span>=\"Moist carrot cake topped with rich cream cheese frosting. A timeless classic.\"<\/span>\n\/><\/span>\n<meta<\/span> property<\/span>=\"og:image:secure_url\"<\/span> content<\/span>=\"https:\/\/res.cloudinary.com\/singhashutoshk\/image\/upload\/c_fill,w_2400,h_1254,g_center\/c_scale,w_1200\/f_jpg\/q_auto\/bx1asngfemz0aulpad1q?_a=BBECd1AE0\"<\/span>><\/span>\n<meta<\/span> property<\/span>=\"og:image:alt\"<\/span> content<\/span>=\"Strawberry Cream Jar | Cloudinary Svelte Demo\"<\/span>><\/span>\n<meta<\/span> property<\/span>=\"twitter:title\"<\/span> content<\/span>=\"Strawberry Cream Jar | Cloudinary Svelte Demo\"<\/span>><\/span>\n<meta<\/span> property<\/span>=\"twitter:image\"<\/span> content<\/span>=\"https:\/\/res.cloudinary.com\/singhashutoshk\/image\/upload\/c_fill,w_2400,h_1254,g_center\/c_scale,w_1200\/f_webp\/q_auto\/bx1asngfemz0aulpad1q?_a=BBECd1AE0\"<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Here is how the above OG image looks like:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
CldOgImage uses the same API as CldImage, so we can customize it further to include a logo and text with overlays like this:<\/p>\n\n\n
<CldOgImage\n\tsrc={image}\n\toverlays={[\n\t\t{\n\t\t\tpublicId<\/span>: `pfdisarufkbbbcd3jv9m`<\/span>,\n\t\t\tposition<\/span>: {\n\t\t\t\tx<\/span>: 10<\/span>,\n\t\t\t\ty<\/span>: 10<\/span>,\n\t\t\t\tgravity<\/span>: 'south_east'<\/span>\n\t\t\t},\n\t\t\teffects<\/span>: [\n\t\t\t\t{\n\t\t\t\t\tcrop<\/span>: 'fill'<\/span>,\n\t\t\t\t\tgravity<\/span>: 'auto'<\/span>,\n\t\t\t\t\twidth<\/span>: 300<\/span>,\n\t\t\t\t\theight<\/span>: 300<\/span>\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\tposition<\/span>: {\n\t\t\t\tx<\/span>: 0<\/span>,\n\t\t\t\ty<\/span>: 0<\/span>,\n\t\t\t\tgravity<\/span>: 'center'<\/span>\n\t\t\t},\n\t\t\teffects<\/span>: [\n\t\t\t\t{\n\t\t\t\t\tbackground<\/span>: 'black'<\/span>\n\t\t\t\t}\n\t\t\t],\n\n\t\t\ttext<\/span>: {\n\t\t\t\tcolor<\/span>: 'white'<\/span>,\n\t\t\t\tfontFamily<\/span>: 'Open Sans'<\/span>,\n\t\t\t\tfontSize<\/span>: 140<\/span>,\n\t\t\t\tfontWeight<\/span>: 'bold'<\/span>,\n\t\t\t\ttext<\/span>: `${name}<\/span>`<\/span>\n\t\t\t}\n\t\t}\n\t]}\n\talt={`${name}<\/span> | Cloudinary Svelte Demo`<\/span>}\n\ttwitterTitle={`${name}<\/span> | Cloudinary Svelte Demo`<\/span>}\n\/><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Here is how these meta elements look like when parsed by social media channels. You can check it out here<\/a>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Wrapping Up<\/h2>\n\n\n\n
By leveraging Svelte and Cloudinary image management for your online store, you ensure a remarkable user experience powered by high-quality images and optimized performance. Boost the visual representation of your online store by effectively managing photos, including tasks like accurately sizing images, removing backgrounds, and even adding promotional text. Sign up for a free account<\/a> today.<\/p>\n\n\n\n
Here are some additional resources:<\/p>\n\n\n\n