A Beginner’s Guide to Squarespace Image Blocks

This article is about image blocks for fluid engine sections. Classic editor sections, like blog posts, event pages, and additional product details use the classic image block. Check out this article for more information on the Squarespace classic image block.

You can use a Squarespace image block to display an image on a page in your website.

This image can be a JPG, PNG, or even a GIF.
SVG’s are not supported at this time.

Image blocks are used to display individual images on standard pages.

Image blocks have two display options: fill and fit.

Use the fill option to make it fill the entire block area. This creates a clean, modern look.

use the fit option to make sure your entire image is visible. it will stretch to fit the edges of the content block and not crop any aspect of the image to maintain the original ration.

You can also select a shape to have Squarespace automatically crop the image for you.

Important info to know about image blocks:

Every image has a focal point that you can move. This focal point will control where the image is centered int eh content block on any screen size. If you choose to use the fill option for your image block, double check the mobile view of your site to make sure your image looks great.
For the best quality, try uploading images between 1500 and 2500 pixels wide.

How to add an image block to Squarespace

Here is an example of four image blocks, each with a caption to explain the design settings selected for that block.

image set to fit

gus the pineapple, set to fill the image container

image set to fill

image set to shape

gus the pineapple, set to stretch the size of the image container in a flowershape

shape set to stretch

Select edit on the top left-hand side of your website preview.
Click the add block option on a page section.
Select the image option form the list of content blocks.
Double-click on the image block, or select the pencil icon to open the editor for your image block.
Select the plus sign in the input field to select your image.
You can upload one from your computer, select an image already in your asset library, or you can choose to search for an image from the Unsplash or Getty image database.
Adjust the focal point for your image as needed; it’s the small white circle in the center of your image.
On the content tab, you can attach a link to the image, update the file name, and provide an alt tag to improve your website accessibility.
On the design tab, you can select fit, fill, or shape. See the examples in this section. You can also change your corner radius for any image set to fill, change the image effect, add an overlay, or enable the lightbox feature.

If you click on the design tab and see different layout options, that means you are using a classic image block. Check out this article for more information on the Squarespace classic image block.

What you can customize about the image block using Squarespace

The design tab of an image block editing menu has some creative options you can use to change the style of the content displayed.

Fit, Fill, or Shape: This setting determines how your image interacts with the block's dimensions. "Fit" ensures the entire image is visible within the block, potentially leaving some space around it. "Fill" expands the image to fill the entire block, potentially cropping the edges if necessary. "Shape" lets you choose a specific shape (like a circle or square) for your image to be displayed within.
Corner Radius (Fill Only): If you've chosen "Fill" for the image, this setting allows you to adjust the roundness of the corners. A higher corner radius creates a softer, more curved look, while a lower corner radius keeps the corners sharp.
Image Effect: Here you can add a special effect to your image, like grayscale, sepia tone, or a black and white filter. This can be a great way to add a unique touch or match the overall style of your website.
Overlay: This option lets you add a colored or patterned transparent layer on top of your image. Overlays can be used to create subtle effects, darken or lighten the image, or simply add a decorative touch.
Lightbox Feature: Enabling the lightbox feature creates a pop-up window when visitors click on the image. This allows them to view a larger version of the image without leaving the current page. It's a great option for showcasing high-quality photos or detailed images.

What you can customize about the image block design using custom code

You can use the CSS filter property to create unique filters for your image blocks.

Where you can learn more about the Squarespace image blocks

Squarespace Made Simple

This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.

LEARN MORE →