Help! My PNGs look fuzzy in Squarespace! Bonus: Create a down arrow with CSS.

 Nothing to do with this post! Just a nice cup of coffee at my latest client's bakery.

Nothing to do with this post! Just a nice cup of coffee at my latest client's bakery.

Have you ever used a PNG image - for an icon or logo mark for instance - and wanted to tear your hair out because PNG's look so fuzzy in Squarespace? I know I have!

I have tried various methods to compound this issue:

  1. Using a large image file (1500px is always ideal in Squarespace) and spacers to make it smaller on the page. However, while this can render a decent image on larger monitors and tables, it will render a huge looking image on mobiles because Squarespace removes spacers for smaller screens. Plus, even with the spacer you can't always get the desired size.
  2. The above method is also a problem if you use it in blog posts and have AMP turned on. AMP also removes spacers so even on a desktop any images in the blog post get blown up to 100% width of the post. Not ideal at all. 
  3. So what I have done for the longest time is just use a smaller image in "real time" size, e.g. anywhere between 60-100px. But while this renders a good size on mobiles it also makes the PNG look very fuzzy. 
  4. Creating a wider image file with lots of transparent buffer background to the left and right of the icon or logo mark. This worked to a degree but was still not ideal as it rendered images too small on mobile and even tablet views, it required a lot of fiddling around with the file width to get it to look halfway decent on all screen sizes. 

This drove me crazy. 

But I admit, I put up with this for the longest time because I just didn't know what else to do and could not find any satisfactory answers via Google or Squarespace Help, either.

Then, last week, I finally decided that I needed to find a better way. I am not a coder so any solution had to be simple and mostly doable via CSS. I asked myself:

What if I could create a class in Squarespace just for my icons and then use CSS to size and style them? Well, as it turns out, creating a new class is easy!

And that changed everything!


Fuzzy 100px PNG

 Fuzzy PNG in Squarespace・Kerstin Martin Squarespace Studio

PNG using its own class and CSS


How to create crisper PNG images and icons in Squarespace

  1. Add this code to your Custom CSS:

    // Logo Mark
    .logo-mark {background-image: url("") !important; background-size: contain; background-repeat: no-repeat; background-position: center; height: 150px; }

  2. Upload your PNG file via the Manage Custom Files section in your Custom CSS
  3. Put your curser between the url quotation marks after background-image and then go to the custom files and select your PNG. This will place the file location URL between the quotation marks.
  4.  Save your custom CSS.
  5. Go to your webpage and insert a Markdown Block in the desired location. Add this code to your Markdown Block:

    <div class="logo-mark"></div>
     
  6. Save your page.
  7. Go back to your custom CSS and style the PNG as desired, you can change its size for instance by using different values for the height.

Note:

You can create your own class names! So instead of logo-mark use whatever you like and make sure you use the same name in your CSS code as well. For instance:

<div class="my-png"></div>  →   .my-png   



Bonus: CSS Down Arrow Icon

You can use your own class and CSS to create a down arrow icon. I use this for instance on long scrolling indexes to indicate that there is more to read and to keep scrolling.

Markdown Block:

<div class="arrow-down"></div>

Custom CSS:

// Page Down Arrow
.arrow-down { border: solid #139fae; border-width: 0 2px 2px 0; display: inline-block; padding: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }

//Center Mark Down Blocks
.sqs-block-markdown { text-align: center; }

// Smaller arrow on mobile screen
@media only screen and (max-width: 640px) {
.arrow-down { padding: 5%; }
}

// Smaller arrow on tables
@media only screen and (max-width: 780px) {
.arrow-down { padding: 3%; }
}

Bolded for demonstration purposes only! Change the border-width and padding for different icon weight and sizes.


Video Tutorial


Are you on Pinterest?

If you enjoyed this post, I'd love it if you could share it. Thank you!

 
 How to create crisper PNG images in Squarespace・Kerstin Martin Squarespace Studio
 

Squarespace BizBoz

Get an exclusive look into my design studio where I share all my tools and processes that helped me get started, attract new clients and grow a profitable business as a Squarespace Web Designer. 

Ask Me Anything!

Do you ever have any burning questions about Squarespace, your website or your web design business? Here you get an expert's undivided attention and you can ask as many questions as we can fit into an hour.


Previous Blog Posts