Jump to content

Optimize file size of Unsplash images

Go to solution Solved by paul2009,

Recommended Posts

Hi, 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?

I'm worried about giant file sizes slowing the site down, and wondering if I need to optimize them to be smaller... and if so, do I have to download them and resize them in Photoshop? I don't see an image resolution adjustment in the "Edit Image" tools in Squarespace.

Thank you!

Link to comment
  • Solution
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 6 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.