How to find video URLs on Squarespace and more

This post is a collaboration with BeyondSpace.studio

How Squarespace Delivers Your Videos

When you upload videos to Squarespace, they’re delivered through HLS format in various sizes. This enables Squarespace to deliver the ideal video tailored for each of your visitors. Simple enough, right? But if you're curious about the inner workings of this process or need a tool for grabbing video URLs easily, keep reading!

Understanding HLS Streaming

HLS streaming is a popular method for delivering video content across the internet. It works by breaking the video file into smaller chunks and serving them over HTTP. This allows for adaptive streaming, meaning that the quality of the video can change based on the viewer's internet speed and device capabilities.

When you upload a video to Squarespace—whether through a Video Block, Section Background, or Video Page—it's processed into multiple variants with different bitrates and resolutions. These are:

• 360p

• 1080p

This multi-resolution approach ensures that viewers with slower connections can still enjoy smooth playback without buffering issues.

HTML5 video element

Videos can be played in a browser using the HTML <video> element. When you specify the video source (such as .mp4, .webm, or .ogg) within the video tag, the browser begins downloading the video and will start playing it once enough data has been buffered.

If a user seeks ahead in the video, playback will only resume once all preceding bytes have been downloaded and played.

Here’s a basic example of the <video> element:

<video controls autoplay poster="video-thumb.jpg">
    <source src="vid.ogg" type="video/ogg">
    <source src="vid.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Key Points about HTML5 Video:

1. Single Source Download: In HTML5 video, only one version of the video source is downloaded at a time, regardless of the user's screen size.

2. Resource Management: If the video source dimensions exceed the screen size, the device must eliminate pixels to render the video accurately. This can lead to increased CPU and battery usage.

3. Network Limitations: If the video bitrate exceeds the available network bandwidth, playback may be disrupted, causing interruptions or stalling.

Squarespace video stream

When you upload videos to Squarespace, they are delivered via streaming. This streaming process involves the following key components:

The Master Playlist (playlist.m3u8)

The initial file sent to the video player is the master manifest file, usually referred to as playlist.m3u8. This file serves as a 'list' that showcases all the streams available for the video. Each stream version is listed separately, usually arranged from the lowest quality to the highest.

#EXTM3U
#EXT-X-VERSION:7


#EXT-X-STREAM-INF:BANDWIDTH=1124815,CODECS="avc1.64001e,mp4a.40.2",RESOLUTION=624x360
https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-624:360.m3u8?Expires=1727186774&Signature=OTgyNTRlMTQ4ODlhYmYzN2MzNzBlYTQ2MGU2OTc0ODdjZWVmMzJmMGM1MjU0OTgwNTFmYzM3MDUzYWNiMDNmNA
#EXT-X-STREAM-INF:BANDWIDTH=3089710,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=1870x1080
https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080.m3u8?Expires=1727186774&Signature=OTgyNTRlMTQ4ODlhYmYzN2MzNzBlYTQ2MGU2OTc0ODdjZWVmMzJmMGM1MjU0OTgwNTFmYzM3MDUzYWNiMDNmNA

Let’s dig deeper into the last 2 line, where it contains the definition of the fullHD stream (1080p)

#EXT-X-STREAM-INF:BANDWIDTH=3089710,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=1870x1080
https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080.m3u8?Expires=1727186774&Signature=OTgyNTRlMTQ4ODlhYmYzN2MzNzBlYTQ2MGU2OTc0ODdjZWVmMzJmMGM1MjU0OTgwNTFmYzM3MDUzYWNiMDNmNA

In this example:

• BANDWIDTH: The required bandwidth to play this stream is approximately 3.09 Mbps.

• CODECS: The video codec is avc1, and the audio codec is mp4a.

• RESOLUTION: The resolution is 1870x1080.

• The link provides access to the manifest for this stream, which will detail each segment's length and location.

Single Stream File

If we download the full HD stream file from the playlist.m3u8, we can see how the video is structured and delivered for efficient streaming.

At its core, a video stream is generated by dividing the video into smaller pieces known as segments. These segments are typically identified by a format associated with their encoding, such as MPEG-TS. The organization and naming of these segments are documented in a manifest file, usually with the .m3u8 extension, eg: mpegts-h264-1870:1080.m3u8

