Images are a crucial element of website design. They capture your audience’s attention, showcase your products, and highlight your unique brand style. Adding images to Squarespace seems so simple in theory — you just grab a file from your PC or phone, add an image block, and upload. Easy, right? Well, sometimes.

You can add photos to Squarespace without any issue, but then there are times when your images don’t fit the block, everything is scaled wrong, or your high-definition image is now slowing down your site response time (a big no-no for search engine optimization).

Images are essential, but they also take a bit of know-how to properly upload and implement onto your Squarespace site. That’s why we’ve created this comprehensive guide to walk you through formatting, editing, and optimizing images for your site. By the end, you’ll be a bonafide photo pro, confidently adding and enhancing images across all your pages.

Ready to get started? Let’s go!

Inhaltsverzeichnis im Detail Ausblenden

How Do Images Display on the Web?

Before we delve into Squarespace specifics, it’s important to talk about images and the internet. Understanding how photos appear online will give you some important context when it comes to editing your own images in the future.

We may see one comprehensive image when we look at a photo on a screen. But the internet is loading tiny squares that make up the image called pixels. When the internet tells your phone or computer that a page contains the image, the computer tells the screen what colors to display for each pixel based on a code.

When there are too many pixels in an image, such as a high-definition photo, this can slow download time. Too few pixels and images will appear blurry.

Optimizing images has a two-fold approach: 1) getting images to look vibrant and crisp on all screens, and 2) making sure they load quickly to keep your site’s response time at lightning speed.

When formatting images for Squarespace, it’s important to consider both the height and width.

Image height refers to the vertical length of an image. Images in Portrait mode tend to be shot vertically on a mobile phone and have a narrower, rectangular shape. Images in Landscape orientation are more square.
Image width is important because it impacts how clear a picture loads online. Narrow photos may display well on mobile, but they can appear blurry on larger screens.

Squarespace has a built-in responsive design that automatically adjusts image sizes to suit your theme and each user's individual device. This makes it a lot easier for you to upload photos without worrying about scaling them for mobile.

Image Shape and Aspect Ratio

The shape of an image is also called its aspect ratio. It reflects the relationship between an image's height and width. Just like we talked about above, there are narrower, taller images with a “Portrait view” and wider, shorter images with a “Landscape view.”

Image aspect ratios are written as, you guessed it, a ratio, such as 1:1 or 2:4. A 1:1 image has the same dimensions on both sides. For example, an 800px image with a 1:1 aspect ratio is 800 pixels tall and 800 pixels wide.

Portrait images have a 2:3 image ratio, making them taller than they are wide. For example, a portrait image taken on an iPhone (holding the phone upright versus sideways) could measure 1500 x 2250 pixels.

Squarespace lets you choose the default aspect ratio for displaying images on your site. Each theme has its own setting that you can tweak. For example, you can adjust the blog post aspect ratio to display featured images at a different aspect ratio than featured images.

Just keep aspect ratio and image dimensions in mind when deciding on the right photographs for your site.

Important Note: Accepted image types on Squarespace are .jpg and .png. While there is a 20 MB file size limit, Squarespace recommends using images that are 500 KB or less for optimal loading speeds.

How to Crop Images for Squarespace

Sometimes, formatting images on Squarespace requires cropping. This is cutting the image to be a different size. You can use the image editor on the platform to crop images directly, or, if you prefer, a third-party editing tool like Canva or Photoshop.

When you crop images, it’s important to understand the effect of their container. The container is the part of the element that will display your website. For example, an image container on a site header will only display a certain portion of any image. Cropping can help you get more of a picture into frame, but it doesn’t mean the entire image will display.

On Squarespace, images will be cropped horizontally, vertically, or both, depending on the container. On Squarespace 7.1, images blocks that are set to fill will crop photos when you resize them. Image blocks set to fit will become smaller or larger to adjust to the size of the block.

In 7.0, the classic editor has a cropping handle that lets you resize the image on your own. If you trim too much, you can reset to the original image size by double-clicking on the cropping handle.

After you’re done cropping an image for an image block, you can set an area to display predominantly using the focal point. Consider this like the spotlight for your image; Squarespace will center the block around the designated focal point.

Thanks to Squarespace’s automatic responsive design, images will scale to fit the size of a user’s screen.

Transparent Images on Squarespace

