How To Resize Photo In Squarespace Cover Blog

Squarespace image sizes: Tips & tricks to know when designing your website.jpeg

Squarespace image sizing got you scratching your head? Good news…Squarespace has done it again!

What have they done, exactly?

Thanks to Squarespace's responsive design feature, they've made it super simple to have a fabulous looking site, no matter what device visitors show up using.

(Because somewhere out there, there is still someone rocking the original iPhone…and you want them to be able to see your site on that teensy tiny screen.)

So what does this mean for your site images?

It means there are no "exact dimensions" you have to get just right! Phewf!

There are however a few tips to keep in mind to make your images behave the way you want them to, and I'm sharing those in today's post!

Tips for Squarespace image formatting (before you upload)

Squarespace Image file size

Squarespace will let you upload some pretty jumbo files (up to 20MB) but unless you want your page load speed to suffer, you'll want to keep all images you upload to your site under 500KB.

Need help getting those file sizes down without sacrificing your beautiful, crisp images?

Check out 10 tips for picking & resizing images for your Squarespace site for an easy how-to on that!

Squarespace image file types

You've got just a handful of choices for web-friendly files types that can be uploaded to your Squarespace site:

.jpg
.png
.gif

So which one should you use?

99% of the time, you'll want to stick to .jpg files, since this is the format most easily recognized and properly displayed by the majority of browsers out there (earning you major brownie points for SEO optimization)!

It's also the easiest file type to get down to size, since .png tend to be a wee bit on the beefy side, size-wise!

There are however a few specific instances where Squarespace kindly requests you use something else, so I'll be sure to fill you in on any of those when I get into each image type later in this post!

Squarespace Image width

If every single image you stuck on your site was the exact same size and shape when viewed by your site visitor, it would be prettyyyy boring from a design standpoint…and not at all a reflection of the creative genius you've got going on as a Squarespace designer (or DIY Squarespacer, if that's your deal).

But believe it or not, it is considered best practice to format most of your photos to the same exact width before uploading!

What is that magic width?

1500px

Squarespace has deemed this the perfect balance between protecting your image's quality from the evils of image stretching (a.k.a looking grainy AF when viewed on a giant iMac) and optimizing those page load speeds for a happier Google/internet deity.

Again, there are exceptions which we'll cover later on in this post, but a 1500px width is a pretty solid rule of thumb, no matter where you're uploading it, whether it's vertical or horizontal, and whether it will be appearing as big or tiny in your end design.

Squarespace image aspect ratios & Cropping

What's the aspect ratio? It's the width of your image in relation to how tall it is. (ie. if your horizontal image is two times wider than it is tall, the aspect ratio would be 2:1.)

Image ratio honestly isn't massively important in most cases, since Squarespace's default settings tell it to automatically resize your images proportionally, meaning it will never stretch an image in one direction to fit a space unless you tell it to.

Let me show you what I mean…

Say you drop in an image block beside a text block so that it is taking up half of your page. If you drop in a long vertical image, Squarespace's first concern is going to be with protecting your image's width within the container, so it will make it as long as it needs to be to fit all the content in and not crop the width

Squarespace image sizes: tips & tricks to know when designing your website

Say for aesthetic purposes, you want your image block to end where your text ends. If you grab the bottom of the box, you can drag it shorter. (Squarespace calls this your crop handle, btw…if you wanna sound super techy to all your Squarepace friends.)

Now see that? The image width has been preserved, but the length has been cropped according to where I've dropped my image focal point in the image block settings.

Screen Shot 2020-05-18 at 4.03.10 PM.png

So again, aspect ratio isn't the most important thing. As long as the shape of your photo resembles the shape of the container you hope to stick it in (think horizontal rather than vertical photos for banner images) Squarespace will help with the rest.

Optimizing Squarespace images for mobile