#EXTM3U
#EXT-X-VERSION:7
#EXT-X-TARGETDURATION:8
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-KEY:METHOD=AES-128,URI="https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/key/f062487d84f8136d025d52cb0ecf2f96765d86b4069015a9c1a7fa2344e17b9f",IV=0xe2969d19ecb6d750fa458786617c6f75
#EXTINF:8.066667,
#EXT-X-BYTERANGE:1742208@0
https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080
#EXTINF:4.800000,
#EXT-X-BYTERANGE:3025312@1742208
https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080
#EXTINF:3.766667,
#EXT-X-BYTERANGE:1006368@4767520
https://video.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/5847785e-97f9-4491-bde8-b9003fcb0afc/segments/mpegts-h264-1870:1080
#EXT-X-ENDLIST

Below is the breakdown of the stream:

Header Information:

• #EXTM3U: This line indicates that the file is an extended M3U playlist.

• #EXT-X-VERSION:7: This specifies the version of the playlist format.

• #EXT-X-TARGETDURATION:8: This indicates that the maximum segment duration should be 8 seconds.

• #EXT-X-MEDIA-SEQUENCE:0: This shows the sequence number of the first segment.

• #EXT-X-PLAYLIST-TYPE:VOD: This indicates that the playlist is for video on demand.

• #EXT-X-KEY:...: This line specifies the encryption method (AES-128)

Segment Information:

• #EXTINF:8.066667,: This line indicates that the first segment has a duration of approximately 8.07 seconds.

  • #EXT-X-BYTERANGE:1742208@0: This specifies that the segment will be delivered as a byte range starting from the beginning (0) with a length of 1,742,208 bytes. The URL following this line points to the segment data.

• The subsequent #EXTINF and #EXT-X-BYTERANGE lines provide information about additional segments, including their durations and byte ranges.

Fast Forwarding

As previously mentioned, when working with MP4 files, skipping ahead requires downloading all prior content. However, with video streams, the player can intelligently request only the necessary segments.

Given the fullHD segment m3u8 playlist above: If you seek to t=13 seconds, the player evaluates the segments as follows:

1. First Segment: Covers from t=0 to approximately t=8.07 seconds.

2. Second Segment: Covers from t=8.07 to approximately t=12.87 seconds.

Since t=13 seconds is beyond the total duration of the first two segments, the player recognizes that it needs to access the third segment:

• Third Segment: Starts at t=12.87 seconds and continues until its duration completes.

Therefore, the player can skip downloading the first two segments (0–12.87 seconds) and immediately request the third segment, which ensures a smoother playback experience without unnecessary buffering. This efficient handling allows users to seek ahead quickly and minimizes load times.

Adaptive streaming on Squarespace

The power of adaptive streaming shines brightly when using Squarespace’s video capabilities. With HLS (HTTP Live Streaming), the video player can dynamically adjust the quality of the stream based on real-time network conditions.

When a viewer starts watching a video, the player assesses the available bandwidth and begins playback with the most suitable resolution. If the network speed fluctuates, the player can seamlessly switch between different quality levels.

For example, when I simulated a 3G network speed, the player automatically switched from 1080p to 360p to ensure smooth playback. This seamless transition allows viewers to enjoy content without interruptions.

Check the screenshots below for a visual reference of this adaptive quality adjustment in action:

1. No Throttling Mode: The 1080p segments have been loaded.

2. Network Throttled to 3G Speed: The 360p segments have replaced the 1080p counterparts.

Limitations of Video Streaming on Squarespace

Videos uploaded to Squarespace can automatically display at either 1080p or 360p based on the user's device, browser, and internet connection. However, there is no option for users to manually select which resolution to display. This lack of control can lead to situations where the background video appears blurry on mobile devices.

It's important to note that while you can upload 4K videos to Squarespace, they will be resized and displayed at a maximum resolution of 1080p.

Every Squarespace website can have up to 30 minutes of uploaded video. If you need more storage, subscribe to a Digital Products plan. For more information about Squarespace's video requirements, check this page.

If you're interested in exploring other methods for uploading video to Squarespace, refer to this detailed tutorial from the Beyondspace blog.