If you want to overlay an image with a transparent background, you may find that after uploading and placing it on your site, it appears solid. What gives? It’s an overlay feature you can edit on Squarespace.

In 7.1 go to Site Styles. Select the color theme that your transparent photo’s background is appearing in.

When editing that theme, look for Image Block and select Image Overlay. You’ll want to move the slider all the way to the left to remove the colored background.

A Note on Video Ratios

Yes, this is a guide about photos, but we like to be thorough. When uploading any video to the platform, Squarespace recommends an aspect ratio of 16:9 for the highest quality. Keep in mind that most videos on the platform will display with a player that has a 16:9 ratio.

Optimizing Product Images on Squarespace

To give your potential customers the best experience, you need awesome product images that instantly make me think, “I need this.” How do you do that? Definitely not with blurry, cut-off images!

Good product images should be between 1500 and 2500 pixels. Anything smaller will appear pixelated, and anything larger will either not upload due to the 20 MB file size limit or it will slow down your website’s load time.

You should always make sure product images are 500 KB or less to enhance site speed. Even a second delay can lose customers (it’s a tough world).

Troubleshooting Common Cropping Issues

While Squarespace is great at automatically cropping and scaling images for you, there are times you may run into trouble. Fear not! We’re here to help you overcome any cropping conundrum you might encounter on Squarespace.

That handy automatic cropping can sometimes cause images to appear in a way you don’t want. In this case, you’ll want to adjust focal points to ensure the platform always stays concentrated on a specific portion of the image, even when it’s displayed on different screens.

Whether it’s a site banner or image block, aim for the 1500-pixel minimum. You should also choose images that match the orientation of the element. For example, a header would benefit from a large, square image in a horizontal orientation. Trying to use a narrow, vertical image as a page banner will ultimately lead to undesired cropping and magnifying that distorts the image.

You’ll simply never be able to fit a vertical image completely into a page banner. To avoid any cropping catastrophes, make sure you always source or shoot images in the right layout for your desired block, e.g. a page paneer, featured image on a blog, sidebar, and so on.

Background Images and Videos

The appearance of images and videos on Squarespace backgrounds depends on which version you’re on.

In 7.1: Change the height or width of the page section to show more of it.

In 7.0: Use Site Styles to change how images display. You can use the editor to alter how images scale and what part of them stay consistently displayed across screens. If you choose Auto, the image will retain its original dimensions. If you choose Cover, the image will scale as large as needed to completely cover the background area.

Gallery Sections and Pages

Version 7.1 of Squarespace uses Gallery sections while 7.0 uses Pages. In 7.1, you can place images directly into the gallery section on your site, then use the Gallery tab to control how they appear to visitors.

On gallery pages in 7.0, you’ll need to check your template’s guide to learn how it affects image display. Each template has specific behaviors that ultimately influence the way images appear. Here’s a link to all of the 7.0 template guides.

Portfolio and Index Pages

In 7.1, you can hover over a portfolio section to add an image. Then, you can use the Gallery tab to modify its display settings.

In 7.0, you’ll have to head over to your template’s guide and research how to edit image display on index pages. Because this varies by theme, reading the guide is the best way to get the right solution for your site.

Store Pages

You can use the Store Styles section to alter how images display on your ecommerce store. When you’re editing a page in 7.1, click the pencil icon, then adjust the aspect ratio, spacing, column, and more to suit your liking.

If you run a Squarespace store on 7.0, then image displays will vary based on the page type. The Advanced Store Page always uses the same shape for images. The Classic Store Page uses auto-cropping. However, you can make adjustments by setting the focal point for each product image to ensure it’s always shown to visitors across multiple devices.

When you aren’t cropping images on a Classic Page, you can adjust how they appear by adjusting the product’s overlay color in settings.

Cover Pages

Cover pages are only supported in version 7.0. Cropping in this case depends on the image’s height, your theme, page layout, and even browser width. Solutions are best found through trial and error as you find an image that perfectly suits your desired display.

How Do I Make Images Clickable in Squarespace?

You add image clickthrough URLs by adding an image to your site. It’s also possible to add a gallery section of multiple images or a gallery block to link to a blog post or event description.

On Image Blocks:

For inline displays, add your URL in the link field or click the gear icon for more options.
For other layouts, click “On Image” or “On Button” from the Link drop-down and then add your desired URL.

On Gallery Sections:

Click Edit on the page with the gallery section.
Hover over the gallery, then click Edit Gallery.

