Optimize Store Performance with Dynamic Imaging Service

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

Upload High-Quality Source Images
- Use highest resolution available
- Let DIS handle downscaling
- Maintain aspect ratios
Use Appropriate Scale Modes
- fit: Maintain aspect ratio
- crop: Fill dimensions
- stretch: Force dimensions
Optimize for Mobile
- Serve smaller images to mobile
- Use responsive breakpoints
- Implement lazy loading
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:

Leaner image payloads across device breakpoints
Faster rendering on bandwidth-constrained connections
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.

Implementation Checklist for Production Teams

Dynamic Imaging projects often fail when teams treat image delivery as a frontend-only concern. In production, the best results come from coordinated ownership across content, engineering, and performance monitoring.

Checklist to operationalize DIS well:

Standardize source image quality requirements in your content workflow.
Define approved transformation presets for PDP, PLP, and editorial surfaces.
Monitor cache hit patterns and asset variants to prevent sprawl.
Validate responsive behavior on real devices, not emulator-only testing.

Pitfalls to Avoid

Unbounded Variants: Too many transformation combinations increase cache fragmentation.
Inconsistent Naming: Weak asset conventions create duplication and governance issues.
Late Performance Validation: Waiting until launch week to test image behavior creates avoidable risk.

Recommended Operating Model

Treat dynamic imaging as a shared product capability. Assign one owner for transformation standards and one owner for performance validation. This simple ownership split usually prevents most long-term issues.

Governance for Long-Term Performance

As catalogs grow, teams should review image transformation usage monthly. Remove unused variants, tighten transformation rules, and keep design-system mapping up to date. This lightweight governance loop prevents delivery drift and protects performance over time.

Operations Checklist for Ongoing Optimization

Use this recurring checklist to keep imaging performance stable:

Audit top traffic pages for image payload drift.
Validate device-specific rendering quality each release cycle.
Remove stale transformations and legacy image variants.
Keep content team standards aligned with delivery constraints.
Track performance impact after merchandising or theme updates.

Treat this as a product operation, not a one-time optimization task. Consistent governance keeps Core Web Vitals stable and reduces hidden frontend regressions over time.

Teams that treat imaging as an owned capability, with recurring review rituals, usually retain performance gains longer than teams relying only on launch-time optimization efforts.

If your merchandising calendar changes frequently, add image performance checks to release gates. This catches regressions early and prevents cumulative payload growth across high-traffic pages.

Consistent ownership and measurement are what turn tactical wins into durable performance outcomes.

Repeat this review after major merchandising and frontend updates.

Release Governance Recommendation

Add image payload and render quality checks to your standard release definition of done. When these checks are automated and owner-assigned, performance quality stays stable even as catalog and merchandising complexity grows.

Pair this with release-level dashboards so regressions are visible to both engineering and business owners.

Keep this review routine consistent.