Wondering the best Squarespace image size?
Like any content management system, Squarespace has its own specific sizes for the different places you can put images on your blog.
So, what is the ideal Squarespace image size?
Well, there are different answers to that, depending on where the image is going!
Let’s dive into some examples, and why it’s important to get the images in the perfect size for your project.
Why Image Size Matters
Because Squarespace is a responsive platform, it may not seem to matter what size an image is.
But that’s not entirely true.
The size of the image, along with other important factors, does play a part in whether the photo or graphic looks and works as it should.
Here are a few factors that impact how images show up on a website:
Image file specification
Images need to be in certain file types for them to be uploaded to the site. The two most common are JPG and PNG.
Image width
Narrow width images might work fine on a mobile screen, yet look distorted on a PC monitor, no matter how much Squarespace tries to optimize them.
Image shape
Best known as aspect ratio, this is the height to size ratio that plays a big part in how an image looks on screen.
You may be familiar with using ratios for things like making Pinterest pins, which are optimal in 2:3 ratio, or Instagram image sizes, which are often 1:1 (square).
Squarespace Image Requirements and Best Practices
Before we dive into the different tips and tricks for different types of images, let’s take a moment to see the requirement and best practices laid out by Squarespace themselves.
These will help you know what to use and where to use it.
Image file types for Squarespace
Use .jpg, .gif, or .png. You can’t use .psd and .doc files as they aren’t compatible.
Also, if someone views your site through Internet Explorer, it can’t display favicons (that little image that appears next to your website name on the browser bar) that are .png, so it’s best to save yours as a .jpg.
Check this out to learn more about image file types.
Maximum Squarespace image file sizes
Data size, including image file size, is measured in bytes. One million bytes equals on megabyte (MB).
Squarespace has a 20MB limit on file sizes – but ideally, upload 500K or less to help your site load faster for your visitors.
Image file names that work on Squarespace
Use letters, numbers, underscores, and hyphens only. No accented letters, question marks, percent signs, or other special characters, as these could prevent the upload.
Maximum Squarespace image resolution
There’s a 6MP limit on image resolution. That’s six megapixels.
What’s a megapixel? A megapixel is one million pixels.
To understand how your image size relates to this, multiply the width and height pixel dimensions, then divide by 1 million. For example, 2000 px x 3000 px comes out at 6MP, so you’ll need to keep your images no larger than that.
Color mode for Squarespace images
Use RGB (red green blue) only. Don’t use CMYK, which is best used for printed materials. CMYK doesn’t show up correctly on computer screens or mobiles.
Default Squarespace Image Sizes
The next thing to understand is that no matter what size you upload an image, Squarespace will make seven different versions of it.
These iterations will change the height dimension relative to the width, to keep the aspect ratio correct.
The seven sizes created by default will have widths of:
- 100 pixels
- 300 pixels
- 500 pixels
- 750 pixels
- 1000 pixels
- 1500 pixels
- 2500 pixels
This allows Squarespace to pick the right pixel size based on the screen size that a reader views the blog post on.
The Best Squarespace Image Sizes
Now we understand how images work on Squarespace, let’s get into a few specifics. These are some of the most common image sizes you’ll need to use for your blog.
Creating templates in Canva or your favorite Canva alternatives is a great way to make sure you always create the right size image. Then you can use them again and again to make new graphics as needed.
Squarespace banner image size and tips
A banner image is the large header image that you commonly see at the very top of a Squarespace website. You can see an example of one just above.
It fills the whole of the screen, even on a desktop browser, and there’s often a text overlay and a button to promote some kind of action.
It’s designed to be the first thing people see when they visit your home page, so you want it to be eye catching and high quality.
For that reason, aim to make a banner image 2000 x 2500 pixels. But remember to keep that file size under 500KB so it loads quickly.
If you want your banner area to be larger, simply add more blocks.
Use something like spacer blocks that won’t require content, and the responsive design of the website will accommodate to make the header even larger.
If you need photos, I have a great list of the best free photo sites you may want to check out.
Squarespace background image size and tips
The background image for Squarespace sites is similar to the banner image. So an image with similar dimensions will work.
Aim for 2000 x 2500 pixels, but don’t go larger than this, as it wouldn’t work so well on mobile.
Then you can use this background image in lots of different places on your site. Add it behind header text, or even to create a section to break up a page.
Here’s a clean and simple example below.
Squarespace thumbnail image size
Thumbnail images are used to represent individual collections. These can be things like blog posts and products, and also events.
While they sound small, the recommended image size for a thumbnail is 1500 to 2500 pixels in length.
This means that when Squarespace resizes the image on different screens, it retains high quality. It also means people can zoom in on the image and still get loads of detail.
Squarespace gallery image size
Gallery images are really no different from normal images.
You can prepare them no more than 1500 pixels wide, and keep the file size under 500KB.
What you might want to think about with gallery images is the aspect ratio.
For instance, if you show them as a slideshow, grid, carousel, or stacked layout, it will work better if the images are all the same ratio. Otherwise, they may end up being different shapes and look a bit strange in the gallery.
So try to keep all images within posts the same size and ratio – then you can use gallery features easily.
Shown below is an example of a grid gallery.
Squarespace logo size
It’s easy to think that because your logo is a tiny feature on the screen, that the image can also be small.
But it’s important to create the file in a much larger size than the screen seems to require. This allows Squarespace to shrink or enlarge it as needed on different screen sizes.
Different templates may recommend different sizes, so check the information provided with the template you are using.
Generally, logos will be anywhere from 160 to 600 pixels in size.
Some templates also have the ability to change the logo width, so if you want to have a more horizontal image, you can do this.
Squarespace favicon size
The final image size to consider is the favicon. This is a type of logo that shows on the browser bar to represent your site, or as a bookmark if you add it to your bookmark bar.
Like a logo, favicons seem small, but it is best to make them larger than needed to allow for optimization.
Your favicon image can be up to 300 x 300 pixels. Keep the design simple though, since it may appear as small as 16 pixels square.
Watch the file format for these! Internet Explorer can’t show them if they’re in PNG file format, so use a JPEG where possible.
Do My Images Need to Have Exact Dimensions?
Understanding the different images sizes for Squarespace is a good idea to help you make better images. But you don’t need to have exact dimensions for many of the images you’ll use.
That’s because the system automatically resizes where needed, and depending on what device someone uses.
So if you get into good practices but they turn out to be a little different in size from these recommendations, don’t worry about it.
Let Squarespace handle some of the work for you!
Image Names and Alt Text
The final thing to mention with images is the how to specify the image name and ALT text. These are good practices to get right for a number of reasons.
Image names are the file name you upload. Use a keyword relating to the post so they are easy to find – and could appear in Google Image Search.
ALT text is for people using screen readers to understand what your image is about, so describe your image clearly and succinctly.
Check this out to learn more about how to name images for SEO.
Mastering Squarespace Image Sizes
One of the great things about using a platform like Squarespace is that while there’s some work to optimize image sizes, it handles a lot of it for you.
Because it optimizes display by device, it takes a lot of stress out of the job. So once you have a few basic size templates set up, you’re ready to go.
You can easily make your images the right sizes for Squarespace pages and posts, and know they will work perfectly!
Want more?
Check out allll the social media image sizes!
Zona says
Thanks for this comprehensive guide to Squarespace Image Sizes! So useful.
Louise Myers says
I’m glad to hear it helped.