Resizing Your Photos for Squarespace
Uploading properly sized images to your Squarespace site is a really important (but often overlooked) way to make sure your new website’s pages will load quickly. Here’s how to resize images step-by-step, using tools you probably already have on your computer!
Note: This tutorial specifically relates to resizing LARGE images so they will load more quickly on your Squarespace site. If your images are already under 1MB in file size, you likely won’t have to do any resizing. Click here for quick directions on how to check your photo file sizes.
Step 1: Understand the Recommended Dimensions
Think about how you’re going to use the photo on your site. Squarespace recommends the following image sizes:
Banner or Full-Width Images: 1500–2500 pixels wide (file size 500KB - 1 MB)
Squarespace recommends high-resolution images for full-width sections because these images need to scale across various screen sizes, from phones up to large desktop monitors. A width of 1500–2500 pixels ensures the image looks sharp without having an unnecessarily large file size. For these images, a file size closer to 500 KB is ideal, but it’s ok to go slightly higher (up to 1 MB) to maintain quality when the dimensions are closer to 2500 pixels wide. Keep in mind that a larger file size will increase the image’s load time.Regular Images: 1200–1600 pixels wide (file size 500KB or less)
For regular images, like those in galleries or placed within text areas, a range of 1200-1600 pixels wide balances image quality with performance. Keeping file sizes under 500 KB ensures faster load times, especially for mobile users or those on slower internet connections.
Keep in Mind: When you’re placing your images in Squarespace you can always drag your image to make it smaller, but if you stretch it to make it larger you will be sacrificing some quality and it may look pixelated.
Step 2: Resize the Image on Mac or PC
Now that you know the sizing recommendations, it’s time to start resizing your photos! Your computer comes with a basic photo viewing/editing tool built in that will allow you to resize and save your images.
Tip: When saving your images, it’s a good idea to save them as new images in a separate folder (name it something easy to figure out like “resized”) so you can keep the original, larger version intact for future use.
On a Mac
On a Mac, the easiest way to manipulate image sizes is to use the built-in Preview app.
-
Open your image in Preview (right-click the image and select "Open With" → "Preview").
Go to the top menu and click Tools → Adjust Size.
In the Image Dimensions box:
Enter the desired width (e.g., 2500 pixels for a banner).
Make sure Scale proportionally is checked to maintain the aspect ratio.
Click OK or Apply.
Save the resized image by going to File → Save or Export if you want to save a new copy.
Save as JPEG or PNGs, as these formats offer the best balance of quality and web compatibility.
On a PC:
When you’re working on a PC you have two built-in options for working with image sizes; Photos and Paint.
-
Right-click the image and select Open With → Photos.
In the Photos app, click the three dots in the top-right corner and select Resize.
Choose Define custom dimensions.
Enter the desired width (e.g., 1500 pixels) and ensure the aspect ratio box is checked.
Save the resized image as JPEG or PNGs, as these formats offer the best balance of quality and web compatibility.
-
Right-click the image and select Open With → Paint.
In Paint, click Resize in the toolbar.
Select Pixels and enter the desired width (e.g., 1500 pixels).
Ensure Maintain aspect ratio is checked, then click OK.
Save your resized image as JPEG or PNGs, as these formats offer the best balance of quality and web compatibility.
Step 3: Compress the Image (optional)
One extra step you can take is to compress the image. Even after resizing, images can still be unnecessarily large. If you notice that the file size is still pretty large (over 1MB) even after resizing, compression can reduce the file size without losing noticeable quality.
Use Online Tools Like:
Upload your image, let the tool compress it, and download the optimized version to add to your Squarespace site.
Step 4: Test the Image on Your Site
Upload the resized image to your Squarespace site and preview it. You’re looking to make sure that:
The image looks crisp and clear.
The page loads quickly.
Is It Really Worth It?
YES! Making sure your images are appropriately sized for online use improves your site’s performance, enhances the users experience, and boosts SEO. Faster-loading pages keeps visitors engaged (how many times have you left a page that is taking forever to load?!), and gives your visitors a smooth, seamless experience.
