Squarespace image sizes - everything you need to know
One of the reasons I love Squarespace (and there are a few!!) is that they take the hard work out of image sizing. Their responsive platform automatically maximises your images for screens of various sizes without losing quality.
You can read more about all the reasons I recommend Squarespace for small businesses here.
That’s brilliant right?! However…even with this amazingness, there are some best practices you need to consider when selecting and resizing your Squarespace Images to ensure your website images look amazing, load quickly and support your website objectives.
This blog post covers everything you need to know to choose the right image format, the right dimensions and size for your Squarespace images. We will cover:
Logo Size for Squarespace
Favicon Size for Squarespace
Banner/ Background Image Size for Squarespace
Regular Image Size (Image Block) for Squarespace
GIF Size for Squarespace
As well as touching on the best image file type to choose for various types of Squarespace images and a few other tips for image best practices, so let’s get going !
Oh, and before we do - if you’d like everything on an easy to reference, one page cheat sheet - you can download yours here (ciao to googling “how many pixels…”every time you need to upload an image!)
Choose the right image file type for your Squarespace images
Before we think too much about image size, let’s make sure we choose the right image file type. There are a number of different image file types available for everything from text based images to photographs. Depending what type of image we’re using we will want to select a different file type for that image.
Optimise image quality
Blurry images or pixelated images are a no-no. Image quality is key when selecting and resizing images for Squarespace or any website. Poor quality images will make your website look immediately DIY-ed and damages your brand that you’re working so hard to build. Better to choose good quality stock images than poor quality images you took yourself.
Optimise image size before uploading to Squaresoace
Although we want our images to be great quality we also want them to be as small as possible to improve our website page load-speed. This is because our page load-speed is one of the key factors for SEO (Search Engine Optimisation).
Need help resizing your images? Check out this blog post…
Struggling to find gorgeous images for your website? Check out Moyo studio *, they have gorgeous images and currently have their creatives bundle at a huge discount! *yes - that’s an affiliate link, I’m their biggest fan!
General Squarespace Image Size points
Squarespace will automatically resize your images to 7 different pixel widths for display on different screen widths.
The largest of these is 2500px. (The others are 100, 300, 500, 750, 1000, 1500)
The height of your images will adapt proportionally to this, so what we consider when sizing images for Squarespace is the width.
Squarespace recommends an image width of 2500px for images used as a full-width or banner.
Squarespace recommends an image width of 1500px for other images used on your website (for example Image blocks or images in Gallery Blocks).
Squarespace recommends a maximum image size of 500KB, with a hard and fast limit of 20MB (never go this big!) For all of the websites I design I keep image sizes to a maximum of 500KB (with the odd exception up to 600KB if really needed for a background images to maintain quality).
Squarespace accepts PNGs, JPEGs & GIFs (and ICOs for favicons - we’ll come to this later). You can also upload SVGs via CSS.
Although the recommended maximum image size is 500KB for a Squarespace image, be mindful that if you have a lot of images on one page the total size of these can also impact the loading speed, so compress them as much as possible without losing image quality (need help resizing your images - read this post!)
You can adapt and adjust the shape of your image - arch, circle, cloud… you name it using the Squarespace Image block design settings! You can also add filters, and adjust the focus point so your image displays just right on desktop and on mobile.
Squarespace Image Sizes - Your Complete Guide
Want to grab the Squarespace Image Size Cheat sheet for all this info in an easy to read table?
You can download it for free here!
What Image Size to use for Background Images on Squarespace?
For images you plan to use for Backgrounds or to span the full screen on your Squarespace Website I recommend an image width of 2500px.
This is an exception to the normal rule of an image width of 1500px. The reason for this is that Squarespace will save an image uploaded via the style editor to it’s “real size”, so to avoid any loss of quality I upload background images at exactly 2500px width.
Images of greater than 2500px width can cause loading issues so aim for no bigger, no smaller, just right!
Enjoying this read? See my other blogs on all things Squarespace…
What Image Size to use for Image Blocks on Squarespace?
Here we revert to the “rules”. For all image blocks - poster, collage, inline, you name it, a maximum of 500KB and an image width of 1500px is the optimal size for an image to use in an image block on Squarespace.
Image too big?
What Logo Size for Squarespace?
For logos the best rule of thumb is to upload your file a bit bigger than the size you’d like it to display - I usually go for something like 500px by 500px. You can tweak the size it displays at in your header by going to
Click “Edit Site Header”
Select Global Styles
Select “Site Title and Logo”
Edit the logo height.
Hover over header & select “Edit Site Header”
Pro Tip: You can edit the height of your logo on mobile separately, and upload a different logo for the mobile view of your site if you like too!
What Image Size to use for favicons or browser icons on Squarespace?
Squarespace recommends uploaded a favicon with dimensions of 100px by 100px to 300px by 300px.
Your favicon (also known as a browser icon) is displayed in a browser at 16px by 16px.
Don't know what a favicon is, or how to add one to your Squarespace website? Read this!
What Image size to use for GIFs on Squarespace?
Who doesn’t love a GIF?!
They can bring some great dynamic interest to your Squarespace website. They are however another exception to the 1500px rule, as a GIF of width 1500px is likely to be too large and slow down your page speed.
Squarespace recommends uploading GIFs at the actual size you’d like them to display on your Website.
Still too big? See this for how to resize a Gif for Squarespace.
What are the Best File Types to use for Squarespace Images
I mentioned earlier that Squarespace accepts PNGs, JPEGs, GIFs and ICO images. But what to use where? Here’s a quick overview.
Photographs or other images with a solid background filetype for Squarespace
These images are best in JPEG. Exception to this can be if they include text which can sometimes lose quality. In this case use a PNG (although even better - add the text as a text element - always much better than adding it as part of an image).
Logo filetype for Squarespace
Best in PNG with a transparent background. No-one wants their lovely logo with a white rectangle behind it because they used a JPEG instead of a PNG by mistake.
Favicon filetype for Squarespace
PNG or ICO. Using a PNG? Internet explorer can’t display PNGs so your favicon won’t show up on explorer. Want to change your PNG to an ICO? Check this out.
Moving images/ videos filetypes for Squarespace
For short/ soundless videos GIFs can be great, and you can host them directly on your website, adding them like any other image. For longer videos or videos with sound use an MP4 uploaded to Vimeo or Youtube. You can add these by adding a video block and then inserting the url (make sure the video is set to public). You can now also upload videos to host them directly on Squarespace too!
GIF too big? Here’s how to resize a GIF and any other image for Squarespace.
& a final Squarespace Image tip…
Don’t forget your image file names also known as “alt descriptions”.
These should be descriptive, use your keywords where possible and follow the format “your-image-file-name.jpeg”. You can add a file name to your image blocks by scrolling down from where you added your image and inputting this in the “File name optional” box. Alternatively give your images a great file name from the get-go and this will be automatically added when you upload them.
Another one of the reasons I love Squarespace is for their great customer support and guidance.
Want to read everything Squarespace has to say about images? Check this out.
You made it! Now, before you go uploading your images to Squarespace, you’re gonna wanna make sure they’re exactly right, evoking the feel & emotion you want your brand to inspire in your Ideal Clients.
Need some help with that? Read this blog on How to Choose Images for a Website Wow Factor
Squarespace Image sizes FAQs
-
A background image on Squarespace should be 2500px width. The height will rescale automatically. (and a maximum size of 500kb - 250kb is even better if possible!)
-
An image used in a Squarespace image block should be 1500px width (and a maximum size of 500kb - 250kb is even better if possible!)
-
Your favicon or browser icon should be 100px by 100px to 300px by 300px. The file size can be a maximum of 100kb
-
For logos the best rule of thumb is to upload your logo file to your Squarespace site a bit bigger than the size you’d like it to display - I usually go for something like 500px by 500px.
-
If you’ve started with high quality images, and resized them to be 1500px/ 2500px (depending on whether you’re using the image as a background or block image) it should be high quality enough. If you’re still having issues, you can try using a PNG as opposed to JPeg (this works particularly well for images that have text/ fine lines in them as opposed to photographs). You can also try different ways to compress your images - trying imagecompressor.com as opposed to tinypng.com You can also try out compressing using Photoshop where you can manage the parameters more precisely. (It’s worth knowing that if you start off with a poor quality image, it’s not going to get better after compressing!)
Oh… and not sure what I’m talkin’ about when I say “Ideal Client?!”
Grab the free workbook & go from confused to crystal clear on your ideal client in no time… & start getting booked n busy with droves of them!
Pst (without it everything else is a bit of a waste of time!)
New on the ‘Gram…