Accessing the playlist URL for Squarespace videos

Now that you have a solid understanding of Squarespace streaming, you might see why the URLs for uploaded videos no longer appear in traditional formats like MP4 or OGG. Instead, they are provided in HLS format, which allows for adaptive streaming and better performance across varying network conditions.

You may find yourself in a variety of situations where grabbing the URL for your videos becomes useful. For instance, if you want to share it with colleagues/clients for collaboration, having direct access to the HLS video URL simplifies the process. Moreover, if you're a developer looking to integrate videos into a custom application or solution on your Squarespace website, accessing the HLS URL can be incredibly beneficial. This capability enhances your flexibility and control over how and where your video content is used.

Asset library enhancer

Beyondspace has introduced a free tool called Asset Library Enhancer, featuring a unique capability that allows you to copy the URLs of videos and images uploaded to Squarespace directly from the context menu. This enhancement is designed to streamline your workflow, making it easier than ever to access and share your media files seamlessly.

Update notice
Asset Library Enhancer is now managed through Ground Control for easier navigation and customization. Explore Ground Control

How to use the new Copy URL feature:

1. First, copy the snippet for the Asset Library Enhancer into your Footer injection.

2. Go to your site's Asset Library at /config/asset-library from your Squarespace dashboard.

3. Ensure the Library Layout is set to List.

4. Click on the Context Menu of Each Row Item to access the Copy URL button: For each image or video, click on the three dots (context menu) next to the item to find these options.

   • Copy Image URL: This will grab the image link and video thumbnail URL to your clipboard.

   • Copy Video URL: This will grab the real URL of the video to your clipboard. Note that if the video is not used anywhere on your page, the video URL may not be usable. In such cases, you may see a message indicating that the video is not playable and suggesting you embed the video elsewhere to make the URL accessible.

Conclusion

HLS has a number of advantages over the native HTML5 <video> tag. Responsive by default, it ensures that less data is wasted by serving a video that is too large for a small screen. Additionally, its adaptive capabilities mean that fluctuations in network speed are less likely to impact playback quality.

Squarespace uses HLS under the hood. Every video creation response includes the m3u8 URL for the stream, so the small tool from Beyondspace can help you quickly grab those playlist URLs of videos and use them for your own needs.

Cloudflare + Squarespace = a Faster, Smarter Website

This post is a collaboration with BeyondSpace.studio

Squarespace provides robust tools for building and managing websites, offering everything from beautiful templates to built-in caching and backup solutions. However, for those who seek even more control, security, and optimization, integrating Cloudflare can take your Squarespace site to the next level. By connecting your domain to Cloudflare, you place a powerful layer between your visitors and Squarespace's servers, unlocking features that go beyond the platform’s default capabilities.

According to NerdyData, out of 132,720 indexed Squarespace websites, 17,340 use Cloudflare. This post explores why you might want to join them and how to get the most out of this combination.

Setting up Cloudflare with Squarespace

This guide assumes you've already set up Cloudflare as your DNS nameserver manager and connected your Squarespace domain using DNS Records. While Squarespace typically recommends using DNS-only mode (disabling the orange cloud icon) to avoid potential issues, I’m following Cloudflare’s guidance instead. This approach involves proxying all records except for the verify.squarespace.com CNAME, which should remain in DNS-only mode.

If you’re unsure whether your site is connected to Cloudflare, you can verify the connection using this tool. Simply enter your domain name and click "Find DNS Record." If Cloudflare DNS records are returned, your site is successfully protected by Cloudflare.

Benefits of using Cloudflare with Squarespace

Even with Cloudflare’s free plan, you can gain a handful of benefits. Let’s explore what it can bring to your Squarespace website:

Enhanced Caching

Cloudflare provides superior caching options, helping your site load faster by serving content directly from its CDN (Content Delivery Network). This reduces the load on Squarespace’s servers and improves the user experience. Note that images, videos, and other static assets are stored on Squarespace’s CDN, not on the same domain as your website, so there will be no cache benefit for those assets. Learn more about Cloudflare Cache settings.

Crawler Hints

Cloudflare’s Crawler Hints feature can notify search engines about changes on your site. While this includes support for the IndexNow protocol, it lacks transparency in how and when content is sent to search engines. It’s a useful feature, but for better control, consider sticking with your current indexing service. Read more about Crawler Hints.

Bot and AI Blocking

Protect your site from malicious bots and AI scraping by utilizing Cloudflare's bot management tools. This feature is crucial for maintaining site security and performance and is similar to Squarespace’s crawler blocking. Learn more about bot blocking.

Country or IP Blocking

You can block visitors from specific countries or IP ranges, providing an additional layer of security and content control. IP Access rules allow you to allowlist, block, or challenge traffic based on the visitor’s IP address, country, or Autonomous System Number (ASN). This is particularly useful for blocking or challenging suspected malicious traffic and allowing services that regularly access your site, such as APIs, crawlers, and payment providers. More on IP Access rules.

Zaraz – Server-Side Tag Management

Zaraz enhances the performance, security, and privacy of web applications by loading third-party tools in the cloud, separate from browsers. This allows you to integrate analytics tools, advertising pixels, widgets, and various other third-party tools without impacting the speed of your websites. Zaraz functions similarly to Google Tag Manager but operates on the server side.

Source: Cloudflare blog

Using Zaraz, you can control what kind of data you want to share with third parties, which can help your websites comply with EU regulations. For example, when connecting Google Analytics via Zaraz, you can choose not to share visitor IPs with Google Analytics.

Exclude visitor IP using zaraz

With the free plan, you can manage up to 1 million events per month. Explore supported tools on Zaraz.

Cloudflare Workers: A Game Changer for Squarespace

Cloudflare Workers is a powerful serverless platform that can serve as a backend for your Squarespace site, allowing you to extend its functionality without enabling Developer Mode (which is only available for Squarespace 7.0 templates). With Cloudflare Workers, you can deploy up to 30 scripts and handle up to 100,000 requests per day, all for free.

Worker Routes offer an efficient way to map specific URL patterns to a Worker when your domain is proxied through Cloudflare. For instance, a route pattern like https://*.example.com/blog/* would trigger your Worker for any HTTPS request targeting a subdomain of example.com that starts with /blog/.

Source: Cloudflare blog

One of the standout features of Cloudflare Workers is Cloudflare’s HTMLRewriter. This JavaScript API lets you parse and modify HTML content in real-time. When your Worker fetches content from the Squarespace server via Worker Routes, HTMLRewriter can dynamically adjust the page content at the CDN edge before delivering it to the user.

For example, you can seamlessly inject additional HTML elements, like a script tag, into the page content using Cloudflare Workers.

Cloudflare's HTML Rewriter. Source: able-test.com

Here are some practical uses of Cloudflare Workers:

Create an alternate Sitemap.xml

Squarespace automatically generates a sitemap, but with Cloudflare Workers, you can create custom sitemaps tailored to specific use case. For example, you might want a sitemap that only includes content from specific collection. This is particularly useful for SEO and for better organizing your site’s content.

For instance, on Beyondspace, the default sitemap is accessible at beyondspace.studio/sitemap.xml. However, a specialized sitemap for case-studies blog can be accessed at beyondspace.studio/case-study-sitemap.xml.

What makes this approach powerful is that the case-study-specific sitemap is generated on the fly and is accessible at the root level of the domain. This means as soon as new case studies are published, they are automatically included in the alternate sitemap, keeping your SEO efforts up-to-date without manual intervention. The alternate sitemap has been tested against Google Search Console and Bing webmaster tool and is accepted with no issue

Add Nofollow and Noreferrer Tags

Since Squarespace's link editor doesn’t allow adding these tags, you can use Cloudflare Workers to modify the DOM and insert the necessary attributes, enhancing SEO and privacy.

A/B Testing with Cloudflare Workers

Cloudflare Workers allows you to perform server-side A/B testing by modifying the HTML of your pages directly at the edge, enabling you to test different versions of your content seamlessly. This server-side approach gives your development team greater control and precision when determining which version of the content performs better, ultimately leading to more informed decisions and optimized user experiences.

Source: able-test.com

Secure API calls with Cloudflare Workers

Many third-party services require API keys, which can be vulnerable to misuse if exposed in client-side code. Squarespace's custom code injection places API keys directly in your website's source code, which is not recommended for security reasons. Cloudflare Workers addresses this issue by allowing you to handle API calls server-side, keeping your API keys secure.

This approach is crucial for integrating third-party services where sensitive data is involved. For example:

• Tapfiliate REST API: Securely manage affiliate data without exposing your API keys. Tapfiliate REST API Documentation

• Algolia Search API: Protect your search API keys to prevent unauthorized access. Algolia API Keys Security

• Acuity Scheduling: Create a custom user interface for scheduling without exposing sensitive integration keys. Acuity API documentation

By using Cloudflare Workers to handle these API calls, you ensure that your sensitive data remains secure while enabling advanced integrations and functionalities on your Squarespace site.

Acuity custom UI example

Integrate image pipeline

Cloudflare Workers can efficiently handle image optimization for Squarespace sites by delivering images in WebP format and applying smart cropping. Since image optimization involves replacing all image sources when the page loads, doing this with a JavaScript solution on the frontend can be quite challenging. However, with Cloudflare Workers, you can efficiently change all image sources before they reach your visitors' browsers.

Using Cloudflare Workers, you can optimize images before they are served to users, ensuring faster load times without impacting performance. You can also use third-party image CDNs or Cloudflare's own Image Transformed service. Cloudflare Images Transformed is a post-paid service costing $0.50 per 1,000 unique transformations per month, making it a cost-effective solution for advanced image optimization.

Additional details on the Cloudflare & Squarespace connection

While there may be a slight delay when Cloudflare connects to Squarespace, this time is incredibly quick and hardly noticeable, with the entire document parsing taking roughly 5ms using Cloudflare Workers.

You can use Cloudflare Workers for free for up to 100,000 requests daily. Beyond that, it operates on a pay-as-you-go model, starting at $5 per month.

When you connect your primary domain to Cloudflare and enable proxying, you can leverage all optimization features and Workers routes for this domain, such as your-site.com. However, your built-in Squarespace domain (e.g., your-site.squarespace.com) will remain unaffected by Cloudflare.

This discrepancy can cause confusion for visitors if they land on the built-in Squarespace domain instead of the primary domain, especially if significant modifications are made to the page. To address this, a JavaScript redirection can send users to your primary domain.

Copy and paste the below script to your Code injection panel

<!-- sqs:redirect-authentic -->
<script>
(() => {
    // Define the new hostname
    const primaryHostname = Static.SQUARESPACE_CONTEXT.website.authenticUrl;
    
    // Get the current path and query
    const path = window.location.pathname;
    const query = window.location.search;

    // Check if the path is not /config and the current hostname is the old one
    if (location.pathname.indexOf("/config") !== 0 && location.host.includes("squarespace.com")
&& window.self === window.top) {
        // Construct the new URL
        const newUrl = `${primaryHostname}${path}${query}`;

        // Redirect to the new URL
        window.location.replace(newUrl);
    }
})();
</script>
<!-- sqs:redirect-authentic -->

For Zaraz users, the same issue applies, as the built-in domain is not Zaraz-enabled. You can install Zaraz on your built-in domain by following this tutorial.

Comparing Cloudflare integration across CMS platforms:

• Shopify: Shopify uses Cloudflare by default, but its settings are limited unless you're on a Cloudflare Enterprise plan. For merchants seeking advanced customization and traffic control, the Enterprise plan is essential as part of the O2O (Orange-to-Orange) setup. According to NerdyData, 99.5% of Shopify sites use Cloudflare, with 420,930 websites on Shopify and 419,184 of them utilizing Cloudflare.

• Wix: Wix currently does not support proxied DNS records for domains connected through Cloudflare. This limitation is noted in their official support documentation.

• Webflow: Integrating Cloudflare with Webflow is tricky. You may need to use a Page Rule to disable SSL on specific URL patterns, as explained here. Alternatively, you might have to forego certain features like ecommerce or user accounts, as mentioned in this tutorial.

Recommended Cloudflare Proxy Settings for Squarespace

With numerous settings available on Cloudflare, it can be overwhelming to configure everything correctly. Here are the recommended settings we use for the Squarespace websites to optimize performance and security.

Cloudflare zone/website settings

Update Your Encryption Mode:

Use this to manages encryptions on two connections: one between your visitors and Cloudflare, and the other between Cloudflare and Squarespace server.

• Log in to the Cloudflare dashboard, select your account and domain.

• Go to SSL/TLS.

• Choose an encryption mode: Full or Full (Strict) for end-to-end encryption between Cloudflare and your Squarespace server.

Caching Configuration:

• Navigate to Caching > Configuration.

• Activate Crawler Hints to help web crawlers index your site more effectively.

Bot Protection:

• Go to Security > Bots.

• Enable Bot Fight Mode to challenge requests from known bots before they access your site.

• Enable Block AI Scrapers and Crawlers to prevent bots from scraping your content for AI applications.

Speed Optimization:

• Go to Speed > Optimization.

• For the Free Plan, enable all available settings on Recommendations.

• Under Content Optimization:

  • Rocket Loader: Keep off unless you know what you are doing.

  • Auto Minify: This feature is deprecated; it’s best to leave it off.

Conclusion

Integrating Cloudflare with your Squarespace site offers numerous benefits, from enhanced caching and bot protection to advanced tag management with Zaraz. However, the standout feature is Cloudflare Workers, which unlocks a realm of possibilities that extend Squarespace's native functionality. With Workers, you can create custom sitemaps, implement server-side A/B testing, optimize images dynamically, and secure API calls—all without altering Squarespace’s core settings.

By leveraging Cloudflare Workers, you can significantly enhance your site’s performance, SEO, and security, making it a powerful tool to complement Squarespace’s capabilities.

Reduce Squarespace Image Size by 80% With WebP

This post is a collaboration with BeyondSpace.studio

Can you use WebP with Squarespace? Squarespace does not accept WebP files for upload; the officially supported types are JPG, PNG, and GIF. However, we can make it possible by leveraging 3rd party Image CDNs, let’s dive in

What is the WebP Image Format?

WebP is an image file format developed by Google, providing superior compression for web images. WebP files are smaller than JPEGs and can display transparent backgrounds like PNGs. Additionally, WebP supports animations, similar to GIFs.

Benefits of Using WebP

1. Enhanced Website Performance: WebP images are more lightweight compared to JPEGs and PNGs, leading to faster loading times for pages containing WebP images.

2. Bandwidth Savings: WebP helps save bandwidth, allowing websites to provide users with a more immersive media experience.

3. Improved SEO: WebP contributes to better search engine optimization (SEO) as recommended by Google's Core Web Vitals, highlighting the importance of modern image formats like WebP.

Drawbacks of WebP

1. Limited Compatibility: WebP is primarily focused on internet usage, making it less practical for offline image viewing. Additionally, older browsers such as Edge 12-17 and Firefox 2-64 do not support WebP, limiting its compatibility (refer to the full compatibility table for more details).

2. No Progressive Loading: Unlike Progressive JPEG, WebP does not support progressive loading, meaning you will choose between saving bandwidth and serving the image quickly to the client.

Let’s take a look at the example, can you spot the difference?

JPG version WebP Version View image JPG - 291 kB - 2500 x 1667 View image JPG - 291 kB - 2500 x 1667 View image WebP - Quality: auto - 115 kB - 2500 x 1667

This webp file is 60% smaller than its counterpart

How to deliver webp format on Squarespace?

The mechanism of this approach is to use 3rd party CDNs to cache and serve Squarespace pictures, meaning you don’t have to manually optimize and reupload image files. And manipulate Squarespace Imageloader into load the webp counterpart of the Images

First you need to understand how Squarespace images are delivered to client: first they create 7 variants of your Images and deliver them to browser based on certain conditions to ensure the best images are delivered, for example: large screen browser will likely received a 2500px wide variant, while a tablet will get a 750px wide variant. All of this is made possible with Squarespace ImageLoader

ImageLoader will expect the images on Squarespace to have either src, data-src or srcset so it can load the images effectively, based on our observation, srcset take higher priority than data-src, meaning if an image has both data-src and srcset, Squarespace will get the Image source from srcset first.

