← Back to Insights

Optimize Store Performance with Dynamic Imaging Service

Performance • 7 min read

What is Dynamic Imaging Service?

Salesforce Commerce Cloud’s Dynamic Imaging Service (DIS) is a powerful feature that automatically optimizes and serves product images at the right size, format, and quality for each device and context.

Key Benefits

1. Automatic Optimization

  • Responsive image sizing
  • Format conversion (WebP, JPEG, PNG)
  • Quality optimization
  • Lazy loading support

2. Performance Improvements

  • Faster page load times
  • Reduced bandwidth usage
  • Better Core Web Vitals scores
  • Improved mobile experience

3. Developer Efficiency

  • No manual image resizing
  • Single source image
  • URL-based transformations
  • CDN integration

How It Works

Image Transformations

DIS uses URL parameters to transform images on-the-fly:

/images/product.jpg?sw=400&sh=400&sm=fit

Parameters:

  • sw: Scale width
  • sh: Scale height
  • sm: Scale mode (fit, crop, stretch)
  • qlt: Quality (1-100)

Best Practices

  1. Upload High-Quality Source Images

    • Use highest resolution available
    • Let DIS handle downscaling
    • Maintain aspect ratios

  2. Use Appropriate Scale Modes

    • fit: Maintain aspect ratio
    • crop: Fill dimensions
    • stretch: Force dimensions

  3. Optimize for Mobile

    • Serve smaller images to mobile
    • Use responsive breakpoints
    • Implement lazy loading

  4. Leverage CDN Caching

    • Transformed images are cached
    • Faster subsequent loads
    • Global distribution

Implementation Example

<picture>
  <source 
    media="(min-width: 768px)" 
    srcset="/images/product.jpg?sw=800&sh=800&sm=fit"
  >
  <img 
    src="/images/product.jpg?sw=400&sh=400&sm=fit" 
    alt="Product"
    loading="lazy"
  >
</picture>

Performance Impact

Implementing DIS typically results in:

  • 40-60% reduction in image file sizes
  • 30-50% faster page load times
  • Improved Lighthouse scores
  • Better mobile performance

Conclusion

Dynamic Imaging Service is a powerful tool for optimizing e-commerce performance. By automating image optimization, you can focus on business growth while ensuring fast, responsive experiences.

Need help implementing DIS? Contact TailorEdd for expert guidance.