Upload images, assign roles (base, small, thumbnail) and set the image order.
On the product form you'll find the Images and Videos tab. Upload one or more images there via drag and drop, or click the upload button to pick files through the classic file dialog. The common formats JPEG, PNG and WEBP are supported.
Image roles
- Base Image: the main image on the product detail page.
- Small Image: used in product listings and search results.
- Thumbnail: a small preview, e.g. in the cart or in recommendation widgets.
- Swatch Image: only relevant for configurable products with visual attributes (e.g. color swatches), shown as a small selectable icon next to the attribute name.
A single image file can carry several of these roles at once (common practice: the same image as base, small AND thumbnail).
Alt text and order
Click an uploaded image to assign it the desired roles and to add alt text – required for accessibility (screen readers) and a relevant factor for Google image search. Drag and drop within the image overview also lets you set the order images appear in on the product page; the first image in the list automatically becomes the default preview image.
Adding videos
Use Add Video in the same tab to embed a YouTube or Vimeo video as an additional media item, which then appears between the product images in the gallery.
Image sizes and performance
Where possible, upload images at a sensible resolution already (commonly 1500–2000px on the long edge for the main image) – Magento automatically generates the various intermediate sizes it needs, but an unnecessarily oversized source image slows down both the upload and later static content deployments.
Practical tip: for multiple products with identical images (e.g. variants), images can be uploaded efficiently in bulk via Product Import (see the "Product Import and Export" chapter) using fixed filenames, instead of assigning each image individually in the backend.
Configuring placeholder images
If a product has no image, Magento shows a generic placeholder by default. Under Stores > Configuration > Catalog > Catalog > Product Image Placeholders you can upload your own placeholder image matching your theme instead – separately for each image type (Base, Small, Thumbnail, Swatch, etc.), so even incompletely maintained products look consistent.
Hiding individual images
Hovering over an uploaded image reveals, alongside the role checkboxes, the Hide from Product Page option. This keeps the image stored in the product's media gallery (e.g. still usable as a swatch image) while excluding it from the regular image gallery on the product detail page.
Store-view-specific images
Using the store view switcher in the top left of the product form, the Images and Videos tab can also be edited per store view. This lets you, for example, set a different main image for the English store view (e.g. with English packaging text) without affecting the default image used for all other store views.