Transparent Product PNGs to WebP or AVIF: 27.6 MB of Shop Cutouts Down to 1.07 MB (and Why JPG Turned Them Black)

If you sell things online, your product photos probably start life as transparent PNG cutouts: the item on a see-through background, so the shop theme can put it on a white card, a beige card, or a sale banner. They look great and they're huge. My five test cutouts added up to 27.6 MB for one category page.

The obvious fix is "convert them to something smaller", but with cutouts the question isn't only how small. It's which formats keep the transparent background, and what happens to the ones that don't. So I ran the same five PNGs through every route on PixSip, a free in-browser image compressor and converter. Disclosure: I build PixSip, so read the numbers with that in mind. Every byte count below comes from the downloaded files, checked afterwards with Python/Pillow.

The short answer (measured)

Output	Keeps transparency?	5 files total	vs 27,639,627 B of PNG
PNG, compressed (switch off)	Yes	11,075,313 B	−59.9%
WebP	Yes (alpha unchanged)	1,067,408 B	−96.1%
AVIF	Yes (alpha very slightly softened)	1,284,607 B	−95.4%
JPG	No: background turned black	1,433,582 B	−94.8%

WebP won on three files and AVIF on two. Picking the smaller file per product gives 1,044,839 B, only 2% less than all-WebP. For a shop, I'd just use WebP and stop thinking about it.

The five test cutouts

All five are public domain (CC0) transparent PNGs from Wikimedia Commons, chosen because they look like real product shots: a camera, a game console, a crocheted toy, a teacup and a vintage computer. Between 33% and 61% of each image is fully transparent.

File	Size	Pixels	Transparent area
canon-camera.png	4,156,190 B	2800×2804	40.6%
colecovision-console.png	8,909,029 B	5880×2680	45.9%
crochet-bee-toy.png	4,116,400 B	2000×2000	60.5%
porcelain-teacup.png	3,084,518 B	2648×2361	32.7%
vic20-computer.png	7,373,490 B	4600×2600	56.1%

All five are under PixSip's free limit of 20 images per batch and 10 MB per file (the console is the biggest at 8.9 MB).

Step 1: Get a baseline with the switch off

Open the PixSip homepage. The drop zone has one toggle under it, Convert my images automatically, and it starts off. With it off, every file keeps its own format, so PNGs come back as PNGs. There's nothing else to set: no quality slider and no target size. It picks the settings itself.

I dropped all five cutouts in with the switch off, to see how far PNG alone can go:

"5 / 5 done · Saved 16.6 MB total · 60% smaller." The bee did best (4.1 MB → 684.5 KB, −83%) and the console worst (8.9 MB → 5.1 MB, −43%). When I opened the files, PixSip had turned them into palette PNGs (256 colours or fewer) and kept the transparency: the transparent area was identical in all five. That's a decent free win if your shop platform only accepts PNG. But 11 MB for five thumbnails is still a lot to load.

Step 2: Turn on conversion and pick WebP, AVIF and JPG

Flip the switch and a row of formats appears: AVIF, JXL, WEBP, JPG and PNG. The free plan lets you pick up to three at once, and each one gets its own download button. I picked AVIF, WEBP and JPG, the three formats I'd consider putting on a shop page. I left JPEG XL (JXL) out of this comparison.

Then I dropped the same five PNGs in again. Converting all five into three formats took about 18 seconds in Chrome on my machine. While it ran, the page sent no image data anywhere: the only outgoing requests were small analytics beacons (all under 17 KB). The conversion happens in the browser tab, as PixSip's privacy write-up explains.

Each row shows the three versions side by side, and a small check mark marks the smallest one. WebP got the mark for the camera, console and teacup. AVIF got it for the bee and the VIC-20. Here are the exact bytes:

File (PNG bytes)	AVIF	WebP	JPG
camera (4,156,190)	162,266 (−96.1%)	139,132 (−96.7%)	222,167 (−94.7%)
console (8,909,029)	526,052 (−94.1%)	433,368 (−95.1%)	581,732 (−93.5%)
bee (4,116,400)	146,890 (−96.4%)	166,658 (−96.0%)	164,493 (−96.0%)
teacup (3,084,518)	272,234 (−91.2%)	148,284 (−95.2%)	210,719 (−93.2%)
VIC-20 (7,373,490)	177,165 (−97.6%)	179,966 (−97.6%)	254,471 (−96.5%)

