Responsive variants of PNGs are much larger than originals

Publishing help General
1

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: https://cloudcraft.co/images/aws-architecture1-transparent.png

1730×1011 109 KB

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.

2

Hi @TomasJ,

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

3 Likes
6

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
7

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.

8

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

9

@TomasJ we just pushed a fix for this: