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, or explore these techniques live here.
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.
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.
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 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?
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.
We’ll continue by exploring five critical techniques.
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.
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.
Dynamic cropping and resizing allow us to present images in a structured and uniform manner, regardless of their original orientation or size.
You can show a list of products like this:
{#each products as { name, id, image, price, slug, sale }, index (id)}
<div class="w-full h-full rounded-lg overflow-hidden bg-[#F0EFEB]">
<a href={`/product/${slug}`}>
<CldImage src={image} alt={name} />
<!-- Other Product Info -->
</a>
</div>
{/each}Code language: HTML, XML (xml)Here’s how the product grid will look:
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.
Now let’s update the code like this:
<CldImage
crop="fill"
width={500}
height={300}
gravity="auto"
src={image}
alt={name}
/>Code language: HTML, XML (xml)The above updates the crop of the images and makes them look much more consistent and optimized.
We’ll use the width and height props of CldImage to resize images to 500×300 pixels. In the above example, we’ve set the crop mode to fill, 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.
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.
You can remove the background by adding the removeBackground option with the CldImage. You might need to sign up for the Cloudinary AI Background Removal add-on, which gives 15 free edits.
<CldImage
crop="pad"
width={500}
height={300}
removeBackground
gravity="auto"
src={image}
alt={name}
/>Code language: HTML, XML (xml)Here is how the product cards will look like now.
Here’s a side-by-side comparison with the original image:
After removing the background, we can put in a new background color to make the images look more consistent or have a similar feel.
You can add a background like this:
<CldImage
crop="pad"
width={500}
height={300}
removeBackground
gravity="auto"
background="teal"
src={image}
alt={name}
/>Code language: HTML, XML (xml)
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.
With a carousel banner, you might serve the images in large widths like this.
<CldImage width={1440} height={600} priority src={image} alt={name} />Code language: HTML, XML (xml)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.
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.
To address this, we can use Cloudinary AI Generative Fill, which uses AI to extend the image, filling in the extra space by mirroring the existing content.
We can use this feature by adding the fillBackground property to the CldImage component for AI to intelligently fill in the background, expanding the image to the required dimensions.
<CldImage
fillBackground
width={1440}
height={600}
priority
src={image}
alt={name}
/>Code language: HTML, XML (xml)With just a single update, the previously cropped image is now expanded. There’s no longer a need for costly product photo shoots.
You might want to feature special offers or new items with text overlays on the images; we can use the overlays property of CldImage for this.
We can also customize its appearance, including the font, color, size, font weight, background, etc.
You can add overlays by adding the following:
<CldImage
crop="fill"
width={500}
height={300}
gravity="auto"
src={image}
alt={name}
overlays={
sale
? [
{
width: 130,
crop: "fit",
position: {
x: 0,
y: 0,
gravity: "north_west",
},
effects: [
{
background: "red",
},
],
text: {
color: "white",
fontFamily: "Lato",
fontSize: 32,
fontWeight: "bold",
text: sale,
},
},
]
: []
}
/>Code language: HTML, XML (xml)Here’s how the Product Cards look like now:
To add an online store logo to banners or product images, we can use the overlays property with the logo’s public ID.
Update the Carousel Image code like this:
<CldImage
fillBackground
width={1440}
height={600}
priority
src={image}
alt={name}
overlays={[
{
publicId: `pfdisarufkbbbcd3jv9m`,
position: {
x: 10,
y: 10,
gravity: "south_east",
},
effects: [
{
crop: "fill",
gravity: "auto",
width: 120,
height: 120,
},
],
},
]}
/>;Code language: HTML, XML (xml)Here’s how the carousel image will look now.
Optimizing image formats and quality for faster page loads significantly improves user experience, leading to higher conversion rates.
One way to boost performance is to serve images in modern image formats like webp and avif because of their amazing compression that can speed up page loading time.
By default, this format property is set to auto which automatically opts images into being automatically delivered with the best image format based on each visitor’s browser optimizing loading time, saving bandwidth, and boosting performance.
If you want to further customize the format in the images, we can set the format property in the CldImage component like so:
format="webp"Code language: JavaScript (javascript)With this update, the product images will now serve in the webp format.
For further compression, the quality property is similarly automatically set to auto, 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’s browser.
This is particularly useful when the original images are high-resolution, but you only need to display a preview.
If you’d like to customize this, such as adding a higher compression, you can adjust the image’s quality with:
quality='30'Code language: JavaScript (javascript)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.
The CldOgImage component from svelte-cloudinary can be used to convert product images into optimized Open Graph images and Twitter cards for social sharing.
<script>
import { CldImage, CldOgImage } from 'svelte-cloudinary';
export let data;
$: ({ name, id, image, price, slug, description, longDescription } = data);
</script>
<svelte:head>
<title>
{name} | Cloudinary Svelte Demo
</title>
<meta name="description" content={description} />
</svelte:head>
<CldOgImage src={image} alt={`${name} | Cloudinary Svelte Demo`}
twitterTitle={`${name} | Cloudinary Svelte Demo`} />Code language: HTML, XML (xml)This component adds the following meta tags to the Head element of the page.
<title>Strawberry Cream Jar | Cloudinary Svelte demo</title>
<meta
name="description"
content="Moist carrot cake topped with rich cream cheese frosting. A timeless classic."
/>
<meta property="og:image:secure_url" content="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">
<meta property="og:image:alt" content="Strawberry Cream Jar | Cloudinary Svelte Demo">
<meta property="twitter:title" content="Strawberry Cream Jar | Cloudinary Svelte Demo">
<meta property="twitter:image" content="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">Code language: HTML, XML (xml)Here is how the above OG image looks like:
CldOgImage uses the same API as CldImage, so we can customize it further to include a logo and text with overlays like this:
<CldOgImage
src={image}
overlays={[
{
publicId: `pfdisarufkbbbcd3jv9m`,
position: {
x: 10,
y: 10,
gravity: 'south_east'
},
effects: [
{
crop: 'fill',
gravity: 'auto',
width: 300,
height: 300
}
]
},
{
position: {
x: 0,
y: 0,
gravity: 'center'
},
effects: [
{
background: 'black'
}
],
text: {
color: 'white',
fontFamily: 'Open Sans',
fontSize: 140,
fontWeight: 'bold',
text: `${name}`
}
}
]}
alt={`${name} | Cloudinary Svelte Demo`}
twitterTitle={`${name} | Cloudinary Svelte Demo`}
/>Code language: JavaScript (javascript)
Here is how these meta elements look like when parsed by social media channels. You can check it out here.
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.
Here are some additional resources:
If you found this article helpful and want to discuss it in more detail, head over to Cloudinary Community forum and its associated Discord.
