Into the deep (zoom)
Nowadays, websites are pretty fast, thanks to high internet speeds and various optimization techniques applied to website content. One of these techniques is image optimization, where images are compressed and created in different versions to make them suitable for various screen sizes. This is how the Squarespace Image CDN operates: uploaded images are limited to 2500px wide and are created in seven different versions to serve various devices, ensuring fast loading times for your site.
| Benefit | Small Images | Large Images |
|---|---|---|
| Speed | Load faster due to smaller file size | Slower loading times due to larger file size |
| Compression | Easier to compress without losing image quality | More difficult to compress without losing image quality |
| Image Detail | Less detail and resolution | Higher detail and resolution |
However, if you're an artist, photographer, architect, or in a similar field, you may want your images to be as sharp as possible. Have you ever wondered how Google Art & Culture or Artic serve their large images? They use a technique called Deepzoom, which allows viewers to view the image in its real dimension by slicing the original image into hundreds of small pieces and sending them on demand.
Deepzoom can balance the benefits of small and large images by allowing high-resolution images to be sliced into small pieces for zooming and viewing intricate details, while also improving loading times and making compression easier. By using Deepzoom format, you can provide your viewers with the best of both worlds and create an engaging user experience while still maintaining fast loading times and high-quality images.
There are various tools to display a DeepZoom image on your website, and one of the famous tool is the library called OpenSeaDragon, it is an open source Javascript library that helps you display the image tiles on Squarespace and allow user to interact with it.
Do you wanna try this on your site? Copy and paste this code below into a Code Block on your page
<script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
<script>
(async()=>{const e={"Cloudflare-R2":"https://pub-86f282ae363f4081866b8bd5b5257f26.r2.dev"};[{image:"The_Bedroom_Vincent_van_Gogh--zoomify",status:!0,memoryDifference:-91552734375e-15,peakMemoryDifference:0,fileCount:922,folderSize:237.0727310180664,tileSize:512,tileOverlap:0,format:"deepzoom",fullWidth:2500,fullHeight:1979,originWidth:14407,originHeight:11406,fullImage:"full.jpg"}].forEach((i,t)=>{for(let o in e){const r=`seadragon-viewer-${t}-${o}`,l=`\n <div id="${r}" style="width:800px; height:600px;"></div>\n `;document.querySelector("#block-yui_3_17_2_4_1679231357508_2440 .sqs-block-content").insertAdjacentHTML("beforeend",l);OpenSeadragon({id:r,prefixUrl:"https://cdn.jsdelivr.net/gh/Benomrans/openseadragon-icons@main/images/",tileSources:[{type:"zoomifytileservice",width:i.originWidth,height:i.originHeight,tilesUrl:`${e[o]}/${i.image}/`,tileSize:i.tileSize,tileOverlap:i.tileOverlap,fileFormat:"jpg"}]})}})})();
</script>But can you implement Deepzoom on your Squarespace website? Well, it's a bit challenging for Squarespace, due to the limitations of their Image CDN, as I mentioned in other post:
Images are processed to limit the max resolution to 2500px, so regardless of the size of the image you upload, it will be resized to this limitation.
Deepzoom requires images to be populated into folders with unique naming conventions for the image file name. Squarespace Image CDN does not respect folder structure, making this the biggest challenge.
Despite these challenges, there are ways to implement Deepzoom on Squarespace. With some custom coding and using a third-party image hosting service, you can serve your high-resolution images using Deepzoom and provide your viewers with an immersive experience.
In the next posts I’ll explore the solution to bypass these limitations for storing and display your wonderful Artwork on your Squarespace website. Stay tuned!
