Optimize file size of Unsplash images

On 5/25/2022 at 5:37 AM, LauraImp said:

I'm using Unsplash images on my site – does anyone know if Squarespace imports the images at an optimized file size for the size of the block it's placed in?

TL;DR - Currently it is better if you download them, optimise them and then upload them instead of using the integration.

Squarespace will always generate different versions of an image that are scaled from 100 pixels wide to 2500 pixels wide and then serve the version that the platform considers to be the most suitable format for the size of the block and the capabilities of the device. You'll find more details in Formatting your images for display on the web.

That said, Squarespace haven't documented how images are affected by the re-encoding process, so here's a practical (but not scientific!) example using an Unsplash image that is available in the following sizes:

• Small (640 x 960px)
• Medium (1920 x 2880px)
• Large (2400 x 3600px)
• Original Size (3456 x 5184)

If I add the image to an Image Block using the Unsplash integration (adding images via the "Browse Stock Images > Free Images" link) then the largest image that Squarespace will create will be 1667 x 2500px with a file size of 568KB. Those dimensions are slightly smaller than the Medium version of the image.

If I manually download the Medium image from the Unsplash website, the downloaded file is 819KB in size with dimensions of 1920 x 2880px.

If I compress this image using smart lossy compression it becomes much smaller - around 296KB.

If I upload this compressed version, Squarespace will create a 2500px version of this image using the same size (1920 x 2880px) at a slightly higher file size of 367KB.

As you can see, after adding both images to the site, the manually processed image has a much smaller file size than the version added via the Stock Images link (367KB compared to 568KB). Having said that, the file size has increased slightly from 296KB to 367KB when Squarespace reencoded it during the upload process.

I hope that's helpful. I'd love to hear about others' experiences.