How Squarespace handle responsive images
In our last post, we discussed how Squarespace preprocesses your uploaded image assets, converts them into seven variants, and serves these variants from their own CDN. Today, we’ll dive deeper into how Squarespace actually serves these images for a seamless responsive design. We'll explore how this ensures your images display at their best, depending on the viewport dimensions, and understand the best practices for image optimization.
Image Rendering Analysis
To analyze how Squarespace handles image rendering, I created a small snippet that displays an info panel at the bottom of each image, showing the image's display sizes. Let’s take a look at the screenshot below:
The panel includes the following information for rendered images on Squarespace:
Rendered: This indicates the displayed size of the image. eg: 1202x903 px
Intrinsic: This represents the possible size of the image if no CSS or styling is applied. eg: 2022x1349 px
Variant: This shows which of the seven variants is currently being displayed. eg:2500w
Size: This tells us the image size in KB. Larger sizes use more bandwidth and can affect site load time. eg: 1052.78 KB
If the rendered size exceeds the intrinsic size, the image will look blurry because it is being stretched beyond its original resolution. Conversely, if the rendered size is smaller than the intrinsic size, the image will generally appear sharp and clear. Therefore, it's important to ensure that the intrinsic size of your images is at least as large as the largest size they will be displayed at on your site to maintain image quality.
IMG Attributes for Responsive Images
The footer of the panel includes the IMG attributes that Squarespace uses to embed responsive images. These attributes are collected on page load and remain with the image, regardless of browser resizing. These attributes include:
src
data-src
srcset & sizes
Responsive images with src, srcset or data-src
For an image to display on the page, we have to assign src attribute with the path of the image, but displaying a full resolution image at 2500px wide will be overkill for visitor with tablet screen (about 768px), and it also not wise to load all image at once, there is a technique called lazy loading where the images are only loaded when they are displayed on the viewport
<img src="https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg" class="loaded">
A more advanced method is srcset, which contains images to suit different screen sizes. This will serve one of 7 images, depending on the width of your users' viewport. This method is used on more recent elements such as Gallery sections (7.1) and Sections background on 7.1. Note that the src attribute is set as a fallback for srcset for these images
<img srcset=" https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg?format=100w 100w, https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg?format=300w 300w, https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg?format=500w 500w, https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg?format=750w 750w, https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg?format=1000w 1000w, https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg?format=1500w 1500w, https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg?format=2500w 2500w" sizes="112.37785016286645vw">
The video demostrates the way of different image variants are served based on the viewport size, the image is embed into a Gallery 7.1 Grid section
Another alternative is to use data-src attribute, when the page load, Squarespace ImageLoader will use Javascript to calculate the optimized variant to be display on the current viewport, this method will leverage Javascript to dynamically assign the src attribute to the IMG and is usally used for blocks design like Gallery blocks or Summary blocks
<img data-src="https://images.squarespace-cdn.com/.../pexels-heyho-5997996.jpg" class="thumb-image loaded">
The video demostrates the way of different image variants are served based on the viewport size, the image is embed into a Gallery Grid block
These techniques ensure that images are not loaded immediately but are deferred until the content is loaded. The data-src approach uses JavaScript to load images, while the srcset method allows the browser to decide which image version to load based on the device's characteristics.
Squarespace mixes these techniques in serving images. Certain places, like logos, are embedded using src. Other block layouts, like Gallery or Summary blocks, use data-src. The more modern layouts, like Gallery sections, use both srcset and data-src. In these cases, Squarespace ImageLoader prioritizes srcset. The table below provides a quick comparison between these methods:
| Attribute | CDN Delivery | Responsive | Lazy Load | Use without JS | Common Places |
|---|---|---|---|---|---|
src |
Yes | No | No | Yes | Logo |
srcset |
Yes | Yes | Yes | Yes | Gallery sections, section backgrounds |
data-src |
Yes | Yes | Yes | No | Gallery blocks, product blocks |
Inserting Images into Squarespace
Before we dive deeper into how Squarespace renders images, let’s review the different methods to upload images into Squarespace components:
Image Blocks: Add an image to a page or post.
Branding Images: Add a site logo, social sharing logo, and favicon
Gallery Section: Add multiple images to a page section.
Gallery Blocks: Display multiple images in areas that support Gallery block
Product Images: Upload images to showcase your product, these images can be displayed on other areas of your site using product blocks.
Banner Image: Add a banner image to the top of a page (available on 7.0 templates, like Brine).
Background Image: Add an image as background image for 7.1 Sections
Featured Images: Use featured images to represent collection items, such as blog posts, events, and portfolios, which can be viewed on the collection page.
Summary Block: Display supported collection featured images (like blogs, events, and products) in other areas of your site.
Lightbox Images: Some gallery and image layouts support displaying images in a fullscreen carousel, providing an immersive viewing experience.
Testing Image sizes in Squarespace content
To conduct the test, images were inserted into various Squarespace components, including:
Logo Image
Section background image
Gallery Grid sections
Gallery Grid blocks
Image blocks (Fluid and Classic sections)
Summary block
Product block
Lightbox Images (in both Gallery sections and blocks)
The body content in Squarespace has been configured with a maximum width of 1200 pixels. Here's how it behaves across different viewport widths:
Viewport wider than 1200px: The body content remains fixed at 1200px width and centers itself within the available space.
Viewport narrower than 1200px: The body content expands to 100% of the viewport width, allowing it to fill the entire screen width on smaller devices.
Background Image: The first section includes a background image set to display at full viewport width, regardless of the body width limit. This ensures the background image spans the entire width of the screen for a visually impactful presentation.
Content Images: Images within the content are configured to dynamically adjust their size based on the body element's width. If the body element becomes smaller than the image dimensions, the images shrink proportionally to fit within the body width. This responsive design approach prevents images from overflowing the body content
General Observed Results
Exceeding Body Width:
Background/Banner Images and Gallery Section Slideshow (Fullscreen):
Our tests show that these images can exceed the body constraint to fit 100% of the viewport. It's best to upload images with a maximum width of 2500px to ensure they look good on all screen sizes.
Lightbox Images:
Gallery lightbox images can also exceed the content body width, providing a fullscreen viewing experience.
Within Body Width:
Other Images (e.g., Gallery Grid sections, Gallery Grid blocks, Image blocks (Fluid and Classic sections), Summary block, Product block):
These images are constrained to the body width (which is currently set at 1200px), and will never exceed this width in their rendered size.
Gallery with Thumbnails:
Thumbnails are derived from your uploaded images and are served dynamically, so you don't need to worry about resizing them manually.
Logo:
Logos are not lazy-loaded, so it is crucial to resize the image correctly before uploading
Recommendations for Squarespace image resolution
Based on the observed results and the nature of image handling on Squarespace, here are the best practices to follow for different types of images:
Since Squarespace creates image variants up to 2500px wide, it's essential to resize your images to the recommended maximum width or below. This approach ensures that Squarespace delivers the largest image size at the specified width, resulting in smaller file sizes and faster delivery.
Squarespace Background Images
For background/banner images and gallery slideshow (fullscreen), upload images with a maximum width of 2500px. These images can exceed the body width constraint and fit 100% of the viewport, ensuring they look good on all screen sizes. For more insights about banner images, check out the dedicated blog on Sparkplugin about ideal banner size.
Squarespace Gallery Images
For gallery images, a maximum width of 1500px is recommended for images uploaded to gallery sections and blocks. If you plan to enable lightbox for those galleries, the recommended size is between 1500px and 2000px due to the nature of Squarespace's lightbox, which does not support zoomable images.
Lightbox Studio customers should consider using higher resolution images at 2500px wide for better zoom quality. However, be mindful of the potential impact on loading times. Separate tutorials on optimizing image variants when using Lightbox Studio will be provided to help manage this balance.
These size recommendations also apply to Squarespace product images and collection featured images. Ensuring a maximum width of 1500px to 2500px for these images will provide a high-quality visual experience while optimizing performance.
Logo & favicon
Logos should generally be between 160px to 600p in size. This ensures that the logo displays correctly and crisply across different screen sizes and resolutions.
For favicons, your image can be up to 300px x 300px. Keep the design simple, as the favicon may appear as small as 16 pixels square on some browsers. This ensures the favicon remains recognizable.
Bottom line
The purpose of our test was to understand Squarespace's delivery mechanism for responsive images and their actual display on the page. By examining how images are resized and rendered, we can determine the best practices for image sizes to ensure optimal display and performance.
Bonus Tip: If you want to explore the best ways to optimize images for SEO, check out the SEOSpace blog for additional tips and strategies to enhance your on-page SEO.