Every output kept the original pixel dimensions. Nothing was resized, so each file is still big enough for a product zoom view.

A note on the results: JPG wasn't the biggest file every time (it beat WebP on the bee), and AVIF wasn't always the smallest (the teacup AVIF was nearly twice the size of the WebP). If you've read that "AVIF always wins", that wasn't true for these cutouts.

Step 3: Check the result before you download

Click Compare on a row to get a before/after slider. It shows the version with the check mark, here the camera's WebP, against the original. Zoom 1:1 shows real pixels.

The Compare view sits on a dark background, so you can't tell from it whether the transparent area survived. For that I opened the downloaded files myself.

Step 4: The transparency check (this is where JPG fails)

I put each version of the camera on a checkerboard (where any transparency shows as grey-and-white squares) and on a beige shop card:

The PNG, WebP and AVIF versions all keep the cutout. Measured against the original's alpha channel, the WebP alpha was identical, pixel for pixel, in all five files. The AVIF alpha was very slightly softened at the edges (an average difference under 0.1 on a 0–255 scale), and you won't see that on a product card.

JPG can't store transparency at all, so something has to fill the background. PixSip filled it with black. Every fully transparent pixel came out black (around 0–8 on 0–255), even on the bee, whose hidden background pixels were stored as near-white. Here are all five on the same shop card:

The teacup shows a second problem. Inside its handle the original has a faint haze of almost-invisible pixels (alpha 1–31 out of 255), and the JPG turned that haze into a solid white smear. So the rule for cutouts is simple: don't convert them to JPG unless you've put them on a solid background yourself first.

Step 5: Look closely at a soft edge

Hard-edged products like the camera are easy. The crocheted bee's fluffy wool edge is a harder test, so here is a 100% crop:

At 100% I can't tell the WebP from the original. The AVIF is very slightly smoother in the wool texture. The 256-colour PNG looks very slightly flatter in the soft cream tones, which is the price of the palette trick from step 1. On a product card shown at a few hundred pixels wide, none of the four looks wrong. The file sizes are another matter: 4.1 MB, 684.5 KB, 166.7 KB and 146.9 KB.

What I'd actually do for a shop

• Cutouts with transparent backgrounds → WebP. It was the smallest overall (1,067,408 B for all five, −96.1%) and the only format whose transparency was a perfect match. Every current browser displays it.
• AVIF if you're squeezing every byte and your platform accepts it. It won on 2 of 5 files, but lost badly on the teacup.
• PNG with the switch off if your shop builder only accepts PNG. You still save about 60%.
• Never JPG for cutouts in PixSip right now. The background turns black.

If you want to dig deeper, the image format guide compares JPG, PNG, WebP, AVIF and JPEG XL in more detail. For a single-format job there's also a dedicated WebP converter page. I also make squareimage.dev for padding photos into squares, in case your marketplace wants 1:1 images.

Quick FAQ

Does PixSip upload my product photos? No. I watched the network while converting 27.6 MB of PNGs, and no image data left the tab.

Can I set a target size, like 100 KB? Not in this converter. There's no target-size box and no quality slider; it chooses the settings for you. These numbers are what that default produced.

Can I get all five formats at once? The free plan writes up to three formats per batch. The "All 5 at once" button is part of the paid Ultra plan (see pricing).

Image credits: all five test images are from Wikimedia Commons and released under CC0 1.0: Canon PowerShot SX510 HS (cropped) by Feitidede; ColecoVision with controller and Commodore VIC-20 by OliverGalvin; Structured Data Bee (transparent) by Sandra Fauconnier; Teacup, Rijksmuseum. Files were renamed for the test.

Related: phone photos to WebP vs AVIF, measured (DEV.to) · 17 MB of blog screenshots down to 1.8 MB (Medium) · shrinking JPGs before a WordPress upload (this blog).