Responsive variants of PNGs are much larger than originals

For virtually every PNG on my site, the original version is actually smaller than the Webflow generated version, and not by a small amount either.

For example:

Original 1730x1011: 111KB
Webflow 1600x936: 296KB (almost 3X!)
Webflow 1080x632: 152KB
Webflow 800x468: 104KB, finally a bit smaller, at less than half the resolution.

There’s nothing very obvious going wrong with the variants, like a bigger colorspace being used than with the original, that I can spot.

I would strongly suggest, that if the original filesize is actually smaller than the responsive downscale, the srcset should exclude that variant.

Hi @TomasJ,

Thanks for pointing this out, we’re currently working on a fix for this.


Actually, this is exactly the case. Your original PNG is 8-bit, and Webflow is creating variants in 24-bit. You can open your original PNG and the ones generated from Webflow in Photoshop to confirm:

Original: 8-bit (Index next to a PNG title indicates 8-bit)

Webflow versions: 24-bit (RGB/8 indicates 24-bit)

1 Like

That explains the size, strangely Gimp reported all images as “Color space: Indexed color (255 colors)”.

If indexing is generally undesirable (as it’s lossy), perhaps if the source was already indexed the result can be safely (re-)indexed following the resize.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

@TomasJ we just pushed a fix for this: