Programmable Media
Menu

Retail and e-commerce best practices

Last updated: Feb-27-2025

Effectively managing images and videos on your e-commerce site is crucial for delivering a seamless customer experience. 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.

Tip
There are many differences between product and non-product assets and we'll refer to this frequently in the guide. Product assets refer to images and videos that are displayed with a product, usually on PDP or PLP pages. Non-product assets is how we'll refer to editorial or content images and videos, such as banners, heroes, and marketing assets.

On this page:

Establish a single source of truth

Cloudinary serves as the central source of truth for images and videos across your platforms, as shown in this diagram:

E-commerce tech stack diagram

By managing assets in a single, centralized location, teams can eliminate inconsistencies, streamline workflows, and maintain brand consistency across all platforms.

Benefits of centralizing assets:

  • Single source of truth: Prevents outdated versions and duplication.
  • Seamless collaboration: Ensures all teams access the latest assets.
  • Consistent asset delivery Integrates with your platforms to always serve the correct version.

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

Solution What it Does How it Helps
Use the Media Library Widget Embeds the Media Library for asset management within other platforms. Enables quick access without switching between tools.
Integrate Cloudinary APIs or SDKs Programmatically manage and deliver assets. Automates workflows and enhances scalability.

Media Library - single source of truth

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

Note
When you sign up for a free Cloudinary account, you automatically gain access to the Media Library through Cloudinary Assets, as well as Cloudinary's APIs via Programmable Media, Cloudinary’s developer product. If you’re an e-commerce company, you’ll likely need to upgrade to a paid or enterprise plan to fully utilize these products.

Store once, transform dynamically

Maintaining a single source of truth for your assets reduces redundancy, lowers storage costs, and ensures consistency across platforms. Instead of storing multiple versions of the same asset, Cloudinary stores a single master copy and dynamically generates derived assets on demand using [transformations].

Why is this powerful?

  • Eliminate duplicates: No need to manually create and store different versions for web, print, and social media.
  • Automate at scale: Cloudinary’s AI-powered transformations intelligently adjust crops, resizing, and formatting to ensure that the main subject remains in focus and visually balanced across platforms.
  • Fast, optimized delivery: Derived assets are instantly generated via URLs with transformation parameters and cached on a CDN for rapid access.

The following chart provides guidelines about how to store and deliver different types of assets:

Asset Type Storage Recommendation Why? Delivery Approach
Non-product assets Store the original and transform on delivery Maximizes flexibility for generating variations Dynamically transformed via URL parameters when requested
Product assets (with flexibility) Store the original and transform as needed Allows different perspectives and use cases Dynamically transformed based on context (e.g., cropped, resized, or recolored for different uses)
Product assets (with strict consistency) Store a normalized version Ensures consistent look across platforms Delivered as preprocessed, standardized assets with minimal transformation

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 Box Variation Generate Box Variation
on Delivery
w_550,h_450,c_crop,g_auto:box Ring Variation Generate Ring Variation
on Delivery
w_500,h_500,c_auto,g_auto:ring

Product assets with flexibility

If you want to maintain flexibility in how you deliver product assets, as offering different angles or compositions, you may also want to store the original version. This allows for on-the-fly transformations tailored to different contexts while keeping a single source of truth.

For example, some product images may focus solely on the shoe—such as for product detail pages (PDPs)—while others show a model wearing it to provide context and styling inspiration.

Store Original Zoom In on Delivery Zoom In on Delivery
c_crop,g_auto:shoes,w_230,h_230

For videos, flexibility is essential when delivering in different orientations. Use g_auto (AI-powered auto-gravity) to ensure the main subject remains centered, whether displayed in landscape or portrait mode:

Original video (click to play)
Default crop
(Center gravity) g_auto:dog

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.

Sample product asset

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, 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: Link product images and videos to their corresponding SKUs.
  • 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 team collaboration: Improve asset discoverability when sharing with third-party stakeholders or teams.

Advanced Search

Metadata management depends on you store and retrieve the assets:

Asset Type Metadata Handling Search Approach
Product assets Metadata is programmatically generated from the file, PIM, or product database Search is often done programmatically, retrieving assets programmatically via public IDs or tags
Non-product assets delivered via a non-integrated front-end Metadata is typically added manually in the Media Library Programmatically search for and place assets on your front-end
Non-product assets Metadata is typically added manually in the Media Library Search is manual, using Cloudinary’s Media Library search tools

Managing metadata

Metadata can be managed either programmatically or manually via the Media Library.

Use search methods to find assets

Cloudinary offers automated and manual search options to quickly locate assets. Search for product assets programmatically and non-product assets such as marketing, branding, and social media assets using one of the many search methods inluded in the Media Library. If you're using a front-end that's not integrated with Cloudinary, you may need to use programmatic methods to search for and place non-product assets on your front-end as well.

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 are some key strategies for asset rights management:

