Multi-channel content delivery

This guide covers recommended features, best practices, and specific use cases for image and video delivery in websites, mobile apps, social media, email campaigns, and third-party platforms.

Web and mobile delivery

Cloudinary streamlines the delivery of both product and non-product assets across web and mobile by enabling on-the-fly transformations in asset delivery URLs.

Optimize for all devices

Auto-optimize format and quality

Use auto format (f_auto) and auto quality (q_auto) to deliver the best format and compression levels dynamically. For more information, see Optimize image and video performance.

Use named transformations

Define preset transformations to personalize while ensuring consistent delivery.

Mobile-specific considerations

Adapting images and videos for a smaller, portrait-oriented viewport in a mobile app requires specific adjustments to maintain quality and composition. Additionally, keeping your app lightweight and minimizing loading times is essential for a smooth user experience.

Here are some key considerations:

AI-powered cropping for mobile orientation adjustments

Mobile delivery often requires switching from landscape to portrait orientation. This can crop out important elements if not handled properly. Using g_auto ensures the main subject stays in view when dynamically resizing.

This is especially useful for video orientation changes, where g_auto keeps the focus on the key subject throughout the clip.

For a live example, see Best practices.

Use srcset for responsive images

Mobile devices benefit from loading the most appropriate image size based on screen resolution and network speed to:

• Ensure fast loading on slower connections.
• Reduce bandwidth consumption.
• Improve mobile-first performance.

Serve next-gen formats like AVIF and WebP

As it's important to serve light-weight assets on mobile apps, it's especially important to use optimization techniques such as f_auto to automatically serve the best format for each device. For more information, see Optimize format and quality.

Enable adaptive bitrate streaming for videos

Make sure you use adaptive bitrate streaming to deliver your mobile app videos. For more information, see Enable adaptive bitrate streaming.

For more information about implementing Cloudinary for mobile apps in general, see Native mobile best practices.

Social media

Each platform enforces specific aspect ratios, formats, and sizes:

To set up templates for social media:

Media Library administrators can set up templates to apply to assets and create derived assets appropriate for each social media channel.

1. Auto-crop and resize assets for each platform using named transformations. See Add personalization and other enhancements to a named transformation.
2. Save named transformations like facebook_post, instagram_story, etc. Save the named transformation and set it as a template.

To create asset variations that comply with social media platform requirmements:

Content editors can preview and download assets variations directly from the Media Library.

1. Navigate to the Assets tab of the Cloudinary Media Library.

2. Select a search methods available from the Advanced Search drop-down:

   • Global search (available from all Media Library pages): Enter free-text to search the entire Media Library, including asset names and tags.

     

   • Advanced search: Set the criteria for your search by clicking on the filters displayed at the top of the Advanced Search section, and selecting the relevant values within each filter.

     

   • Query builder: Construct complex searches with AND/OR rules using structured search expressions.

     

   • Visual search: Enter a description to find images based on visual content rather than metadata.

     

   • Saved searches: Select a saved search from the Advanced Search drop-down to revisit a previous search.

3. Double click the asset you want to use to open the asset management drill-down page.

4. Find the template you want to use. Click to preview, download, or copy its delivery URL.

   

Email campaigns

Cloudinary automates personalized & optimized media for high-converting email marketing.

Personalized banners with dynamic user data

Enhance engagement by dynamically personalizing banners based on user behavior, location, or purchasing history.

• Use an image banner as the base, then overlay personalized content.
• Extract relevant product images from your platform (e.g., cart, browsing history).
• Apply named transformations to add text overlays, images, or promotional details programmatically.
• Incorporate user data like first names, location-based visuals, or loyalty status for a more tailored experience.

  Example: Personalized Abandoned Cart Banner

  

  For more details, see Add personalization and other enhancements to a named transformation.

Optimize for fast loading

• Apply f_auto, q_auto to reduce email load time.

• Choose GIF vs. video: Use GIFs for simple animations and MP4s, which ar lighter, for longer sequences. For more information, see Converting an animated GIF to video.

For more personalization ideas for email campaigns, see Visual Differentiators.

Third-parties

Cloudinary streamlines secure and scalable asset sharing with partners, press, and distributors using portals, collections, and bulk export (CSV).

Cloudinary Portals

Cloudinary Portals provide controlled access to your images and videos, enabling external stakeholders like partners, clients, or press to browse, download, and use approved content. For more information, see Portals.

Example: A fashion brand provides a press kit with restricted download sizes for high-resolution images.

Collections

Use Collections to curate and share searchable, filterable asset groups via a public link.

Key Features:

• Custom download permissions: Allow third parties to download only watermarked or pre-sized assets.
• Custom naming conventions: Adapt asset filenames to third-party needs.
• Metadata integration: Include searchable metadata for easy retrieval.

To share a collection using a public link to a dedicated, searchable webpage:

1. Select assets in the Media Library.
2. From the assets toolbar, click Add to Collection and name the collection.
3. Navigate to the Collections page.

4. From the (3-dots) context menu of the collection, select Share Public Link and click Create Public Link. You can set the following options:

   • Remove option to download original images and videos (optional).
   • Select templates for downloading to allow applying transformation templates (e.g., specific sizing, watermarking) when downloading assets from the publicly shared collection.
     • For example, add your company logo as a semi-transparent watermark on images to prevent unauthorized use.
     • See Setting up optimization and customization to learn how to set up the templates for applying the modifications to your assets.

5. On the Public Sharing page of the Media Library preferences, you can select attributes displayed on the publicly shared collections for information and filtering.

Bulk asset transfers

Export a CSV file with structured delivery URLs for batch asset transfers to distributors.

• Control asset variations: hare only watermarked versions or versions that meet size, background, and compliance requirements.

• Example: A retailer submits product images via CSV to distributors for product listing updates.

To download a CSV with delivery URLS:

1. Enable the Export Metadata app in the App Marketplace.
2. Select your assets in the Media Library, and select Export Metadata from the (3-dots) option menu in the assets toolbar.
3. Optionally, apply a transformation template (e.g., resizing, watermarking) from the drop-down on the top right.
4. Click Export as CSV to export information on the selected assets including their delivery URL.

Marketplaces

E-commerce platforms (Amazon, Zalando, Ebay, Alibaba, etc.) enforce strict format, background, metadata, and naming rules. Cloudinary automates compliance through dynamic transformations.

To send assets to a marketplace:

1. Set up a named transformation
   • Configure a transformation that meets each marketplace's requirements (e.g., cropping, resizing, background removal.
   • See Add personalization and other enhancements to a named transformation.
2. Save and template the named transformation
   • Assign them meaningful names, i.e., zalando_winter_sale.
   • Set them as templates in the Media Library.
   • See Save the named transformation and set it as a template.
3. Ensure marketplace-friendly file naming with (fl_attachment)
   • When you use the fl_attachment parameter, downloading the image or opening it in a browser saves it as a file with the specified name.
     
4. Follow the marketplace's submission guidelines
   • Ensure all marketplace-specific requirements are met before uploading.