Click on the image that you want to add the URL to.
In the Link field, enter the URL.

You can also click the gear icon for more options.

Gallery Blocks:

Hover over the image you want to make clickable, and click the gear icon.

Click “Click to add URL,” then “Content.”
Click FIle to add a link to a file you’ve uploaded, or External if you want to add a URL.

Gallery Pages:

Hover over your target image, and select the gear icon.
Click Options, and then Clickthrough URL.

Paste the URL you want the image to direct to, and save changes.

Adding Hover Effects to Images in Squarespace

Image hover effects allow you to alter how an image looks when someone moves their mouse cursor over it. You can change hover options on image blocks, slideshow gallery blocks, portfolio pages, store pages, and more.

This guide by Squarespace walks you through the process of selecting different hover options depending on the type of block you want to edit.

Setting Images in a Lightbox in Squarespace

A lightbox displays an image on a centered overlay, fading the elements behind it whenever someone selects it.

To make image blocks open in a lightbox, click the Design tab, then make sure your block’s display is set to inline. Next, toggle Lightbox on, and select a dark or light overlay.

When editing gallery sections, make sure your grid type is set to simple, strips, or masonry. Then, toggle Lightbox on. You can also customize how it appears in the Styles tab.

Read more on setting images to open in lightboxes on Squarespace.

Optimizing Images on Squarespace for SEO

Photos affect SEO in two ways: alt text and loading speeds. Alt text, or an alt tag, is information you add to an image that optimizes it for search engines and users who use accessibility tools to browse the web.
SEO Squarespace images will have accompanying alt text that makes them more browser and user-friendly.

Tips for writing good alt text:

Focus on context, not generic descriptions. If you have a photo of a woman on a yoga blog, you might write, “Young woman in happy baby yoga pose.” On an apparel store site, you might write something like, “Woman practicing yoga in purple yoga bra and pants.”
Insert keywords if you can. Natural keyword integration can give your site even more context for Google’s algorithm.

Avoid wordiness. Alt text should always be to-the-point. Descriptions are okay, but they should be functional rather than fanciful.
Avoid adding text directly to the image file. Alt text should be added separately rather than into the file.

Check out the Squarespace guide for adding alt text to image and gallery blocks.

Does Image Size Matter for SEO?

Yes! Large images take longer to load, which make your site take longer to respond, thus driving down your SEO score. You should only use photos with a minimum display of 1500px but no greater than 2500 px. You should also do everything you can to keep your file size no larger than 500 KB.

You can use a free image compressor like Optimizilla to compress files. Just keep in mind compressing images can reduce the quality if you make them too small.

Do Image Titles Affect SEO?

They can, but the impact is likely minimal. Google cares far more about metadata (like alt text) and content on your page than whatever you’ve named an image. However, it can still benefit your site by naming SEO Squarespace images with relevant keywords, separated by hyphens like this: womens-gray-halloween-sweatshirt.jpg.

Speaking of file types, .jpgs are more SEO-friendly than .pngs, since they have greater compression levels and can load faster. For logos and graphics, using a vector-based SVG format is a great idea. Not only can vectors scale without impacting quality, but they’re also much smaller than photos.

Summary: Editing Images on Squarespace

You can edit images directly on Squarespace or use a third-party software. If you really want to tweak images before they go on your site, then you should use Photoshop, GIMP, or your preferred photo editing software.

When formatting images for Squarespace, make sure you maintain a good aspect ratio. Thankfully, the auto cropping feature on the platform is highly adaptive, and it tends to deliver great results.

When you do notice some trouble with image scaling, you can try adjusting its aspect ratio, cropping it, or setting a focal point in Squarespace to make sure the best part of every image is always front and center.

Brauchen Sie mehr Squarespace-Hilfe?

At Launch Happy, we’re all about helping businesses create a user-friendly, accessible online presence that reaches the right audiences.

We’re also about helping Squarespace developers learn the ins and outs of this versatile platform.

If you need a little extra help, reach out to us. We offer a designer starter kit that new Squarespace designers find super useful.

Our Squarespace SEO packages will help you optimize your site for organic growth.

For free tutorials, subscribe to our YouTube channel, which brings you over 400 videos to browse and watch on your own schedule.

Squarespace Images: Comprehensive Guide to Formatting, Editing, & Optimizing Photos on Your Squarespace Page