Best Practice What It Does How It Helps
Enforce expiration dates for assets Automatically deactivate or relocate expired assets. Prevents unauthorized or outdated asset usage.
Restrict access to assets Limit access to assets based on time frames or authentication. Ensures sensitive assets are only available when needed.
Restrict access dynamically Adjust asset permissions based on metadata. Enables real-time updates without manual intervention.

Enforce expiration dates for assets

Setting expiration dates prevents outdated assets from appearing in campaigns or product pages. By integrating expiration tracking, businesses can avoid legal risks and ensure only approved assets remain in use.

Restrict access to assets

Access control ensures that only authorized users can view or retrieve specific assets. You can:

  • Require authentication: Use token-based access to restrict unauthorized access.
  • Set time-based availability: Define start and end dates for public access.

This helps protect sensitive content while allowing controlled public access when needed. For more details, see Access-controlled assets.

Restrict access dynamically

Automating access restrictions based on metadata helps businesses adapt to changing compliance needs. This approach allows teams to maintain security and compliance without manual intervention.

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 Accessibility and Image and video optimization sections for more details.

Here are some key strategies for SEO optimization:

Best Practice What It Does How It Helps
Use a custom delivery hostname (CNAME) Keeps URLs consistent with your domain. Reinforces brand identity and improves search engine trust.
Enable root path URLs Removes unnecessary URL parameters for cleaner URLs. Creates shorter, more readable image and video URLs.
Use dynamic SEO suffixes Adds descriptive keywords to URLs. Improves search rankings and supports multilingual SEO.

Use a custom delivery hostname (CNAME)

A custom delivery hostname (CNAME) ensures that your image and video URLs remain consistent with your brand’s domain, helping search engines associate assets directly with your site. This enhances trust, prevents ranking issues with third-party domains, and strengthens brand visibility.

Example: https://<your custom delivery hostname>/...

  • Default: https://res.cloudinary.com/demo/image/upload/oloiglbqoeqpnt4hdwzm

  • With CNAME: https://www.example.com/image/upload/**oloiglbqoeqpnt4hdwzm

For more information, see Private CDNs and custom delivery hostnames (CNAMEs).

Enable root path URLs

Cloudinary’s root path URL feature simplifies URLs by removing redundant parameters when the resource type is image and delivery type is upload. This results in shorter, cleaner URLs that are easier for search engines to crawl.

Example:

  • Default: https://res.cloudinary.com/demo/image/upload/oloiglbqoeqpnt4hdwzm

  • Root path: https://res.cloudinary.com/demo/oloiglbqoeqpnt4hdwzm

For more information, see Root path URLs.

Use dynamic SEO suffixes

For assets without descriptive filenames or when multiple language versions are needed, Cloudinary enables dynamic SEO suffixes. These suffixes are appended to the public ID in the URL, improving searchability without changing the original asset.

Example:

  • Default: https://demo-res.cloudinary.com/image/upload/t8sn7wg4jd74j.jpg

  • SEO suffix: https://demo-res.cloudinary.com/images/t8sn7wg4jd74j/basketball-game.jpg

For more information, see SEO-friendly asset URLs.

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:

Best Practice What It Does How It Helps
Auto-generate alt text Provides text descriptions for images. Improves accessibility for visually impaired users and enhances SEO.
Generate video transcripts Converts speech into text automatically. Makes videos accessible to deaf and hard-of-hearing users.
Translate video transcripts Provides subtitles in multiple languages. Expands reach to multilingual audiences.
Optimize color visibility Enhances contrast and readability for colorblind users. Ensures content is accessible to those with color vision deficiencies.

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 image and video content. Use Cloudinary’s AI-based image captioning to create clear and meaningful descriptions of images that you can apply dynamically.


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.


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 Original
X-ray mode X-Ray Mode Striped Overlays Striped Overlays

Tip
Watch a video tutorial to understand more about 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:

Best Practice What It Does How It Helps
Use CDN caching Stores assets closer to users for faster delivery. Reduces load times, improves scalability, and boosts SEO.
Optimize format and quality Uses automatic format selection (f_auto) and compression (q_auto). Delivers lightweight assets without sacrificing visual quality.
Enable adaptive bitrate streaming Adjusts video quality based on network conditions. Reduces buffering, improves playback speed, and enhances user experience.
Implement lazy loading Loads only visible assets first. Improves perceived speed and reduces initial page load time.
Use image placeholders Displays a lightweight preview before full image loads. Prevents layout shifts and enhances UX.
Deliver responsive images Serves appropriately sized images for different devices. Reduces unnecessary bandwidth usage and speeds up loading times.

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.

Tip
Compression always entails some trade-off between file size and quality. For very high resolution assets, consider whether compression is beneficial.
Original Optimized Optimized

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:


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:

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:

image 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.

Note
Cloudinary offers several solutions for responsive resizing. The best solution for you depends on your environment and application. You can learn about them all in Responsive images.


✔️ Feedback sent!

Rate this page: