Streaming live at 10am (PST)

Responsive variants of PNGs are much larger than originals


#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

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.


All items with pictures changed their status to "staged changes"
#2

Hi @TomasJ,

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


#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)


#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: