Add engaging visuals to your site and modify them to display larger or smaller.

Using images is a great way to break up text, highlight your products or portfolio, and showcase your brand’s personality. After you add images to pages on your site, you can resize them to make your images bigger or smaller on the page.

Every Squarespace site also has responsive design. This means the sizes of your images automatically change, depending on the device each visitor uses to visit your site. In this guide, we show different ways to add, resize, and customize your images.

Watch a video

Add images

There are many ways to add images to your site. Ensure you follow our formatting guidelines to help your images look great on any device. You can:

• Add individual images with image blocks.
• Add sets of images in striking layouts with gallery sections.
• Create layouts of images, text, and buttons using auto layouts.
• Create banners with section background images to set the tone of a page.
• Use images to highlight different projects in portfolio pages.
• Add a site logo, social sharing logo, and favicon to make your branding cohesive and strong.
• Display multiple images in blog posts and other collection item content areas with gallery blocks.
• Use featured images to represent collection items, like blog posts and events, then summary blocks to display those featured images in other areas of your site.
• Upload product images to show an item's different styles and angles, then display them on different parts of your site with product blocks.
• Highlight the latest images from your Instagram with Instagram blocks.

Image upload troubleshooting

If uploading an image doesn't work, check for issues with your browser or device. We recommend following our browser troubleshooting steps and trying again.

Reuse images

You can reuse any image you've already uploaded to your site. Use the Asset library to view and manage all uploaded images. To learn more, visit Managing and reusing images and videos.

Stock images

If you don't have your own images, you can add stock images through our partnerships with Unsplash and Getty Images. You can also reuse any stock or uploaded image in other areas of your site.

Add images in the Squarespace app

In the Squarespace app, you can add images to any area of your site that supports them, like gallery sections and image blocks. Note that some pages on your site that support adding images may be limited in other ways while editing on the app.

To add an image:

1. Tap + or Add image.
2. Depending on the image area, and whether you're using an iOS or an Android device, you can:
   • Take a new photo
   • Upload an image from your photo library
   • Upload an image from your files
   • Reuse an image
3. Tap images to add titles, descriptions, and clickthrough URLs.

Depending on the device you're using, you can also follow these tips:

• On iOS, if you're uploading to an image block, you can search and add stock images.
• On an iPad, you can drag and drop images from Photos to the Squarespace app with Split View.
• You can add images to My Library to reuse on a computer. On iOS, you can also reuse images in the product editor. To learn more, visit Reusing images.

Resize images

After you add images, you might want to make the images bigger or smaller on the page. For example, an image could be too large, overwhelming the rest of the page’s content. Or your logo might be too small, making it difficult to read. How you resize an image depends on how you added it to your site.

Blocks

How you resize blocks depends on the editor:

• Fluid Engine - Resize blocks directly on the page by clicking and dragging.
• Classic editor - Reduce the width of any block by adding other blocks next to it. For example, if you add a spacer block next to an image block, it reduces the size and width of the image block by half. You can then change the width of the spacer block to make the image block larger or smaller.

Many blocks have ​​other options to further customize the image size and shape:

• Image blocks - In the classic editor, use the cropping handle to change the height of inline and poster image blocks.
• Gallery blocks - Depending on the layout, you can crop or resize images.
• Summary blocks - Use design settings to change how your images appear.
• Instagram blocks - Use settings to choose a design and change the aspect ratio.

Pages and sections

• Gallery sections - Style the gallery so the images appear how you’d like. You might also want to try using a different layout.
• Portfolio pages - Style the portfolio section to change how images appear.
• Store pages - Style your store pages to change the aspect ratio and product image width.
• If your site is on version 7.0, you can also add images to gallery pages and cover pages. Some version 7.0 templates support site-wide background images. For help resizing images, review your template's guide.

Other areas of your site

• Banner images - Change the height or width of the page section with the background image. These images always experience some cropping on mobile devices.
• Site logo - Change the position and size of your logo.

Advanced image options

Go beyond the basics with interactive images, animations, and image shapes.

• Add alt text to your images to help them appear in searches and make your site more accessible to visitors using screen readers.
• Add striking animations and image effects to image blocks to make your site unique and dynamic.
• Edit your images with the built-in image editor to achieve the perfect look. For example, you might want to crop, rotate, or add filters.
• Set images to open in a lightbox to help them stand out from your other content.
• Turn images into links with clickthrough URLs.
• Use hover effects to display more information when visitors move their cursor over an image.
• Use images shapes to add variety and unique visual effects to your images.

Tip: To make changes to your original image file dimensions, we recommend using third party image-editing software. For example, if you uploaded an image that’s 600px x 600px, but you want it to be 400px x 400px, you’d edit the image on your device, then upload it again to your site.

Resize images for social media

If you want to resize and crop images to specific dimensions for use outside of Squarespace or on social media platforms, use Squarespace's free image resizer.

You can upload multiple .jpg or .png files, then select the sizes you want. Select preset sizes for use on Instagram, Facebook, YouTube, X (formerly Twitter), and Snapchat, as well as from other standard aspect ratios.

After resizing your images, click the download icon in the top-right corner to download the images in a .zip file. The new images retain the original version's file format.

Note: The image resizer is intended for uploading and resizing images directly from your device for use on social media. It's not possible to use images you've already uploaded to your Squarespace site or to transfer images from the resizer to your site, but you can upload resized images to your site after downloading them.

Next steps

• Watch the All About Images Video Series for tutorials on using images in Squarespace.
• To give your visitors an even more dynamic experience, you can also add videos to your site.
• To learn how to make your images more accessible, visit Making audio, images, and videos more accessible.