---
schema_version: "1"
id: 8013ff9cdd1beeb1f326dcd1a6d1bcd40e355dac82f28c174d7651ae65ec3e5c
title: Product Image Optimization
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/commerce/264-0-0/comm_product_image_optimization.md
canonical_url: https://help.salesforce.com/s/articleView?id=commerce.comm_product_image_optimization.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e6135a7809ea9bfa615f634c671ea39ad7c274b424b36dc40746a5cd3e4b8863
description: B2B Commerce store components that include product images automatically scale the images for optimal performance and remain sharp across different devices.
products:
  - Commerce
  - B2B Commerce
release: "264"
---
# Product Image Optimization

B2B Commerce store components that include product images automatically scale the images for optimal performance and remain sharp across different devices.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=commerce.comm_editions.htm&amp;language=en_US" target="_blank">View supported editions</a>.</td></tr></tbody></table>

[Which Salesforce Commerce Product Do I Have?](https://help.salesforce.com/s/articleView?id=commerce.comm_what_product.htm&language=en_US)

By default, these components use an 1:1 aspect ratio for product images and scale the images to fit the image container.

- Cart Items
- Order Line Item
- Order Products
- Order Summary
- Payments By Link
- Product Card
- Product Media Gallery
- Split Shipment Cart Contents
- Wishlist Product

For product image components that have a different aspect ratio, change the aspect ratio value in the component to 2:3, 3:4, or 4:5. You can also select Stretch to Fit or Scale to Fit. To change a component's aspect ratio or image fit, in Experience Builder, click the component and modify the settings.

This image shows the Order Summary component that contains images with the aspect ratio of 1:1 and are stretched to fit.

![Img Component in Experience Builder](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-comm-264-0-0-production-enus/d863e308-482a-4dfa-8d20-2a94737d394a/comm/images/comm_image_optimize.png)

To display high-quality product images, use modern image formats, like AVIF or WebP, instead of JPEG or PNG. If an image has varying aspect ratios, use a transparent background.

To enhance the performance of videos:

- Use modern formats such as WebM or MP4.
- Keep the resolution below 720p, and use a low frame rate.
- Display an assigned image while the video is downloading or until the video is played by adding a poster attribute to the video tag. If you don’t add a poster attribute, the video uses the first frame.

#### See Also

- [Guidelines for Adding Product Images to a B2B Commerce Store](https://help.salesforce.com/s/articleView?id=commerce.comm_prod_cat_image_types.htm&release=264.0.0&type=5 "Enhance the visual appeal and user experience in your store with product images. Showcase alternate views, list images, banners, and tiles to help customers better understand and engage with your products.")