Loading
Salesforce now sends email only from verified domains. Read More
Get Started with B2C Commerce
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Responsive Images and Modern Image Formats (AVIF and WebP)

            You are here:

            1. Salesforce Help
            2. Docs
            3. B2C Commerce for Merchandisers and Administrators

            Responsive Images and Modern Image Formats (AVIF and WebP)

            Load AVIF and WebP for smaller file sizes with modern browsers, and use JPEG (or PNG for lossless or transparency) as a fallback. Output formats, quality, and the URLUtils and MediaFile rules for DIS are in the Dynamic Imaging Service topic.

            The Supported Transformations table has the full format, extension, and quality details. This topic describes when to use each format in markup and how your HTML picture and source elements can reference DIS URLs.

            When to use each format

            Format Typical use Notes
            AVIF High-compression product photography when the browser supports it Often the smallest; support depends on the shopper browser and version.
            WebP Balanced size and support for modern clients Wider support than AVIF; still not universal on very old clients.
            JPEG / PNG Default, img fallbacks, or transparency through PNG Align file extension in the URL with the format that you need.

            Progressive enhancement with picture

            Offer AVIF or WebP first, then a baseline image. The exact DIS URLs (extensions and sfrm values) must follow the Supported Transformations table and your URLUtils or MediaFile calls. Example (ISML-agnostic) pattern: 

            <picture>
  <source srcset="<your AVIF DIS URL>" type="image/avif" />
  <source srcset="<your WebP DIS URL>" type="image/webp" />
  <img src="<your JPEG DIS URL>" alt="..." />
</picture>

            In practice, you generate each URL in script from the same viewType or path with format / file extension and transform objects for your site, instead of hard coding sw= strings in your HTML.

            Performance and cache hygiene

            • Keep transformation parameters stable and minimized: identical logical sizes and parameters map to a single cache key, which can improve hit rates at the CDN. See Image Guidelines and Dynamic Imaging Caching in Dynamic Imaging Service .
            • Omit q=80 when 80 is already the default in your usage, to avoid an unnecessary q in the string when the documentation already states the default.
            • Monitor image weight and 4xx rates; spikes often correlate with a bad oimg value, invalid sw= / sh= pairs, or an overlay URL that is not URL-encoded. See Troubleshooting and migration .
             
            Loading
            Salesforce Help | Article