Manage product images and videos
For each product, you can upload multiple images and videos, rearrange their order, and control how each is used. If you have a large quantity of images to manage, you may prefer to import them as a batch, rather than upload each one individually. For more information, see Import product images.
If you plan to upload large images for viewing on the Product Details page, you may want to consider setting a maximum pixel size (width and height) and automatically resize the files at upload. There is an option to enable automatic resizing of larger image files as you upload. For more information, see Product image resizing.
Update the product images
-
Open the product in edit mode.
-
To work with a specific store view, set the Store View chooser in the upper-left corner to the applicable view.
note note NOTE New product images are always uploaded and visible in all store views, even if the All Store Views
scope is not used for upload.
To hide any product image from a specific store view, you must switch to that Store View , select the Hide from Product Page checkbox for the image, and click Save. -
Scroll down and expand the Images and Videos section.
Upload an image
For the best compatibility, it is recommended to upload all product images with the sRGB
color profile. All other color profiles are automatically converted to the sRGB
color profile during the product image upload, which could cause color inconsistency in the uploaded image.
The image file name length, including extension, cannot exceed 90 characters.
To upload an image, do one of the following:
-
Drag an image from your desktop and drop it on the Camera ( ) tile in the Images And Videos box.
-
In the Images And Videos box, click the Camera ( ) tile, select the image file on your computer, and click Open.
img-md w-600 modal-image
Rearrange images
To change the order of images in the gallery, click the Sort ( ) icon at the bottom of the image tile and drag the image to a different position in the Images And Videos box.
Delete an image
To remove an image from the gallery, click the Delete ( ) icon in the upper-right corner of the image tile and click Save.
Set image details
Click the image that you want to open in detail view and do any of the following:
To close detail view, click the Close ( ) icon in the upper-right corner.
When complete, click Save.
Enter alt text
Image Alt text is referenced by screen readers to improve web accessibility and by search engines when indexing the site. Some browsers display the Alt text on mouseover. Alt text can be several words long and include carefully selected key words.
In the Alt Text box, enter a brief description of the image.
Assign roles
By default, all roles are assigned to the first image that is uploaded to the product. To reassign a role to another image, do the following:
In the Role box, choose the role that you want to assign to the image.
When you return to the Images and Videos section, the currently assigned roles appear below each image.
Hide an image
To exclude an image from the thumbnail gallery, select the Hidden checkbox and click Save.
Image roles
Watermarks
If you go to the expense of creating your own original product images, there is not much you can do to prevent unscrupulous competitors from stealing them with the click of a mouse. However, you can make them a less attractive target by placing a watermark on each image to identify them as your property. A watermark file can be either a JPG (JPEG), GIF, or PNG image. Both GIF and PNG file types support transparent layers, which can be used to give the watermark a transparent background.
The watermark used for the small image in the following example is a black logo with a transparent background and saved as a PNG file with the following settings:
- Size: 50x50
- Opacity: 5
- Position: Tile
Add watermarks to product images
-
On the Admin sidebar, go to Content > Design > Configuration.
For more information about design configurations, see Design configuration.
-
Find the store view that you want to configure and click Edit in the Action column.
-
Under Other Settings, expand the Product Image Watermarks section.
img-md w-600 modal-image The Base, Thumbnail, Small, and Swatch Image image settings are the same.
-
Use one of the following methods to add the watermark image asset:
- Click Upload and choose the image file on your system that you want to upload for use as a watermark.
- Click Select from Gallery and select an image asset from the Media Gallery.
-
Complete the settings for the watermark display:
-
Enter the Image Opacity as a percentage. For example:
40
-
Enter the Image Size in pixels. For example:
200 x 200
-
Set Image Position to determine where the watermark appears.
-
-
When complete, click Save Config.
-
When prompted to refresh the cache, click Cache Management in the system message and refresh the invalid cache.
img-md w-600 modal-image
Delete a watermark
-
In the lower-left corner of the image, click the Delete ( ) icon.
img-md w-300 -
Click Save Config.
-
When prompted to refresh the cache, click Cache Management in the system message and refresh the invalid cache.
If the watermark image persists in the storefront, return to cache management and click Flush Magento Cache.