How to Format Images for Your Squarespace Site

For some photo styles Squarespace's specs are very precise, and it's hard to format your images correctly. I'll show you how to format every type of image for Squarespace.

How to Format Images for Your Squarespace Site

If you're trying to make your very own website for a business, portfolio, or blog, Squarespace is a good place to build it, providing sleek presets, an intuitive interface, and plenty of media options.

For certain photo styles, however, Squarespace's requirements are very precise, and it's not the easiest task to format your images correctly inside Squarespace's own photo editor. Instead, it may be easier for you to crop, zoom, pad, and format your images using an online editor, then upload them straight to Squarespace without worrying about editing afterwards.

In this article, I'll provide a condensed version of Squarespace's comprehensive image sizing guidelines, as well as brief tutorials on the easiest ways to resize and process your photos to fit the most important dimensions for Squarespace sites. Let's get started!

  1. Squarespace image sizing guidelines
  2. Formatting Tricky Image Blocks
  3. Formatting Large Images
  4. Formatting Images with Text

1. Squarespace Image Sizing Guidelines

Squarespace has a comprehensive guide to its image formatting requirements and best practices, but I'll provide a brief rundown of the most important parts here:

  • Only JPG, GIF, and PNG files are supported
  • No image or GIF files over 20MB
  • No files over 60MP (this is unlikely to be an issue given the file size limit)
  • Recommended size limits are 500KB and 2500 pixels in width to optimize site performance.
  • Give your images helpful and descriptive names – image names are used as alt text to make your site accessible to those with visual disabilities.

Squarespace recommends using a third-party software to resize and rotate your images for the site, particularly since its own image editor doesn't provide pixel read-outs or output size adjustment when cropping photos, instead offering only preset aspect ratios and freeform crop tools.

2. Formatting Tricky Image Blocks

Using most image blocks and preset blocks with image and text together (like "Overlap," "Card," or "Collage"), Squarespace lets your images keep their original aspect ratio. But for certain pre-formatted image block designs, there are aspect ratio requirements that aren't provided by Squarespace. I'll give you a summary on the different requirements that aren't listed:

"Poster" and "Inline": For these image format types, your images may sometimes be cropped on the top and bottom, especially when placed to the side of another block, like a text description. Here's an example:

A screenshot showing Squarespace's unpredictable cropping of Poster and Inline blocks.
Squarespace's cropping of Poster and Inline image blocks is often unpredictable.

With images like this, make sure you try them out first before committing to them. If Squarespace ends up cropping your photo on the top and bottom, upload it to Kapwing and make sure the cropped area is the one you want to display on your page, or add padding until your photo will no longer be cropped.

Grid: The "Grid" image style is strict, but its rule is extremely simple: all images in the grid are cropped to the same aspect ratio, selected in the Design tab of the editor. You can use Squarespace's image editor to crop out the parts you want or deselect the Crop option in the Design editor. Squarespace only allows you to crop all or none of the photos in your grid, however, and doesn't let you choose custom aspect ratios for your display; for these tasks, you'll need a third-party software like Kapwing.

A screenshot showing the aspect ratio options in Squarespace's Grid block.

Slideshow: The "Slideshow" image style has the strangest formatting requirements of them all – in this design type, all your images will be displayed at the full width of the widest image in the gallery, either cropped or padded. So if the pictures you want to use vary widely in their dimensions, you have two options: crop your other images or add padding to their sides to match the aspect ratio of the widest picture, or make your widest image taller by cropping it on the sides or adding padding above & below.

Screenshots showing how images are cropped or reduced in size when displayed in Squarespace's Slideshow block.
With slideshows that vary widely, your tallest images will end up severely cropped or very small if you don't resize your images beforehand. 

I recommend the second option, since it allows you to reduce the display size of just one image in your gallery, while making the rest more visible on your page.

Resizing Images for Squarespace: I recommend using Kapwing to resize your images any way you want. Head to the the Kapwing Studio on any device to upload the image you want to resize from your device or paste the link to any photo you found on the web. Here, use the Output Size editor on the right side of the Studio to find the exact dimensions of your photos and change the output dimensions of your project, down to the pixel. With your image selected, you can also choose the Crop tool to cut out any part of your photo.

Screenshots from the Kapwing Studio, showing how to resize images to any aspect ratio.

For gallery-type image blocks, the Studio is a good place to crop or pad all your photos to the exact aspect ratio you need. When you export and download any image in Kapwing, you can immediately choose "Edit" or "Make a Copy" to go right back to the Studio and add your next photo to the canvas while keeping your aspect ratio the same.

3. Formatting Large Images

For certain sections of a page, you can use large images without cropping, but you should make sure they're not too large. For some areas, like page headers, images are always loaded at their full width, so large files may results in long loading times. For example, banner and background images over 2500 pixels in width are reformatted to 2500, so images with common wallpaper dimensions like 2560x1920 will make your page load more slowly.

Screenshots showing how to reduce the size of large images in the Kapwing Studio.

To resize your large images so they work in your site, I recommend using Kapwing, since it lets you adjust your image's dimensions down to the pixel and resize images precisely without changing their aspect ratio. Go to the Kapwing Studio in your browser and upload your photo from your file browser. Select the Output Size select Original Image, return to the tool, and select Lock Proportions. Then, input the width that you want to use for your resized image, and the height

4. Formatting Images with Text

Squarespace recommends only using PNG files when uploading files with text, since Squarespace's image compression often distorts text in JPG files, and this will affect your photo nearly every time it's displayed, because Squarespace creates multiple sizes of every photo for different browser widths.

A screenshot showing how to export images as PNG files in the Kapwing Studio.

I recommend using Kapwing to add text to your photos and export them as PNG files. In the Kapwing Studio, you can add as many text boxes as you want, with full customization of positions, style, outline, font, color, and even drop shadow effects. Then, set the background color to "No color" and your image will be exported as a PNG file, perfectly suited for Squarespace's image compression.

Whatever the purpose of your Squarespace site, images and GIFs may be its most important design aspect, so it's vital that they look just the way you want. I hope this article helps your site's photo content look clean, professional, and beautiful. If you're interested in more tips and tutorials on creating great digital content in 2021, check out the Kapwing YouTube channel, where we post multiple new videos every week. In the meantime, take a look at some related articles on professional image editing tasks:

Photo & Video Dimensions for Social Media in 2021
How to Make Videos Smaller
How to Fit Your Entire Picture on Instagram