1

I know this might get closed as too subjective, but let's give it a shot as it's probably relevant to a lot of Magento stores out there and given a certain set of constraints, there is probably a reasonably clear answer as to the best overall solution.

I'm wondering whether it's a good idea to use transparent PNGs for product shots instead of JPGs. I've read (https://stackoverflow.com/a/7752936/1117286) that PNG-24 file size can be as much as 5X that of a similarly compressed JPG file, but I'm not sure if that figure is accurate or up-to-date with current compression tools out there.

Obviously for a merchant that can place products against a white background and doesn't plan on changing that any time soon, JPGs would make a lot more sense.

In our case, we have some product shots that are against a textured background and others that are against a white background. The product shots that are against a textured background we just use one gigantic image for the whole thing.

So there would be a clear benefit to transparent PNGs in those cases. And even for the other images that are currently against a white background, we may want to place them also against a textured background at some point in the future - so transparent PNGs would give us some nice future-proofing.

We're also responsive and we get a fair amount of mobile traffic, so we want to keep that in mind.

Given this set of constraints, is using transparent PNGs a reasonable solution? I've yet to find any eCommerce sites out there using transparent PNGs, would be interesting if anyone could post links to them.

Improve this question
2
  • You could always progressively load PNGs. Ie. load a page with a lower resolution, proportionally stretched image, then programatically replace it when the larger image has been loaded in the background. That way you'll still have punchy load times and can preserve a quality image. But those with low-bandwidth connections will be penalised.
    – Ben Lessani
    Commented May 7, 2014 at 18:02
  • Ah right, good call.
    – kalenjordan
    Commented May 8, 2014 at 14:13

2 Answers 2

Reset to default
1

It depends. If you have 10,000 products and show 50 per page — then no. If you show under 10 products — then yes.

Technical note: PNG-24 contains no alpha channel and is significantly smaller than PNG-32 (24-bit plus 8-bit alpha) but still much larger than a JPG with similar optical compression.

Paints will be slightly slower but decoding difference is negligible between formats.

You may want to look into serving WebP, but it's far from universal: https://www.andrewmunsell.com/blog/png-vs-webp

Improve this answer
2
  • Right - it's probably the list pages that are going to suffer a lot more than the product detail page which is what I was primarily thinking about initially.
    – kalenjordan
    Commented May 7, 2014 at 15:41
  • Ya WebP doesn't have enough support for us unfortunately: caniuse.com/webp
    – kalenjordan
    Commented May 7, 2014 at 15:44
3

In my experience, transparent PNGs are just not compressed enough to be a viable solution for product images. Especially if you are enabling image zoom, as you may have an image that is 1500px. Doing a comparison using Photoshop's "Save for Web", a PNG-24 is roughly 10x the size of a compressed JPG.

enter image description here

Improve this answer
3
  • I just came across this tool that reduces the number of colors in a PNG: tinypng.com I was able to cut the sample PNG size in half. However you're still looking at 5x filesize. And integrating it with Magento would require connecting through their API: tinypng.com/developers
    – Erik Hansen
    Commented May 7, 2014 at 15:28
  • Thanks Erik! So it looks like that 5X figure is pretty accurate then.
    – kalenjordan
    Commented May 7, 2014 at 15:42
  • Great point about product zoom - that's something that's probably huge for 99% of merchants out there - we don't use it currently - the nature of our products aren't such that people are going to be too interested in zooming in as they would with clothes or many other types of products.
    – kalenjordan
    Commented May 7, 2014 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.