(How to make the most of Squarespace's responsive design features)

If you crop your photo using the crop handle as above, your original image will be saved and you can choose to make it's container longer to show more of the image again at any time.

If Squarespace does have to crop an image to fit a screen, you can change which part of the image is most important that visitors should see by dragging that little focal point around the image preview in your image block settings.

My best tip for optimizing Squarespace images for all screens?

Image bleed lines (a.k.a margins, a.k.a the white space between one bit of content and the next)!

While you definitely can create the look of more white space in desktop view by using spacer blocks to space out your content, keep in mind that any vertical spacers will disappear in mobile, so it may be worth uploading an image with that white space built in.

This will keep every single one of your images from going wall to wall in mobile, when you probably really only want things like background images or banner images to span the whole width of their tiny screen.

P.S. Need a little bit more control over the size and appearance of your image? You can also use Squarespace's built-in image editor (read on for that 'how-to'), or crop images in something like Preview (Mac) prior to uploading.

The best image sizes for Squarespace

If you follow the above tips, Squarespace will pretty much handle the rest. Yay! 🎉

When you upload an image, Squarespace automatically makes 6 quick copies of it, all in different sizes and resolutions to make sure things are looking sharp no matter which screen size visitors are using to check out your site.

So that's handy…

There are however a few best practices for specific image types that you'll want to know. Here's a quick list of things to keep in mind:

Squarespace banner image size tips

The banner image is that big hero shot you see appearing at the top most Squarespace websites! It reaches side to side, often with no margins, and usually includes some sort of snappy text overlay or button.

Here's an example of the banner image currently appearing on my site.

Because this image is your main feature, and the first thing visitors see, you want to make sure it's top-quality and crystal clear! To avoid Squarespace having to stretch or zoom your image to get it to fit the page, consider making your banner image 2000px-2500px wide.

But still making sure to keep it under 500KB in size!

There will always be a teensy bit of cropping due to Squarespace's responsive design, so it can take uploading and cropping a banner image a few times, and viewing it in both desktop and mobile to get it just right.

Want to increase your Squarespace banner image's height?

Add more content! (Even if it's just spacer blocks to act as placeholders for empty space!)

Squarespace's responsive design will grow the height of that section to make room for all the blocks you've added, and as the section grows, more of that banner image will be visible.

It is possible to make tweaks to your banner image sizing in the site styles panel of some Squarespace 7.0 templates.

For more banner best practices, check out: 10 tips for picking & resizing images for your Squarespace site

Squarespace Background image SizE tips

Similar to a banner section, this guy usually stretches the whole width of your page as a way to create a new section and break up the content on your page.

It may be worth increasing the width to 2000px to make sure the quality is 👌 (but never more than 2500px, or you'll risk angering the mobile-view gods).

squarespace gallery image size tips

Gallery images are really no different than your run o' the mill image blocks when it comes to best practices!

(1500px wide, 500kb file size, and built-in margins or bleed-lines to assist Squarespace in doing it's design responsiveness thing))

One thing you do want to keep in mind though is your gallery image's aspect ratio.

Whether you choose to display them in a slideshow, grid, carousel, or stacked layout, Squarespace is going to have a much easier time making your site look good on all devices if you keep your aspect ratio consistent.

Meaning, if you have a super rando assortment of vertical and horizontal images that are all different shapes and sizes, you are going to want to spend some time cropping them all to be uniform before you go to upload.

Squarespace product image size tips

You have 3 types of product images to look out for:

Product thumbnail images

The little preview of the product someone sees when browsing your main shop page.
Primary product images

The photo people see if they Google your product, and the first image to appear in the image gallery on that specific product's page
Additional product images

All the rest of the images in that product's gallery to show off just how magical and life-changing your product is.

Once again, Squarespace has taken photo-formatting-induced hairloss out of the equation by keeping the requirements the same as regular images on your site.

But just like those gallery images, you'll want to make sure they all adhere to the same aspect ratio before upload to avoid awkward cropping or unintended white space that can make your online shop look DIY (and not in a good way…)

Squarespace Logo Size tips

Even though it's likely going to be a tiny logo appearing in your top navigation, you'll still want to follow the same general tips as mentioned in the beginning of this post.

Uploading a larger image than what is needed will allow you to keep things looking super quality when someone goes to view your site on a larger screen that what you're currently testing out your designs on.

Once it's uploaded, you can always go into your site style settings to play around with size, and having a slightly larger file means you can increase your logo size down the road without stretching the image quality.

How to change logo size in Squarespace 7.0:

Head to design > site styles > logo width and use the sliders to change the width. (The height of your logo will change in proportion).

Not all templates in 7.0 allow you to do this, if that's the case, you will have to upload a file the same dimensions as you want it to appear on your site.

How to change logo size in Squarespace 7.1:

From any page in your site, click edit. Hover over the site header and then click edit site header. Use the sliders you'll find under site title & logo to resize your logo.

Squarespace Favicon size tips

You know those little icons that appear in your browser tab or bookmark to let you know which site you're on? That's a favicon.

It's basically an extension of your site logo, and you def want your own on-brand version of one, because let me tell you, the default icon of a globe is not so pretty.

Oh, and this is one of the image types that totally breaks the rules.

This guy is absolutely tiny, and no matter what file size you upload, it's only ever going to display at 16px wide by 16px high.

A square aspect ratio is the way to go, and Squarespace gives a greenlight for any image between 100px by 100px and 300px by 300px.

Heads up! It also has it's own set image file format, so you'll want to export your little favicon friend as an .ico or icon file.

You can use .png for your favicon, but some browsers (not naming names…*cough* Internet Explorer) can't hang, and won't display your fancy little bit of branding the way you hope.

How to change image size in Squarespace

You'll need to make sure the actual file size is 500KB or less prior to uploading, but if you're looking for a way to crop that image once it already lives on your site, you can use the platform's built-in image editor to get the job done!

Click edit on the image you uploaded, and click image editor below the preview.

Under the crop tab, use the custom feature to crop your image, or select one of the set aspect ratios.

That's it! That's all that's needed to resize that image!

A few things to note when using the Squarepace image editor:

The image editor will permanently save those changes to the file in Squarespace, so there's no going back and reverting to an earlier version or wider crop.
If you edit a .gif or .png image file after it's uploaded, the editor is going to save it as a .jpg. So you can say bye bye to that cute little dancing poodle you uploaded, or the transparent background your .png originally exported with.

Want something a little less permanent?

Make use of the cropping handles on your image block container to do the job like we mentioned earlier in this post, or prep those images before hand so that they more closely resemble the space you're trying to stick them in.