Product images are among the most important information in an online shop. Customers cannot pick up a product and examine it from all sides. Good images therefore help to present the product as realistically and understandably as possible.
WooCommerce differentiates between the Product image and the Product gallery. The product image is the main image of a product. You can add additional images via the gallery.
If you are currently creating your first product, you will find the complete process in the article Create first product in WooCommerce.
Briefly explained: The product image is the main image of your product. The product gallery complements this main image with additional views, close-ups, or other helpful images.
Product image and product gallery – what is the difference? #
The Product image is the main product image of a WooCommerce product. It is used by WooCommerce in various places, such as on the product page and in product listings.
The Product gallery contains additional images of the same product.
For a coffee mug, the breakdown could look like this, for example:
Product image
└── Mug at an angle from the front
Product gallery
├── Side view
├── Top view
├── Close-up of the material
└── Mug in use
So the gallery doesn't replace the product image. It complements it.
Set the product image #
Open the product you want to edit in the WordPress backend.
Depending on the WordPress and WooCommerce interface used, you will find a section in the product editor for the Product image.
Click there on the function to set the product image. The WordPress media library will then open.
You can now either select an existing image or upload a new image file.
Select the desired image and confirm the selection. The image will then be used as the main product image.
Tip: Choose a shot as the main image where the product is immediately and clearly recognizable. An extreme close-up is usually better suited for the gallery than for the central product image.
Upload a new product image #
If the desired image is not yet in WordPress, you can upload it directly when setting the product image.
The file is thereby imported into the WordPress media library and can then be managed there as well.
Before uploading, make sure the image is suitable for web use. Very large image files can cause unnecessary storage space and data transfer and can negatively affect the loading time of a product page.
Therefore, the image file should not simply be taken unchanged from a camera or a high-resolution original if that resolution is not needed for the website at all.
Which image format should I use? #
WordPress supports various image formats. For regular product photos, JPEG, WebP, or—depending on the image and the environment used—other modern web formats are often suitable. PNG is particularly useful where transparency is needed, for example.
Which format is best suited depends on the image content and the desired use.
For a classic product photo with many colors and details, a photo format with good compression is useful. For graphics, logos, or images with a transparent background, other formats may be more suitable.
Important: Not only the file extension determines a good loading time. Image dimensions, compression, and the actually transferred file size are also decisive.
How large should a product image be? #
There is no single pixel size that is right for every WooCommerce store.
The required image size depends, among other things, on the theme used, the layout of the product page, the desired zoom view, and the screen size.
WooCommerce recommends a sufficient source size for product images and in its current documentation specifies at least 800 × 800 Pixel as a sensible starting point. Larger images may be necessary or useful, especially for zoom functions.
However, that does not mean that every image should be uploaded as huge as possible.
A product image should be large enough so that the product can be displayed sharply, but not unnecessarily large.
Practical example: If your product image is displayed on the website at only a few hundred pixels wide, an original with, for example, 6000 × 4000 pixels is unnecessarily large in many cases. The image should be reduced to a reasonable size before or during web preparation.
Use uniform image proportions #
For a calm and professional appearance, you should use image proportions that are as uniform as possible for comparable products.
For example, if one product image is square, the next one is extremely tall, and the third is very wide, a product overview can look cluttered.
A uniform structure could be, for example:
Product A → square
Product B → square
Product C → square
Product D → square
This does not mean that every original image has to be exactly the same. The crucial thing is that the images in your shop match each other and that important product areas are not lost due to different croppings.
How WooCommerce actually crops or displays images also depends on the theme and the shop settings used.
Do not cut the products too deeply #
The main product should be shown completely in the image or at least in a way that a customer immediately understands what is being offered.
If WooCommerce or your theme automatically crops preview images, you should therefore check whether important parts of the product are cut off.
This is particularly relevant for very tall or very wide products.
Use the product gallery #
For many products, a single product image is not enough.
About Product gallery Can you add additional recordings?.
To do this, open the product gallery section in the product editor and select the function to add images.
Here too, you can select existing images from the WordPress media library or upload new files.
You can select multiple images for the gallery.
Which pictures belong in the gallery? #
The gallery should provide the customer with additional information rather than simply showing five nearly identical images.
Depending on the product, the following may be useful, for example:
- additional views of the product
- Back or bottom
- Close-ups
- Connections or controls
- material structure
- Size comparison
- Product in use
- packaging or scope of delivery, if relevant to the purchase
For a backpack, for example, the front, back, interior, carrying system, and individual compartments could be shown.
Connections and controls can be important for an electronic device.
The crucial question is: Which view helps a customer in their purchasing decision?
Change the order of the gallery images #
The product gallery images can be rearranged in the WooCommerce product editor using drag-and-drop.
Drag an image to the desired position and then save or update the product.
Order the pictures as logically as possible.
For example:
Main image
↓
Second overall view
↓
Side view
↓
Detail shot
↓
Product in use
This provides the customer with a logical sequence when browsing through the images.
Remove image from product gallery #
If an image is no longer needed, you can remove it from the product gallery.
Removing an image from the gallery does not automatically mean that the image file is also deleted from the WordPress media library.
The file may still exist in WordPress and be used in other places on the website.
Important: Do not hastily delete an image file directly from the media library. The fact that you no longer need it for this product does not mean it is not being used elsewhere on your website.
Replace product image #
If you want to change the main image of a product, you remove or replace the previous assignment and select a different image from the media library or upload a new one.
Then save or update the product.
Check both the product page and a product overview after that. This way you can see whether the new image is cropped and displayed correctly in both views.
What happens to the old product image? #
When you assign a new main image to a product, the previously used image file is not automatically deleted from the WordPress media library.
This makes sense because the same media file might still be used elsewhere.
If you want to remove old pictures from the media library later, you should check beforehand whether they are actually no longer needed.
Add alt text for product images #
WordPress provides a field in the media library for images for the Alternative text or ALT text.
The alt text describes the content or function of an image for situations in which the image cannot be perceived visually. It is particularly important for accessibility.
A meaningful alt text describes the actually visible product as concisely and clearly as possible.
Example:
Black hiking backpack with open main compartment
Less helpful would be:
bild123.jpg
or an artificial string of search terms.
Basic rule: Describe what is relevant to see in the image. Write the alt text for people and not as a list of as many keywords as possible.
Must every gallery image have the same ALT text? #
No. If different images show different views and alternative text for these images is useful, the text should also describe the respective view.
For example:
Main image:
Black hiking backpack from the front
Gallery image:
Black hiking backpack with opened main compartment
Gallery image:
Back of the black hiking backpack with carrying system
This is how every alt text actually describes the respective image.
Product images for variable products #
At variable products Can WooCommerce assign custom images to individual variations?.
This is very helpful, for example, with different colors.
A T-shirt could be set up like this:
Variant Black
→ Image of the black t-shirt
Variant White
→ Image of the white t-shirt
Variant Red
→ Image of the red t-shirt
When a customer selects a variant, WooCommerce can display the image belonging to that variant.
As a result, the customer sees not only the name of the selected color, but also the corresponding product view.
A variant image does not automatically replace a complete gallery per variant #
WooCommerce Core allows assigning a custom image to a variation.
On the other hand, a completely separate gallery with multiple images for each individual variation is not part of the basic variation feature of WooCommerce core.
If, for example, you need five distinct gallery images for each color, an additional extension or a corresponding feature of the theme or shop system being used may be required for this.
Important: Do not simply install just any gallery plugin just because you need additional images. First, check whether your theme or an already existing extension already provides the desired feature.
What does WooCommerce display on the product page? #
WooCommerce provides the technical product image and gallery functions. However, the exact appearance in the frontend is heavily influenced by the theme used or the layout of the product page.
Depending on the shop, there may be, for example:
- main hero image
- small gallery thumbnails
- Zoom function
- Lightbox
- Slider or Carousel
That is why two WooCommerce stores with the same product images can look different.
Product image looks good in the backend, but not in the shop #
If an image looks correct in the WordPress media library, but is displayed unfavorably on the product page or in the shop overview, the original file does not necessarily have to be corrupted.
Possible causes include, for example:
- the theme uses a specific image crop,
- Product preview images have different proportions,
- The image is too small for the desired display.,
- a page builder changes the product layout,
- Cached image or page data still shows an older version.
Therefore, check first whether only a specific display is affected.
Blurry product images #
A small source image can appear blurry if it is displayed significantly larger on the product page.
Example:
Original image:
300 × 300 pixels
Display on large screen:
significantly larger than the original
The browser cannot simply restore missing image information. The image will be enlarged and may therefore appear blurry.
Therefore, use source images with sufficient resolution.
Product images too large #
The other extreme is unnecessarily large original files.
A photo with a width of several thousand pixels and a very large file size can be oversized for a normal product presentation.
Although WordPress generates different image sizes when you upload them, you should still prepare the original images sensibly for the web.
Especially in a shop with many products, poorly optimized images can account for a significant portion of the transferred data volume.
Product images and loading time #
Product pages often contain multiple high-resolution images. As a result, images can have a major impact on loading time.
Of particular importance are:
- appropriate image dimensions
- suitable compression
- suitable file format
- do not load more images than are actually needed
If you want to know how fast your product page actually loads, you can measure the load time using the methods from the article Measure website loading time check.
For additional technical analysis, you can also Google PageSpeed Insights use.
Naming image files sensibly #
It makes sense to name image files clearly even before uploading them.
Instead:
IMG_8472.jpg
can be used, for example:
wanderrucksack-schwarz-vorne.jpg
This also makes later management in a large media library easier for you.
When hundreds of product images only have names like DSC_0012, IMG_4821, or final-neu-3, searching for a specific file becomes unnecessarily difficult.
Avoid uploading multiple images twice unnecessarily #
If an image file already exists in the WordPress media library and is to be used for another product, you do not necessarily have to upload it again.
You can select existing media again.
This prevents unnecessary copies of the same file and keeps the media library more organized.
Check product images after saving #
After adding or changing product images, you should save or update the product and then open the actual product page.
Check there in particular:
- Is the correct main image displayed?
- Is the product complete and clearly recognizable?
- Are all gallery images displayed?
- Does the order make sense?
- Does the image selection or gallery work?
- Are variant images changed correctly?
- Does the display look reasonable on a smartphone too?
Additionally, check a product overview or category. The main image there may be cropped differently or displayed in a different size than on the individual product page.
A simple example of a good image structure #
Let us take a black hiking backpack.
| Image | Task |
|---|---|
| Main image | Show the backpack completely from the front or slightly from the side. |
| Gallery image 1 | Show back and carrying system |
| Gallery image 2 | Show opened main compartment |
| Gallery image 3 | Show pockets and zippers in detail |
| Gallery image 4 | Show the backpack worn or in use |
Thus, each image answers a different potential question from the customer.
What you should avoid with product images #
Some typical problems can be avoided during the setup phase:
- blurry or too small source images
- unnecessarily huge image files
- completely different image proportions within a product overview
- several nearly identical gallery images without additional informational value
- incorrect variation images
- unintelligible file names
- alt texts consisting only of a list of search terms
- premature deletion of supposedly unused files from the media library
The decisive factor is not using as many images as possible. The images should help the customer evaluate the product as well as possible.
What's next? #
After product information, variants, attributes, and images have been set up, you should deal with the available inventory.
In the next article, we therefore explain how you Lagerbestand, SKU und Lieferstatus in WooCommerce verwaltest. Dabei schauen wir uns unter anderem die automatische Bestandsverwaltung, Lagerstatus, Bestellrückstände und die Verwaltung von Variantenbeständen an.
Summary #
The Product image ist das Hauptbild eines WooCommerce-Produkts. Über die Product gallery kannst du zusätzliche Ansichten, Detailaufnahmen und weitere hilfreiche Bilder ergänzen.
Verwende ausreichend grosse und für das Web geeignete Bilder, ohne unnötig riesige Originaldateien hochzuladen. Einheitliche Proportionen sorgen insbesondere in Produktübersichten für ein ruhigeres Erscheinungsbild.
Galeriebilder lassen sich in WooCommerce per Drag-and-drop sortieren. Das Entfernen eines Bildes aus einer Produktgalerie löscht die Datei nicht automatisch aus der WordPress-Mediathek.
Bei variablen Produkten kann einzelnen Varianten ein eigenes Bild zugeordnet werden. Eine komplette separate Galerie für jede Variante gehört jedoch nicht zur grundlegenden WooCommerce-Core-Funktion.
Kontrolliere Produktbilder nach jeder grösseren Änderung direkt im Shop – auf der Produktseite, in Produktübersichten und auf einem Smartphone.
