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
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 an image to a page or post using the image block.
- Add a site logo, social sharing logo, and favicon to make your branding cohesive and strong.
- Add multiple images to a page with a gallery section.
- Use gallery blocks to display multiple images on 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.
- Add a banner image to the top of a page to set its tone.
- Use an Instagram block to display the latest images from an Instagram Feed.
- Use featured images to represent collection items, like blog posts and events. Use a summary block to display those featured images in other areas of your site.
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.
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.
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 areas of your site that support images are limited when editing pages in the app.
To add an image:
- Tap + or Add image.
- 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
- 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.
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.
How you resize blocks depends on the editor:
- In Fluid Engine - Resize blocks directly on the page by clicking and dragging.
- In the 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 blocks 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 - Use settings to change the height or width of your banner. Banners 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, like animations, image shapes, and animated .gifs.
- Add alt text to your images to help them appear in searches and make your site more accessible to visitors using screen readers.
- 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.