Tutorials
Transparent Product Images: Why a PNG Still Shows a White Background
Diagnose opaque PNG backgrounds, preview surfaces and export changes, then prepare a product cutout that works in its actual delivery context.
A PNG can support transparency without actually containing a transparent background. If your product image shows a white rectangle, first check whether that white is part of the pixels, part of the preview interface, or a background added during export or delivery. Each cause needs a different fix; changing the filename extension will not remove a background.
Adobe's JPEG and PNG comparison explains the formats' different transparency support. Use that distinction to inspect the file itself before blaming the website or repeating the background-removal step.
Diagnose the rectangle before editing the image
Place the image over two visibly different backgrounds in an editor or test page. A real transparent area reveals both backgrounds. A white area baked into the image remains white. Check the full outline, including the space between a handle and its body or between two straps.
| What you see | Likely explanation to check | Next action |
|---|---|---|
| White rectangle on every background | Opaque white pixels | Mask or remove the background, then export with transparency |
| The surrounding color changes with the page | Actual transparency | Adjust the page background if the composition needs it |
| Checkerboard remains visible everywhere | A checkerboard image was saved as pixels | Return to the source and create real transparency |
| Pale fringe around the product | Edge pixels retain the old background | Refine the mask and inspect on light and dark surfaces |
| Source is transparent, delivered image is opaque | Export or delivery transformation | Compare the uploaded file with the file the page serves |
These are diagnostic possibilities, not a claim that every store uses the same image pipeline.
Keep a clean source and a delivery copy
For a fictional blue canvas bag, preserve a source with the intact product and a reversible mask. Make delivery copies from that source instead of repeatedly removing the background from an already flattened export.
Inspect handles, seams and fabric edges at a useful zoom level. The target is a believable outline, not a mechanically hard cut. Soft fabric can have a softer edge than a metal buckle. Avoid erasing fine product details merely to get a perfectly clean silhouette.
Name the copies by their intended use, such as a transparent cutout and a cream-background catalog image. A white-background catalog image can be entirely correct; the problem is confusing it with a reusable cutout.
Check what the destination actually serves
Upload one test image before processing a large collection. View its product card and detail page, then compare the displayed file with your original if the result changes. Different crops, backgrounds and image transformations can occur in a delivery workflow.
Shopify's product-media documentation describes supported media and image handling for that platform. Follow the current requirements of your own destination rather than assuming that a format accepted by one service will be preserved identically everywhere.
If the source shows transparency but the destination is white, decide whether the result is actually undesirable. A store theme with a white image area may be displaying the transparent image correctly. It becomes a problem when the rectangular matte is visible against another page color or prevents the intended layout.
Preserve the shadow intentionally
A shadow can help an isolated product feel grounded. Decide whether it belongs in the reusable cutout or in the final scene. A strong shadow generated for a left-side light can look wrong when placed on a background illuminated from the opposite side.
For the bag example, prepare a clean product cutout for flexible composition, and add or request a scene-consistent shadow when producing the final ad. If you keep a soft shadow in the transparent export, test its edge on both light and dark backgrounds.
Transparency is not the same as making a glass product opaque and removing everything around it. Clear objects may contain reflections and transmitted background color. Those require a more deliberate retouching or compositing approach than a simple outside silhouette.
Use a cutout as a reference, then judge the complete ad
Add the bag reference to Panelly Studio and specify the product identity you want retained: blue canvas, handle shape, seams and any supplied label. Describe the final setting directly. The finished four-panel advertisement can have a complete, intentional background in every panel.
You do not need the finished ad to remain transparent just because its input reference was a cutout. Nor should you assume that an uploaded transparent image creates editable layers or guarantees an identical pixel outline in generated output. Inspect the result against the reference and name any mismatch in your revision.
For file size and delivery quality, use the separate product-image compression guide. Transparency answers what surrounds the product; compression answers how you deliver the image efficiently.
FAQ
Does renaming a JPEG to PNG create transparency?
No. A filename does not rewrite the image data or remove opaque background pixels. Export an actual supported format after creating the intended mask or transparent area.
Why does my transparent image look black in one viewer?
The viewer may be displaying it over a black surface, or the delivered file may have been flattened. Test the image on two backgrounds to distinguish those cases.
Should every ecommerce image be transparent?
No. Choose the format for the destination and composition. A reusable cutout, a white-background catalog image and a complete lifestyle ad serve different purposes.
