Jump to content

how to disable anti-aliasing site wide for pixel art

Recommended Posts

If you don't know, anti-aliasing is the default method for making resized or low resolution images appear smoother and more accurate to the original image's intent by smoothing out pixels. This is great for most cases, but terrible if you actually want to maintain sharp pixels especially with pixel art on your site. Squarespace doesn't have anything built in yet to disable antialiasing for uploaded images, but  after doing some digging I found some CSS code that renders your pixels crisp and clean across your entire site, and across all major browsers. So far it's been working great with my site in the CSS code injection console so I'm sharing it here for anybody else who runs into the same issue I did. If you enter it in the CSS injection console as is, it applies site wide, but if you know some basic CSS, the same code can by applied to single pages or images as well. Feel free to comment tweaks, variations, updates ect.

 

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}
Link to comment
  • Replies 0
  • Views 516
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

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.