How to resize images in Squarespace
Resizing an image in Squarespace is easier than you might have thought. And you have options on how to do it. In this article, we’ll go over exactly how to resize images in Squarespace and how to make sure they look good on all devices. Keep reading!
How to add an image in Squarespace
Before we get into how to resize an image in Squarespace, let’s go over how to add an image. There are only to steps.
In the section you want to add the image, click Add Block.
Click Image.
That’s it! Now you have the image where you want it.
How to resize images in Squarespace
There are multiple ways to resize images in Squarespace. Let’s go through the best ways (no CSS needed!)
Resize the image with the drag tool
On Squarespace version 7.1, you can resize your images using the drag tool on block sections.
Click on the image, and you’ll notice handles appear around it.
Click and drag one of the corners of the image to resize it. Dragging inward will make the image smaller while dragging outward will make it bigger. If you want to make the image smaller without cropping it, adjust the width and height the same amount. Meaning, if you drag it one blog to the right, also drag it one block up.
After resizing, save the page to apply the changes.
This option won’t work on areas that don’t use block sections, like blog posts, collection sections, or gallery sections.
Resize the image with spacer blocks
In Squarespace version 7.0 and on blog pages in 7.1 fluid engine (since they don’t have block sections), you can change resize images using spacer blocks. To do this:
Click the blue + icon above or below the image.
Click Spacer.
Drag the spacer next to the image.
Make the image smaller or larger by adjusting the size of the spacer block. You can use multiple spacer blocks to control the alignment of the image within the section.
Once the image size looks good, save the page to apply the changes.
Resize the image with CSS
The third option you have to resize your images is to use the CSS editor. You can access the editor by navigating to Utilities -> Website Tools -> Custom CSS.
You’ll then need to access the image’s block id. You can do this by downloading the Squarespace ID Finder extension in Chrome, then clicking the # in the top right corner.
With that block id, paste the following code in the Custom CSS editor and change the width and height to the dimensions you want.
#blockid {
width: 600px;
height: 300px;
}
Resizing images on mobile
Always, always, always make sure that your images also look good on mobile, since the majority of people will visit your website on their phones.
You can change the layout and resize blocks in fluid engine sections without changing the computer layout.
So, to make sure your images look good on mobile, start by opening up the mobile editor by clicking Edit then the Mobile View icon.
Then, resize your images using the options above if needed.
And while block placements and sizes done on mobile won’t affect the computer version, just remember that content changes like text updates are global and will affect the computer version. So be careful what you edit!
And if you chose the CSS editor option to resize your images, you’ll need to adjust the image in the editor with the following code:
@media screen and (max-width: 640px) {
#blockid {
width: 300px;
height: 300px;
}
}
Again, alter the dimensions to get the mobile view how you want it!
How to crop images in Squarespace
Cropping images in Squarespace is pretty straightforward and can be done using two in two primary ways: the drag tool and the image editor.
The drag tool
Click on the image you want to crop. You’ll see handles around the image, which you can use to crop it.
Alter the height and width of the image to crop it to your desired view.
Once you’re satisfied with the crop, save your page to apply the changes.
The image editor
Click on the image you want to crop, then select the Edit option that appears on the toolbar.
In the image editor, click on the Crop icon. This will open up the crop interface.
Choose the dimensions you want your image to be cropped as.
Click Save to apply your changes and exit the editor.
Want to learn more?
Hopefully, this blog has given you everything you need to know about resizing images in Squarespace. But do you need more help? You can learn more about Squarespace, design, copywriting, SEO, and more on the blog! Here are some of our favorites!
40+ ways to increase your blog traffic
How to grow your business without social media
Newsletter story ideas (and how to use them)
How to write a blog post: Step-by-step
Why SEO is important for business
Should website copy or design come first?
Blogging vs social media: Which is better?
