> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # 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. > **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 represent 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. ## 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. ![E-commerce tech stack diagram](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/v1742206899/docs/Tech_Stack_Integration.png "thumb: w_400,dpr_2, width:400, popup:true") Cloudinary provides three primary solutions to help teams centralize asset management: * **[Assets Media Library](dam_digital_asset_management#media_library_features)**: Cloudinary’s visual interface for managing, organizing, and accessing your assets. The **[Media Library Widget](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.![Assets](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/DAM/media_library_welcome "width:750, with_code:false, with_url:false, popup:true,caption:Media Library - Access it from other platforms in your tech stack") * **[Cloudinary APIs](cloudinary_references)** and **[SDKs](cloudinary_sdks)**: Programmatic tools for managing and accessing a centralized asset repository, enabling consistency across platforms, automation of workflows, and scalable integration. * **[MediaFlows](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 - Connect Cloudinary with other platforms](https://cloudinary-res.cloudinary.com/image/upload/f_auto,q_auto/bo_1px_solid_grey/docs/mediaflows/drag_to_canvas1 "thumb:w_650,dpr_2, width:650, with_code:false, with_url:false, popup:true, caption:MediaFlows - Add blocks to configure a workflow") > **NOTE**: > > When you sign up for a [free Cloudinary account](https://cloudinary.com/users/register_free), you automatically gain access to the Media Library through **Cloudinary Assets**, Cloudinary's APIs via the **Image** and **Video** products, as well as **MediaFlows**. If you’re an e-commerce company, you’ll likely need to [upgrade](https://cloudinary.com/pricing) to a paid or enterprise plan to fully utilize these products. #### To integrate Cloudinary with other platforms * Use platforms that already integrate with the Cloudinary Media Library Widget, MediaFlows, or APIs, such as: * **PIM (Product Information Management)**: [Akeneo](mediaflows_block_reference#akeneo), [Syndigo](syndigo_partner_built_integration) * **CMS (Content Management System)**: [WordPress](wordpress_integration), [Contentful](contentful_app_integration), [Magento](magento_integration) * **E-commerce platforms**: [Shopify](mediaflows_block_reference#shopify), [Salesforce Commerce Cloud Cartridges](salesforce_integration) * **Headless integrations**: [commercetools](commercetools_integration), [Salesforce B2C Commerce Headless Cartridge](sfcc_b2c_commerce_cartridge_headless)See Integrations for a complete list. * Embed the [Media Library Widget](media_library_widget) directly within your PIM, CMS, or e-commerce platform. * Use [MediaFlows](mediaflows) to build integration workflows using drag-and-drop blocks. Generic blocks like HTTP calls, transformations, and file upload/download make it flexible for a wide range of systems. * Use Cloudinary's [SDKs](cloudinary_sdks) or the [Upload](image_upload_api_reference) and [Admin](admin_api) APIs to retrieve Cloudinary assets within your custom workflows. ## 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—whether it’s straight from the photographer or already processed by a graphic designer—or a version that’s been normalized using Cloudinary transformations, depending on the type of asset and its intended use. {table:class=no-borders overview}Asset Type|Storage Recommendation|Why?|Delivery Approach ---|---|---|--- [Non-product assets](#non_product_assets) | Store the original | Maximizes flexibility for generating variations | Transformed dynamically via URL parameters when accessed [Product assets with flexibility](#product_assets_with_flexibility) | Store the original | Allows different perspectives and use cases | Transformed dynamically via URL parameters based on context (e.g., cropped, resized, recolored) [Product assets with strict consistency](#product_assets_with_strict_consistency) | Store a normalized version | Ensures consistent look across platforms | Served as preprocessed, standardized assets with minimal transformation on delivery > **TIP**: For more information on customizing and optimizing assets for delivery, see [Customize and optimize assets](ecommerce_optimize_customize). ### 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 Variationon Deliveryw_550,h_450,c_crop,g_auto:box Generate Ring Variationon Deliveryw_500,h_500,c_auto,g_auto:ring #### To store the original non-product asset and deliver variations 1. A content editor on your team [uploads](ecommerce_workflows_nonproduct#enrich_and_organize_on_upload) original non-product assets to the Media Library. 2. Create [named transformations](ecommerce_optimize_customize)—predefined sets of transformation parameters—to use as templates in the Media Library. 3. On delivery, a content editor applies the named transformation or template to the asset: * **For websites**: Apply it manually within a [Cloudinary-integrated CMS](ecommerce_workflows_nonproduct#delivering_assets_through_an_integrated_cms). If your organization has a [front-end without a Cloudinary integration](ecommerce_workflows_nonproduct#**delivering_assets_to_a_front_end_without_a_cloudinary_integration) that isn't integrated with Cloudinary, apply the named transformation with a developer's assistance. * **For other channels**: The content editor can either download the asset or copy and paste the delivery URL with the named transformation applied. The method depends on the [channel](ecommerce_workflows_delivery_channels). ### 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 Shoese_extract:prompt_shoe;multiple_true/e_dropshadow * **Customize orientation**: Use `g_auto` (AI-powered auto-gravity) to keep the main subject centered, and combine it with `c_auto` (automatic cropping) to crop the asset to the correct dimensions—whether it’s displayed in landscape or portrait mode: #### To store original product assets and deliver variations 1. Create [named transformations](ecommerce_workflows_product#step_3)—predefined sets of transformation parameters—to use as templates in the Media Library. Apply it later on delivery. 2. Use an [upload preset](ecommerce_workflows_product#step_6) to enrich the product asset on upload by applying naming conventions, product SKU association, auto-tagging, metadata, alt text, and access control settings, including expiration. To save the original product asset, ensure your upload preset doesn't apply an incoming transformation. 3. [Upload original product assets in bulk](ecommerce_workflows_product#step_7), either programmatically or via drag-and-drop in the Media Library, without normalization. 4. Asset delivery varies by channel: * **Website delivery**: * Your front-end components render specific products based on preconfigured settings, whether you use a Cloudinary-integrated e-commerce platform or composable front-end, or a standalone front-end. * Apply named transformations to the appropriate components, such as PDP or PLP images and videos. > **NOTE**: > > * [For integrated e-commerce platforms or composable front-ends](ecommerce_workflows_product#using_an_integrated_front_end), follow the integration setup instructions. > * [For standalone-integrated front-ends](ecommerce_workflows_product#using_a_standalone_front_end), developers can configure this programmatically. * Deliver assets by programmatically matching them to their respective products. * **Delivery to other channels**: Distribute assets via portals, collections, or CSV export. See [Multi-channel content delivery](ecommerce_workflows_delivery_channels) for more details. ### 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 assete_background_removal/c_scale,h_1000/c_auto,g_auto,w_800,h_800 Deliver custom backgrounde_gen_backround_replace:prompt_marble #### To store normalized product assets and deliver with minimal variations 1. Create [named transformations](ecommerce_workflows_product#step_3)—predefined sets of transformation parameters—to use as templates in the Media Library. 2. Use an [upload preset](ecommerce_workflows_product#step_6) to enrich the product asset on upload by applying naming conventions, product SKU association, auto-tagging, metadata, alt text, and access control settings, including expiration. To save a normalized version of product assets, ensure your upload preset applies an incoming transformation. 3. [Upload original product assets in bulk](ecommerce_workflows_product#step_7), either programmatically or via drag-and-drop in the Media Library, with normalization. 4. Asset delivery varies by channel: * **Website delivery**: * Your front-end components render specific products based on preconfigured settings, whether you use a Cloudinary-integrated e-commerce platform or composable front-end, or a standalone front-end. * Apply named transformations to the appropriate components, such as PDP or PLP images and videos. > **NOTE**: > > * [For integrated e-commerce platforms or composable front-ends](ecommerce_workflows_product#using_an_integrated_front_end), follow the integration setup instructions. > * [For standalone-integrated front-ends](ecommerce_workflows_product#using_a_standalone_front_end), developers can configure this programmatically. * Deliver assets by programmatically matching them to their respective products. * **Delivery to other channels**: Distribute assets via portals, collections, or CSV export. See [Multi-channel content delivery](ecommerce_workflows_delivery_channels) for more details. ## 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. ![Advanced Search](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/DAM/advanced_search_new_exp "thumb: w_850,dpr_2, width:850, with_code:false, with_url:false, popup:true") #### To create and manage metadata fields While you can manage metadata fields using the [metadata_fields](admin_api#metadata_fields) endpoint of the Admin API, creating, updating, and deleting metadata fields is most easily done via the UI: * Create, update, and delete metadata fields from the [Structured Metadata](https://console.cloudinary.com/console/media_library/metadata_fields) page in the Media Library.![Create and manage structured metadata fields](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1739206430/docs/smd_create_ecommerce.png "thumb: w_800,dpr_2, width:800, popup:true") ### 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: {table:class=med-1stcol no-borders overview}Asset Type|Setup|Metadata Handling|Search Approach ---|---|---|--- Product assets | Website or storefront integrated with Cloudinary | Set metadata field values, typically retrieved from the file, PIM, or product database, [programmatically](#setting_metadata_field_values_programmatically). | The [integration places assets on the website automatically](ecommerce_workflows_product#using_an_integrated_front_end) based on the asset-SKU sync. Product assets | Website or storefront not integrated with Cloudinary |Set metadata field values, typically retrieved from the file, PIM, or product database, [programmatically](#setting_metadata_field_values_programmatically). | Search and retrieve assets [programmatically](#searching_for_assets_programmatically), then place them on the front end automatically. Non-product assets | Website or marketing platform integrated with Cloudinary | Set metadata field values via the [Media Library](#setting_metadata_field_values_via_the_media_library). | Search for assets via the [Media Library](#searching_for_assets_via_the_media_library), then hand-select them to place on your front-end. Non-product assets | Website or marketing platform not integrated with Cloudinary | Set metadata field values via the [Media Library](#setting_metadata_field_values_via_the_media_library).| Search and retrieve assets [programmatically](#searching_for_assets_programmatically), then place them on the front end automatically. #### Setting metadata field values programmatically * Use the `metadata_fields` parameter of the [upload](image_upload_api_reference#upload) endpoint to add metadata while uploading assets. * Use the `metadata_fields` parameter of the [explicit](image_upload_api_reference#explicit) endpoint to add or edit metadata of already uploaded assets. For more information, see [Upload with an upload preset and metadata field values](ecommerce_workflows_product#step_7) in product asset workflows. #### Setting metadata field values via the Media Library * Add metadata while [uploading assets](dam_upload_store_assets#structured_metadata_on_upload) within the Media Library. * Update metadata for a single asset within the [Preview Pane](dam_manage_individual_assets#asset_operations) or [asset management drill-down page](dam_manage_metadata#setting_custom_metadata_values). * [Update structured metadata in bulk](dam_manage_metadata#bulk_updating_structured_metadata). For more information, see [Manual upload via the Media Library](ecommerce_workflows_nonproduct#step_4_manual_upload_via_the_media_library) in product asset workflows. #### Searching for assets programmatically You can use these options to search for assets programmatically: * [Search API](search_method): Uses Lucene-like expressions for precise filtering. * [Admin API resources endpoint](admin_api#resources): Retrieves assets based on specific metadata fields. For more information, see [Search, retrieve, and render product assets](ecommerce_workflows_product#step_3_search_retrieve_and_render_product_assets) in product asset workflows or [Delivering assets to a front-end without a Cloudinary integration](ecommerce_workflows_nonproduct#delivering_assets_to_a_front_end_without_a_Cloudinary_integration) in non-product asset workflows. #### Searching for assets via the Media Library You can use these options to search for assets via the Media Library: * [Global search](dam_global_search): Free-text search across the entire Media Library, including asset names and tags. * [Advanced search](dam_advanced_search): Filter assets based on multiple criteria, including custom created metadata, from the **Assets** page in the Media Library. * [Query builder](dam_query_builder): Construct complex searches with `AND`/`OR` rules using structured search expressions. * [Visual search](dam_visual_search): Find images based on visual content rather than metadata. ![Visual Search](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1714918937/docs/visual_search.png "thumb: w_750,dpr_2, width:750, with_code:false, with_url:false, popup:true") For more information, see [Delivering assets through an integrated CMS](ecommerce_workflows_nonproduct#delivering_assets_through_an_integrated_cms) in product asset workflows. ## Use client-side asset lists to display dynamic collections If you want to show a collection of assets on your site, like brand logos, campaign visuals, or seasonal banners, you don't need to hardcode them or query the Admin API. Instead, you can use Cloudinary's `list` delivery type to return a JSON file containing all assets with a specific tag, directly from the browser. This is a fast and flexible way to display asset galleries grouped by tags. Use meaningful tags to organize related assets by purpose—such as “holiday2025”, “lookbook”, “homepage-featured”. The returned JSON includes image or video metadata such as public ID, dimensions, format, tags, and structured metadata. This method works best for non-product assets that are public-facing and updated frequently, such as marketing or editorial content. > **TIP**: Client-side lists are different from app-managed lists, like carts or saved items. Use app-managed lists, like carts or saved items, when you need personalized, user-specific content. These lists live in your frontend code (e.g., in local storage). Use Cloudinary's `list` delivery when you want your site to automatically display a shared, curated group of assets with no login or session tracking required. For more information, see [Client-side asset lists](list_assets#client_side_asset_lists) for setup instructions and an example JSON response. ## 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: ![Access control settings dialog box](https://res.cloudinary.com/demo/image/upload/r_20/f_auto/q_auto/co_black,e_outline:1/docs/access_control_settings.png "thumb: w_300,dpr_2, width:300, with_code:false, with_url:false, popup:true") Here are some key strategies for asset rights management: {table:class=no-borders overview}Best Practice|What It Does|How It Helps ---|---|---|--- [Enforce expiration dates for assets](#enforce_expiration_dates_for_assets) | Automatically move assets to a specified folder when the designated metadata field reaches its expiration date. | Prevents unauthorized or outdated asset usage. [Restrict access to assets](#restrict_access_to_assets) | Restrict access to assets using token authentication with an option to set time-based availability. | Ensures sensitive assets are only available when needed. [Restrict access dynamically](#restrict_access_dynamically) | Adjust asset permissions based on changes to a metadata field. | Enables real-time updates without manual intervention. [Assign placeholders](#assign_placeholders) | Assign default placeholders so that if an asset isn’t replaced before it expires and becomes unavailable, a fallback image or video is displayed. | Prevents broken media on your site. #### Enforce expiration dates for assets 1. Define an expiration date metadata field from the [Structured Metadata](https://console.cloudinary.com/console/media_library/metadata_fields) page in the Media Library, and ensure it's consistently applied. 2. Use [EasyFlows](mediaflows_easyflows) to automate post-expiration actions, such as moving assets to an **Expired** folder, to prevent those assets from getting delivered.![Managing asset expiration](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1725455690/docs/mediaflows/easyflows/easy_flow_expiration_example.png "thumb:c_scale,w_400,dpr_2.0, width: 400, popup:true") #### Restrict access to assets Set **Access Control** to **Restricted**. Only users with a special authentication token can access them, unless you set a date range for public availability. **To restrict access to assets:** 1. Create an [upload preset](dam_admin_upload_presets) to enforce access control policies automatically.![Upload preset - Restricted assets](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1738863265/docs/ecommerce_upload_preset_restricted.png "thumb:c_scale,w_550,dpr_2.0, width: 550, popup:true") 2. Apply the upload preset on upload. OR * Upload an asset programmatically using the [upload](image_upload_api_reference#upload) endpoint and apply the `asset_control` parameter. OR * Select **Set Access Control** from an asset's context menu, or select multiple assets and choose **Set Access Control** from the (3-dots) option menu in the assets toolbar. For more information, see [Access-controlled assets](control_access_to_media#access_controlled_assets). #### Restrict access dynamically 1. Define a metadata field for asset visibility levels using the [Structured Metadata](https://console.cloudinary.com/console/media_library/metadata_fields) page in the Media Library, and ensure consistent application. * For example, create a field called **Visibility** and set its value to either **Public** or **Private** when uploading assets. 2. Use [EasyFlows](mediaflows_easyflows) to automate access updates based on metadata changes. * For example, automatically set access control to **Restricted** whenever the **Visibility** field changes to **Private**.![Access control](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1728213307/docs/mediaflows/easyflows/set_access_control_example.png "thumb:c_scale,w_400,dpr_2.0, width: 400, popup:true") #### Assign placeholders You can display a default image in cases where the requested image has expired or doesn't exist. To do this, use the `default_image` parameter (`d` in URLs) and specify the public ID and format of an existing image—for example, `d_placeholder.png` to use the image with the public ID `placeholder` as the default. Any requested transformations are automatically applied to the default image as well. For example, to use the PNG image called `avatar` as a default when the image `non_existing_id` doesn't exist: ![avatar used as default image when requested image doesn't exist](https://res.cloudinary.com/demo/image/upload/d_avatar.png/non_existing_id.png) ```nodejs cloudinary.image("non_existing_id.png", {default_image: "avatar.png"}) ``` ```react new CloudinaryImage("non_existing_id.png").delivery(defaultImage("avatar.png")); ``` ```vue new CloudinaryImage("non_existing_id.png").delivery(defaultImage("avatar.png")); ``` ```angular new CloudinaryImage("non_existing_id.png").delivery(defaultImage("avatar.png")); ``` ```js new CloudinaryImage("non_existing_id.png").delivery(defaultImage("avatar.png")); ``` ```python CloudinaryImage("non_existing_id.png").image(default_image="avatar.png") ``` ```php (new ImageTag('non_existing_id.png')) ->delivery(Delivery::defaultImage("avatar.png")); ``` ```java cloudinary.url().transformation(new Transformation().defaultImage("avatar.png")).imageTag("non_existing_id.png"); ``` ```ruby cl_image_tag("non_existing_id.png", default_image: "avatar.png") ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation().DefaultImage("avatar.png")).BuildImageTag("non_existing_id.png") ``` ```dart cloudinary.image('non_existing_id.png').transformation(Transformation() .delivery(Delivery.defaultImage("avatar.png"))); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setDefaultImage("avatar.png")).generate("non_existing_id.png")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation().defaultImage("avatar.png")).generate("non_existing_id.png"); ``` ```flutter cloudinary.image('non_existing_id.png').transformation(Transformation() .delivery(Delivery.defaultImage("avatar.png"))); ``` ```kotlin cloudinary.image { publicId("non_existing_id.png") delivery(Delivery.defaultImage("avatar.png")) }.generate() ``` ```jquery $.cloudinary.image("non_existing_id.png", {default_image: "avatar.png"}) ``` ```react_native new CloudinaryImage("non_existing_id.png").delivery(defaultImage("avatar.png")); ``` For more details, see [Using a default image placeholder](advanced_url_delivery_options#using_a_default_image_placeholder). ## Folder structure and permissions A clear folder structure is essential for managing assets at scale. It improves searchability, enforces access control, and helps different teams quickly find what they need. Since Media Library permissions are applied at the folder level, thoughtful folder design also ensures secure and efficient governance. As a general rule, separate product assets (such as catalog images and product videos) from non-product assets (such as marketing materials, brand assets, or internal content) to simplify organization and permissions. Only share folders that are relevant to each [Media Library user or group](dam_admin_users_groups) to reduce clutter and limit access to what’s needed. For more information on creating and sharing folders for e-commerce, see Enrich and organize on upload for [product](ecommerce_workflows_product#enrich_and_organize_on_upload) and [non-product](ecommerce_workflows_nonproduct#enrich_and_organize_on_upload) assets. ## 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](#ensure_asset_accessibility) and [Optimize image and video performance](#optimize_image_and_video_performance) sections for more details. Here are some key strategies for SEO optimization: {table:class=no-borders overview}Best Practice|What It Does|How It Helps ---|---|---|--- [Use a custom delivery hostname (CNAME)](#use_a_custom_delivery_hostname_cname) | Keeps URLs consistent with your domain. | Reinforces brand identity and improves search engine trust. [Enable root path URLs](#enable_root_path_urls) | Removes unnecessary URL parameters for cleaner URLs. | Creates shorter, more readable image and video URLs. [Use dynamic SEO suffixes](#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:///...` * **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)](advanced_url_delivery_options#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](advanced_url_delivery_options#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://res.cloudinary.com/demo/image/upload/t8sn7wg4jd74j.jpg` * **SEO suffix:** `https://res.cloudinary.com/demo/images/t8sn7wg4jd74j/basketball-game.jpg` For more information, see [SEO-friendly asset URLs](advanced_url_delivery_options#seo_friendly_media_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: {table:class=no-borders overview}Best Practice|What It Does|How It Helps ---|---|---|--- | [Enhancing accessibility with alt text](#enhancing_accessibility_with_alt_text) | Automatically provides text descriptions for images. | Improves accessibility for visually impaired users and enhances SEO. | | [Improving video accessibility with transcripts and subtitles](#improving_video_accessibility_with_transcripts_and_subtitles) | Converts speech into text automatically and provides subtitles in multiple languages. | Makes videos accessible to deaf and hard-of-hearing users and expands reach to multilingual audiences. | | [Enhancing color accessibility](#enhancing_color_accessibility) | 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 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 Go to the [Add-ons](https://console.cloudinary.com/app/settings/addons) page and register for the [Cloudinary AI Content Analysis](cloudinary_ai_content_analysis_addon) add-on. **To auto-generate alt text on upload using the upload preset UI:** 1. Create an [upload preset](dam_admin_upload_presets) from the [Upload Preset](https://console.cloudinary.com/app/settings/upload/presets) tab in the **Upload** page of the Console Settings. In the **Addons** tab, enable **Add AI captioning to your image** under **Cloudinary AI Content Analysis**.![Upload preset - auto-captioning](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1743026002/docs/upload_preset_content_analysis.png "thumb: w_550,dpr_2, width:550, with_code:false, with_url:false, popup:true") 2. To add the caption to a previously created structured metadata field called **Caption** (whose external_id is `auto_caption`) and add the value *autocaption* to the assets' tags: * Add the following code in the **On success** script section of the **Advanced** tab of your upload preset:`current_asset.update({tags: ['autocaption'], metadata: {auto_caption: e.upload_info?.info?.detection?.captioning?.data?.caption}})`![Upload preset - auto caption eval](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1743597869/docs/auto_caption_eval_upload_preset.png "thumb: w_550,dpr_2, width:550, with_code:false, with_url:false, popup:true") 3. Apply the upload preset on upload using the [Upload Widget](ecommerce_workflows_nonproduct#step_4_manual_upload_via_the_media_library) or [programmatically](ecommerce_workflows_product). 4. After the upload, retrieve the structured metadata field value for an asset and assign it to its alt text when rendering it in your HTML code. > **READING**: > > :no-title > For more information on setting the upload preset, see: > * **Product workflows**: [Use an upload preset for normalization, auto-tagging, access control, accessibility, and optimization](ecommerce_workflows_product#step_6) > * **Non-product workflows**: [Use an upload preset for auto-tagging, alt-text, and access control](ecommerce_workflows_nonproduct#step_3) **To auto-generate alt text on upload programmatically:** * Using the `detection` optional parameter of the [upload](image_upload_api_reference#upload) endpoint. For more information, see the [AI-based image captioning](cloudinary_ai_content_analysis_addon#ai_based_image_captioning) section of the Cloudinary AI Content Analysis add-on documentation. {/reading} ### 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 1. Make sure you're registered for the [Google Translation](https://console.cloudinary.com/app/settings/addons) add-on before enabling. 2. Set the `auto_transcription` with a `translate` array of language codes, such as French, Spanish and German in your upload request either: * Directly in an `upload` API call, as shown in [this](video_transcription#requesting_transcription) example. * Using an [upload preset](ecommerce_workflows_product#step_5_create_an_upload_preset). * Create a new upload preset. * In the **Manage and Analyze** tab of the new upload preset, turn on **Auto transcription** and select the languages you want to provide.![Upload preset - transcription](https://cloudinary-res.cloudinary.com/image/upload/v1740920227/docs/upload_preset_transcription.png "thumb: w_550,dpr_2, width:550, with_code:false, with_url:false, popup:true") 3. Use your translated transcripts with the [Cloudinary Video Player](video_transcription#displaying_transcripts_with_the_cloudinary_video_player) to provide subtitles in multiple languages for your videos. Set the `textTracks` parameter with the relevant [configuration](video_player_api_reference#text_tracks_options). For more information on setting the upload preset, see: * **Product workflows**: [Use an upload preset for normalization, auto-tagging, access control, accessibility, and optimization](ecommerce_workflows_product#step_6) * **Non-product workflows**: [Use an upload preset for auto-tagging, alt-text, and access control](ecommerce_workflows_nonproduct#step_3) ### 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 * **Simulate color blindness**: Preview how content appears to colorblind users by applying the `Simulate Colorblind` action in the [Transformation Builder](https://console.cloudinary.com/app/image/transformation_builder) or the [simulate_colorblind](transformation_reference#e_simulate_colorblind) effect programmatically. * **Evaluating accessibility scores**: Apply [accessibility analysis](accessibility_analysis) to identify problematic color pairs and adjust visuals accordingly. * **Applying assistive effects**: Use x-ray mode or striped overlays to improve color differentiation using the [assist_colorblind](accessibility_analysis) effect. > **TIP**: Watch a [video tutorial](color_accessibility_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: {table:class=no-borders overview}Best Practice|What It Does|How It Helps ---|---|---|--- | [Use CDN caching](#use_cdn_caching_for_faster_delivery) | Stores assets closer to users for faster delivery. | Reduces load times, improves scalability, and boosts SEO. | | [Optimize format and quality](#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](#enable_adaptive_bitrate_streaming) | Adjusts video quality based on network conditions. | Reduces buffering, improves playback speed, and enhances user experience. | | [Implement lazy loading](#implement_lazy_loading) | Loads only visible assets first. | Improves perceived speed and reduces initial page load time. | | [Use image placeholders](#use_image_placeholders) | Displays a lightweight preview before full image loads. | Prevents layout shifts and enhances UX. | | [Deliver responsive images](#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](advanced_url_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. 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 * Use [automatic format selection](transformation_reference#f_format) to deliver the most efficient format for the requesting browser (e.g., AVIF, WebP). * Use [automatic quality selection](transformation_reference#q_auto) to apply smart compression for optimal balance between quality and file size. > **NOTE**: > > If you're on a plan that includes [optimization by default settings](optimize_by_default_settings), you can select the **Automatic format** setting instead of modifying your URLs. ### Enable adaptive bitrate streaming [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: ![Unboxing](https://res.cloudinary.com/videoapi-demo/video/upload/sp_auto/v1/samples/unboxing_abr_dy9pkk.m3u8 "with_image: false, with_code:true, with_url:true, popup:true") #### To deliver videos from Cloudinary with adaptive bitrate streaming Use HLS or DASH adaptive bitrate streaming, letting Cloudinary choose the best streaming profiile on the fly * Set the `streaming_profile` parameter to `auto` (`sp_auto` in URLs), and specify an extension of either `.m3u8` for HLS or `.mpd` for DASH. For more information, see [Adaptive bitrate streaming](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 lazy load images from Cloudinary * If you're using [React](react_image_transformations#plugins), [Vue](vue_image_transformations#plugins), or [Angular](angular_image_transformations#plugins) on your front end, you can use a specialized [lazy load plugin](react_image_transformations#lazy_loading). ### 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](https://cloudinary-res.cloudinary.com/image/upload/w_600/docs/image_placeholders.png "with_url: false, with_code: false, popup:true") #### To implement placeholders If you're using [React](react_image_transformations#plugins), [Vue](vue_image_transformations#plugins), or [Angular](angular_image_transformations#plugins) on your front end, you can use a specialized [lazy load plugin](react_image_transformations#lazy_loading). ### 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](responsive_images). #### To deliver responsive images using srcset, sizes, and dynamic transformations 1. Resize images dynamically using Cloudinary’s transformation parameters. 2. Use `srcset` and `sizes` attributes for HTML `` elements. ```html Responsive house ```