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 (
-
In the Images And Videos box, click the Camera (
Rearrange images
To change the order of images in the gallery, click the Sort (
Delete an image
To remove an image from the gallery, click the Delete (
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 (
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
Image Role | Description |
---|---|
Thumbnail | Thumbnail images appear in the thumbnail gallery, shopping cart and in some blocks such as Related Items. Example size: 50 x 50 pixels |
Small Image | The small image is used for the product images in listings on category and search results pages and to display the product images needed for sections such as for Up-sells, Cross-sells, and the New Products List. Example size: 470 x 470 pixels |
Base Image | The base image is the main image on the product detail page. Image zoom is activated if you upload an image that is larger image than the image container. Depending on the level of zoom that you want to achieve, the base image should be two or three times the size of the container. Example sizes: 470 x 470 pixels (without Zoom), 1100 x 1100 pixels (with Zoom) |
Swatch | A swatch can be used to illustrate the color, pattern, or texture. Example size: 50 x 50 pixels |
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 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.

Delete a watermark
-
In the lower-left corner of the image, click the Delete (
-
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.