So if we can manipulate the srcset & data-src attribute of images, we can somehow force Squarespace to load any different pictures. In order to deliver webp images from Squarespace we need a on-the-fly transformation to convert and cache JPG and PNG assets and convert them to next-gen format like AVIF and WEBP, it is also required that the old browsers will still get the origin version to ensure maximum compatibility

I found the 2 services that can fulfill this requirement, include

Cloudinary

To deliver Squarespace pictures, you need to enable Fetch URL in order fetch the remote image (from Squarespace CDN)

Cloudinary's free plan gives you 25 units per month. These units can be used in three different ways:

1. Image transformations: You can change or optimize 25,000 images per month.

2. Storage: You can store up to 25 gigabytes (GB) of images or videos.

3. Bandwidth: Your visitors can view up to 25 GB worth of your images or videos per month.

These activities will count towards the total 25 units. To give you an idea of what 25 GB of bandwidth means in terms of website visits:

• If an average page on your website has about 1 MB of images, 25 GB would allow for approximately 25,000 page views per month.

• Assuming an average visitor looks at 3 pages, this translates to roughly 8,300 unique visitors per month.

Fetched assets count towards storage units, and the cache purges every 7 days.

ImageKit

It support Web server image origin, we can take advantage of this feature to serve image directly from Squarespace CDN.

The things I like about imagekit is remote images do not count toward the storage (free plan has 5Gb storage), so do the transformations, the only matter is the monthly bandwidth limit at 25GB. Video transformation is limited at 500 unit per month

Assume you have 5000 visits with everage 3 pageviews, in total of 15000 sessions, if you have 5 images on pages with average 250kb size, monthly bandwidth will be around 18GB.

Compared to Cloudinary, Imagekit has a much better analytics dashboard, allow you to view exact bandwidth and other statistics.

Ready to supercharge your Squarespace site's image performance?

Visit BeyondSpace blog for step-by-step instructions and code snippets to implement this WebP solution.

🚀 Cloudinary
🚀 ImageKit

Testing

I tested the scripts using SEOSpace, which suggest images on the site should be smaller than 250KB, if you already uploaded a big file, serving them in webp can reduce the file size instantly without going through tedious process for resize and reupload.

I made another test with Cloudinary webspeed test & Pagespeed

Image Source	Page URL	Cloudinary Image Test	PageSpeed Test
Squarespace CDN (origin)	📸 View Image	📝 View Test	📋 View Test
Cloudinary CDN	📸 View Image	📝 View Test	📋 View Test
ImageKit CDN	📸 View Image	📝 View Test	📋 View Test

Here are the results from our image source tests using different CDNs for these specific pages in Cloudinary Image Test, other test may return different resource size:

• Origin JPEG (Squarespace CDN): The total file size is 32 MB.

• ImageKit CDN: The total file size is significantly reduced to 4.8 MB.

• Cloudinary CDN: The total file size is reduced to 5.7 MB.

• Total Number of Images: 27

Squarespace Images Cloudinary CDN Imagekit CDN

Using ImageKit and Cloudinary CDNs noticeably decreases the overall file size compared to the original JPEGs served from Squarespace's CDN. This reduction can greatly improve page load times and performance.

Takeaway

The JavaScript custom code above is set to run on the DOMContentLoaded event. However, since image loading in the browser is a race, it's impractical to override all image srcset attributes on pages. As a result, sometimes images may still be served in their original format, especially above-the-fold images. Therefore, images at the top of your page, such as fullscreen banners or background images, will still need to be optimized before upload.

Disclaimer: In the next few weeks, we will publish a complete solution using Cloudflare to replace all image src attributes before the page load.

Since we set the delivery format for these services to auto, the image file type is determined by the server. In rare cases, this might result in the server serving the JPG counterpart instead of WebP. While you can explicitly request WebP conversion, it’s not recommended to ensure maximum compatibility.

You still need to monitor bandwidth usage to see if the free tier plan meets your needs.

Conclusion

By exploring these services for your Squarespace image pipeline, you gain an efficient solution for serving next-gen format images with automatic optimizations and detailed analytics.

• If your primary focus is on image delivery and detailed usage insights, ImageKit is the ideal choice.

• For more advanced features and video transformations, Cloudinary remains a strong alternative.

Choose the option that best aligns with your specific needs for an optimized and engaging web experience.