Jump to content

PNG Edges Look Horrible

Recommended Posts

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?



Link to comment
  • Replies 1
  • Views 222
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.