Retail and e-commerce best practices

Cloudinary offers powerful features to enhance your image and video strategy, optimizing speed, SEO, accessibility, and overall visual impact. This section covers the core capabilities Cloudinary provides and highlights key considerations to guide your decisions before implementation.

Establish a single source of truth

Cloudinary serves as the central source of truth for images and videos across your platforms. By centralizing assets, teams can eliminate inconsistencies, work more efficiently, and maintain brand consistency. This prevents outdated versions, avoids duplication, and ensures the correct assets are always delivered.

Cloudinary provides three primary solutions to help teams centralize asset management:

• Assets Media Library: Cloudinary’s visual interface for managing, organizing, and accessing your assets.

  The Media Library Widget lets you embed a compact version of the library into other platforms, giving users quick access to assets without leaving their workflow.

  

  Media Library - Access it from other platforms in your tech stack

• Cloudinary APIs and SDKs: Programmatic tools for managing and accessing a centralized asset repository, enabling consistency across platforms, automation of workflows, and scalable integration.

• MediaFlows: A visual, low-code workflow builder for automating asset-related processes. Use prebuilt or custom blocks to connect Cloudinary with other platforms, perform transformations, trigger actions, and sync assets across systems.

  

  MediaFlows - Add blocks to configure a workflow

To integrate Cloudinary with other platforms

Store once, transform dynamically

Storing a single copy of each asset eliminates redundancy, reduces storage costs, and maintains consistency across platforms. Instead of managing multiple variations, Cloudinary keeps a master copy and dynamically generates personalized assets for different channels.

You can either store the original asset or a normalized version, depending on the type of asset and its uses:

Non-product assets

For non-product assets, it's best to store the original version and apply transformations only when delivering them. This approach provides maximum flexibility, allowing you to create versions dynamically with endless personalization options.

Store Original Generate Box Variation
on Delivery
w_550,h_450,c_crop,g_auto:box Generate Ring Variation
on Delivery
w_500,h_500,c_auto,g_auto:ring

To store the original non-product asset and deliver variations

Product assets with flexibility

If you want to maintain flexibility in how you deliver product assets—such as offering different angles or compositions—store the original version. This approach lets you tailor assets to different contexts using on-the-fly transformations, while ensuring all options remain open for use. For example:

• Customize focus: some product images may focus solely on the shoe—such as for product detail pages (PDPs)—while others feature a model wearing it to provide context and styling inspiration.

Store Original Display Shoes
e_extract:prompt_shoe;multiple_true/e_dropshadow

• Customize orientation: You may need to deliver assets in different orientations for mobile apps and desktop. For example, store the original landscape video and dynamically deliver a portrait version as needed. Use g_auto (AI-powered auto-gravity) to keep the main subject centered, whether displayed in landscape or portrait mode:

To store original product assets and deliver variations

Product assets with strict consistency

For product assets, you may want to store a standardized (normalized) version if you always deliver assets with specific characteristics (e.g., background removal, set aspect ratio, video duration).

For example, if you always deliver product images with a transparent or edited background, you should store the normalized version rather than the original.

Original Store normalized asset
e_background_removal
/c_scale,h_1000
/c_auto,g_auto,w_800,h_800 Deliver custom background
e_gen_backround_replace:prompt_marble

To store normalized product assets and deliver with minimal variations

Enhance searchability with metadata

Efficient metadata management and search capabilities keep assets organized, easy to find, and seamlessly retrievable. By enriching assets with metadata and leveraging Cloudinary’s search tools—including Visual Search, which finds images based on visual content rather than metadata—e-commerce teams can streamline workflows, automate retrieval, and improve content discovery.

Cloudinary also offers AI-powered auto-tagging, which detects objects in images and applies relevant metadata automatically. This reduces manual effort and ensures assets are categorized accurately for faster search and retrieval.

Metadata allows you to:

• Associate assets with products: Assign product SKUs as image and video metadata field values.
• Find assets quickly: Use metadata filters to locate specific files based on structured criteria.
• Store important details: Track expiration dates, licensing status, and product categories.
• Enhance collaboration: Improve asset discoverability when sharing with third-party stakeholders.

To create and manage metadata fields

Considerations for setting metadata values and searching

While managing metadata fields is most easily accomplished using the Media Library, preferred methods for setting field values and searching depend on asset type and system setup:

Setting metadata field values programmatically

Setting metadata field values via the Media Library

