PNG Edges Look Horrible

These three sets of wavy lines are all PNGs with transparency and no matte color from the same file.

See the top set of wavy lines. The edge is very jaggedy with a thin white outline. The bottom two sets are fine.

The top set is 1,268px wide. Middle set 635px wide. Bottoms set is 1,500px wide.

This seems to be worse in Chrome.

Squarespace's only suggestion is to upload all PNGs at 1,500px wide. Doesn't make sense because the 635px wide is just fine.

We need to be able to upload PNGs with good quality or have Squarespace allow SVGs.

Any solutions. CSS targeting PNGs or Chrome?

Thanks.

Just found an interesting hack that helps with other PNG outlines being rough.

The next image attachment shows the same icons with and without this hack below. The top is with the hack, the bottom left untreated.

In the Squarespace CSS it has this...

[data-animation-role="image"] {
    min-height: 1px; 
}

If I add this to my Design Custom CSS it helps...

[data-animation-role="image"] {
    min-height: 0px !important;
}

Not sure of the downsides of this hack.

This has NOT fixed the original wavy lines example. Will report back on that one.