Image Sizing Cheat Sheet Part 2: Squarespace
Hey friends! Welcome to Part 2 of my Image Sizing Cheat Sheet series :) Today I want to talk about Squarespace. As a Squarespace designer, I’ve had a lot of practice playing around with different image sizes for all of the different applications throughout the platform.
I’ll be honest here. There’s good news and there’s bad news. Let’s get the unfortunate news out of the way first: there is no one-size fits all sizing method. Because Squarespace operates from templates, and each template has its own specifications, there are different sizing recommendations depending on the template you’re working with.
But here’s the good news: there are some common best practices. And also, if you’re like me, you’ll find a favorite template and do most of your work from there, making narrowing down all of the sizing options a much easier feat.
Today I’ll talk about general guidelines. When I’m working on a project that requires more specific sizing needs, I do the research and figure out exactly what works for that template. But, hey, that’s part of what you pay me to do :)
Okay! So let’s get to it! Here are some image sizing guidelines when working in Squarespace:
File Size
Any image you upload to your website should be less than 500KB. Technically, the upload limit is 20 MB, but that doesn’t necessarily mean it’s a good idea to upload such a large file, especially when you’re adding multiple images to a single page. The larger the file size, the longer it will take to load, and the less efficiently your site will perform.
Image Width
Depending on the type of image we’re talking about, the ideal width is somewhere between 500-2500px. But that’s a big range, I know. So I’ll break down my own guidelines.
Banner Images
These are the large, sometime full-width images you see on websites. For these images, I try to aim for somewhere between 1,750-2500px. Squarespace will automatically reformat images to work with what’s going on (think different templates or desktop vs. tablet vs. mobile), but they will never be larger than 2500px wide. If the image is smaller than 1500px, it may appear blurry or pixelated when it fills the container. So, best practice here is to size your image between 1750-2500px wide, and making sure your file size doesn’t exceed 500KB.
Remember, there is no set height because that will all depend on what sort of content you’ll include in your banner. If it’s just an image and you’re not filling that content block with additional content, it will be fairly short. But if you’re filling it with text or more images, be mindful of how tall your image should be. And remember! Test it out on mobile before publishing because your content will fill more area (length-wise) of the banner on mobile than on desktop because it only has a limited amount of space to stretch horizontally.
Other Images
For all other images you add throughout the site, I usually size them somewhere between 500-1000px wide. This ensures that the images still look good (aren’t blurry or pixelated), but also doesn’t make the file size too big. I try to aim for somewhere between 100-400KB file sizes for regular images, especially if I’m using several throughout the site.
Logo Size
Squarespace recommends that you upload your logo at the same height you want it to appear on your site. In some templates you can resize it, which is super handy, but that’s not always the case. General rule of thumb here is about 250px wide.
Favicon Size
Favicons, or the little icon on your browser tab are super fun ways to customize your site and keep your branding consistent and unique. Try to keep your favicon a t 1:1 ratio (square), ideally something between 100 x 100px to 300 x 300px. They will display much, much smaller (16 x 16px) but the larger size ensures crisper quality.
So that’s that! Some helpful general guidelines to image sizing in Squarespace. If you have more questions, please don’t hesitate to give me a shout in the comments or by sending me a note here!
Til’ next time :)