Searching for assets programmatically

Searching for assets via the Media Library

Manage asset rights and compliance

Properly managing asset rights and compliance ensures assets are used legally, securely, and in alignment with business policies. Cloudinary enables e-commerce teams to automate rights management at scale by enforcing expiration dates, restricting access, and dynamically adjusting permissions based on metadata.

Here's the dialog box for setting access control for a specific asset in the Media Library:

Here are some key strategies for asset rights management:

Enforce expiration dates for assets

Restrict access to assets

Restrict access dynamically

SEO strategies for asset URLs

The images and videos on your website have a significant impact on your site's SEO. While building SEO-friendly URLs directly affect SEO, factors like accessibility features and image and video optimization also play a role. See the Ensure asset accessibility and Optimize image and video performance sections for more details.

Here are some key strategies for SEO optimization:

Use a custom delivery hostname (CNAME)

Enable root path URLs

Use dynamic SEO suffixes

Ensure asset accessibility

Ensuring accessibility for all users, including those with visual, hearing, and cognitive impairments, improves both user experience and compliance with accessibility standards. Cloudinary provides tools to enhance accessibility in images, videos, and color visibility, making e-commerce assets more inclusive.

Here are some key strategies for ensuring accessibility:

Enhancing accessibility with alt text

Image alt text provides descriptions for screen readers, making images accessible to visually impaired users. It also improves SEO by helping search engines understand images and videos. Use Cloudinary’s AI-based image captioning to create clear and meaningful descriptions of images that you can apply dynamically.

To auto-generate alt text

Improving video accessibility with transcripts and subtitles

Video transcripts and subtitles make images and videos accessible to deaf and hard-of-hearing users while also improving SEO and engagement. Offer multilingual subtitles for broader audience reach.

To provide subtitles for your videos

Enhancing color accessibility

Color distinctions are crucial for accessibility, especially for colorblind users. Cloudinary provides color adjustment tools to ensure images and videos are readable by all users.

Original
X-Ray Mode Striped Overlays

To enhance color accessibility

Optimize image and video performance

High-quality images and videos enhance engagement and conversions, but unoptimized assets can slow down your site, negatively impacting user experience, SEO, and sales. Optimizing delivery, format, and loading behavior ensures fast load times while maintaining quality.

Here are some key strategies for optimizing image and video performance:

Use CDN caching for faster delivery

A Content Delivery Network (CDN) distributes assets across global servers, reducing latency by serving files from locations closer to users. This improves performance by:

• Speeding up page loads, reducing bounce rates.
• Easing server load, improving scalability.
• Boosting SEO, as Google favors fast-loading sites.

Cloudinary automatically delivers assets via a high-speed CDN, ensuring optimized content delivery.

For more information on fast CDN delivery, see CDN delivery options.

Optimize format and quality

Automatically selecting the best image format and optimizing quality ensures faster delivery without sacrificing visual appeal.

This video demonstrates the percentage of bandwidth saved when optimizing for format:

Compare the metrics on the original image and the optimized image to see the bandwidth savings achieved through format and quality optimization:

Original Optimized

To optimize format and quality

Enable adaptive bitrate streaming

Adaptive bitrate streaming adjusts video quality in real-time based on available bandwidth, improving performance by:

• Starting videos faster with minimal buffering.
• Optimizing playback across different devices and network conditions.
• Reducing data consumption for users on limited networks.

Here's an example using HLS:

To deliver videos from Cloudinary with adaptive bitrate streaming

For more information, see Adaptive bitrate streaming.

Implement lazy loading

Lazy loading defers loading of offscreen images and videos until needed, improving website performance.

This video demonstrates lazy loading in action. Notice how the image gets loaded only when the it enters the viewport:

To deliver videos from Cloudinary

Use image placeholders

Image placeholders improve loading performance by displaying a lightweight preview before the full image loads. This approach:

• Reduces perceived load time, improving user experience.
• Prevents layout shifts, avoiding content "jumping" as images load.
• Optimizes for large images, ensuring a smoother browsing experience.

Using the React, Vue, and Angular SDKs' plugin, you can select from multiple placeholder types, as shown below:

To implement placeholders

Deliver responsive images

Using properly sized images ensures faster loads on mobile, tablet, and desktop without unnecessary bandwidth use. Responsive images prevent wasted data on smaller screens.

To deliver responsive images using srcset, sizes, and dynamic transformations