LauraImp Posted May 25, 2022 Share Posted May 25, 2022 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
Sitefolk Posted May 25, 2022 Share Posted May 25, 2022 Good question. I’d also like to understand how this compression is implemented. Link to comment
Solution paul2009 Posted May 26, 2022 Solution Share Posted May 26, 2022 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. LauraImp 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity 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. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
LauraImp Posted May 26, 2022 Author Share Posted May 26, 2022 Thank you for this detailed reply Paul, I really appreciate it! paul2009 1 Link to comment
Sitefolk Posted May 26, 2022 Share Posted May 26, 2022 Yeah thanks @paul2009 for the test and your report. Link to comment
Sitefolk Posted December 21, 2022 Share Posted December 21, 2022 Any update to how this is implemented yet? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment