Image Blocks in Squarespace
TL;DR:
- Image blocks work across all Squarespace templates and are easy to add to any page
- Upload images directly from your device, choose from your existing library, or use stock photos
- Keep images under 500KB for faster loading times
- Use focal points to control how images appear when cropped or resized
- Always add alt text for accessibility and SEO benefits
- Lightbox feature lets visitors view enlarged images but disables direct links
Adding and Managing Image Blocks
Adding images breaks up text walls and makes your content more engaging. Here's how to add them properly:
Click the edit button on your page, then position your cursor where you want the image. Click the plus icon and select "Image" from the block menu.
You've got three options for adding images: upload from your device, pick from your existing library, or browse the stock photo collection. If you're uploading new images, stick to files under 500KB. Larger images slow down your site and frustrate visitors.
Once your image is in place, you can replace it, edit it, or delete it entirely. The editing options appear when you hover over the image block.
Using Mobile Devices to Upload Images
The Squarespace mobile app makes it simple to add images when you're away from your computer.
Download the app and log into your account. You can snap photos directly in the app or select existing images from your phone's gallery. The upload happens instantly, and you can add the image to any page on your site.
Turn on push notifications in the app settings so you get prompts when uploads complete. This is particularly handy when you're updating your site with fresh content on the go.
Editing and Customizing Images
Squarespace gives you plenty of control over how your images look and behave.
Click on any image block to open the editor. Here you can set the focal point, which determines what part of the image stays visible when it gets cropped or resized. This is crucial for mobile viewing where images often get cropped differently.
Add alt text in the same editor. This helps screen readers describe your images to visually impaired visitors and gives search engines context about your content.
The Design tab offers layout options like Card, Poster, or Stack. These control how your image sits alongside text and other content. You can also apply shapes like circles or rounded corners, though these work better with square images.
Image Links and Lightboxes
You can add clickable links to any image using the link icon in the image block toolbar. This is useful for directing visitors to related content or external sites.
The Lightbox feature creates a popup overlay when someone clicks your image. This lets visitors see a larger version without leaving the page. However, you can't use both features together – enabling Lightbox disables any direct links on the image.
Choose based on your goal. If you want people to navigate somewhere specific, use a direct link. If you want them to examine the image more closely, use the Lightbox.
Image Optimization Tips
Size matters for website performance. Images over 500KB slow down your pages, especially on mobile connections. Most image editing apps can reduce file sizes without noticeable quality loss.
Square images work best with shape modifications like circles. Rectangular images often look odd when forced into circular frames.
Consider your mobile layout when positioning images. What looks good on desktop might be poorly cropped on phones. Use the mobile preview to check how your images appear on smaller screens.
FAQs
Can I add links to images in Squarespace image blocks?
Yes, click the link icon in the image block toolbar. You can link to other pages on your site, external websites, or email addresses.
Is resizing images in Squarespace simple?
It depends on your template. Fluid Engine layouts offer more flexibility with drag-and-drop resizing. Classic Editor templates are more restrictive, but you can use spacer blocks to control positioning.
How can I shape images in my Squarespace site?
Go to the Design tab in your image block editor. You can choose circles, rounded corners, or keep the original rectangular shape. This works best with square images.
Jargon Buster
Fluid Engine: Squarespace's modern layout system that lets you drag and drop elements anywhere on the page. Available on all new sites and most templates.
Classic Editor: The older Squarespace editor with more structured, grid-based layouts. Still used on some older templates.
Focal Point: A tool that lets you choose which part of an image stays visible when it gets cropped or resized for different screen sizes.
Lightbox: A popup overlay that shows enlarged images when visitors click on them. The enlarged image appears on top of your page content.
Wrap-up
Image blocks are one of the most straightforward ways to improve your Squarespace site's visual appeal. The key is keeping your images optimized for web use and making sure they work well on mobile devices.
Remember to add alt text to every image – it's good for accessibility and helps search engines understand your content. Take advantage of the focal point feature to ensure your images look good at any size.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for in-depth tutorials and expert guidance.