When planning your Squarespace website, sizing and formatting your images properly is something you’ll want to focus on. Not just selecting the right ones that speak to your target audience, but resizing and managing them efficiently within your website.

There are many benefits to properly sizing and formatting your website’s images - think little SEO boosts. Plus the end result is a gorgeous on-brand presentation that makes for a great user-experience overall.

Before you start uploading those amazing photos and graphics to your Squarespace website, here are some tips that may save you time and frustration, while giving you the confidence you need to start organizing all your images.

Note: The tips below assume a basic knowledge of Photoshop, Illustrator, Canva, or any other image-editing software.

Formatting images for Squarespace before uploading

Viewing a website on a desktop vs. a mobile device can be two completely different experiences.

But we want our viewers to have the SAME (or nearly the same) version and experience on our website no matter where they’re viewing it. This includes all the beautiful images we’ve spent hours curating.

You may have seen in the past some websites with images that looked pretty good while viewing the site on a larger laptop or desktop screen, only to notice that when viewed on a smart phone looked awful - either too small, pixellated, or distorted.

Squarespace website image width

The good news is, with Squarespace’s responsive design feature, the platform automatically resizes your images across all devices. That means, you need to properly size only ONE version of your image or photo, and let Squarespace handle the rest!

The best-practice is to save your photos and images with a 1500 pixel width.

That size will keep your photos looking snazzy and sharp on a big screen desktop. This applies to both vertically (portrait) and horizontally (landscape) oriented photos. Another benefit to this size is that it will also keeping the file size low for page-loading speed - which will earn you a thumbs up from Google.

Remember, in Squarespace you can always size down your images within your page design, but you can’t size them up higher than the pixel width they were saved in, without the risk of the image looking grainy.

There are a handful of times when you would want to save a photo even larger than 1500px width (keep reading below about banner images), but that’s more the exception than the rule.

Squarespace website image file size

What’s the correct file size?

Squarespace actually allows for quite a large file (up to 20mb), but I wouldn’t recommend that as your page will load at snail speed and that won’t make for a good user-experience at all.

Your image files sizes should be well under 500kb.

💡 PRO TIP: Use Tiny PNG to minimize image file sizes.

Squarespace website image file type

When you’re ready to save your file, you’ll have three file types to choose from: JPG, PNG, or GIF.

Squarespace accepts all three, but which type should you use to save your image?

A JPG (.jpg) file will often work best since it’s the file type that’s most universally recognized and displayed by all the browsers out there (another mini-SEO boost!). And with its ability to slim down, file-size-wise, it’s a good choice.
A PNG (.png) file is very useful when you need to work with transparency. Meaning, parts of your image or graphic will need to be on a transparent background. Saving as a .png preserves this transparency making it super useful for images that need to “float” over the website page background. This file type, however will be a bit more meat on its bones in terms of the file size.
A GIF (.gif) file can be used to make both still and animated images (think all those memes out there!). The file will hold multiple sequential pictures at once, giving the feel of a flipbook. The downside is that the file type is very limited and often looks crude. They’re restricted to only 256 colors, don’t allow transparency, and often have a larger file size.

So you’ll likely stick with a JPG format most of the time, or a PNG file type depending on your needs.

The best image sizes for your Squarespace website

Squarespace website banner and background image size

As I mentioned above, for the majority of your images you’ll want to save them with a max 1500px width. The exceptions would be your banner or “hero” image (the top large image usually on your home page) and any background images you use throughout your site.

The banner and background images are stretched the entire width of your page. So to be sure these photos are viewed at their best quality, save them with a 2500 pixel width - but no more than that. You’ll be struggling to keep the file-size under 1mb, and that will increase page load time, so a little trial and error is required.

Squarespace does crop those images just a bit, and as you’ll see they’ll be positioned slightly differently when you’re viewing on a desktop vs. a mobile device. Experiment with cropping your images before saving them to get just the right position you need. Again, some trial and error may be needed to get just the right look you’re after.

Squarespace website logo image size

The 1500px width rule applies to your logo as well! Save your logo at this width, and it will appear perfectly crisp. You can then size it down within Squarespace to what works best design-wise on your home page.

Keep in mind that not all templates in Squarespace 7.0 allow you to change the width of your logo. If that’s your case, simple save your logo file at the exact pixel width dimension you need.

If you’re using Squarespace 7.1, the logo size can be modified easily within the site header editing block.

From any page in your site, click on EDIT, hover over the top of your website page, and then click EDIT SITE HEADER. A small window will open up on the right side of the screen. Select Site Title & Logo from the selection and you’ll find a scrolling bar by which to adjust your logo’s size.

Squarespace website favicon image size

A favicon is the cute little icon that exist in the browser’s tab or bookmark. It’s a mini version of your logo, so to speak, so this is an important image to pay attention to… even though it’s so small!

The favicon will always display within the browser at a size of 16 x 16 pixels (a square format).

And Squarespace will of course resize your image for you, so feel free to save your image within a 100 x 100 or 200 x 200 pixel size, as long as it’s a square format.

Be sure to save it as a PNG (.png) file.

Featured