Squareflair

View Original

Understanding Image Ratios in Squarespace Slideshows

In the video video below, I walk my client through determining the "image ratio", using Picasa to crop images, and adding the newly-cropped images to the Squarespace Gallery + Slideshow.

See this content in the original post

Have you enjoyed using the Squarespace Slideshow component that's built-into V5's editor?

Rather than define an exact pixel size, Squarespace has decided that setting the "ratio" makes more sense, because the images already are set to proportionally scale in Squarespace's Photo Gallery, and the Gallery module is what feeds the slideshow component.

This concept works well for "standard" photos that would come out of a camera— photos that use generic/standard size ratios. However, when using a Squarespace Slideshow in custom locations, where a pre-determined "target size" is important, it can be a little tricky.

In the client-site example on my video above, I've incorporated three Squarespace Slideshows on the same homepage. All three slideshows are the same size, but as my client quickly learned, using THE EXACT image size is important.

Here's why this is important:

It's fantastic that Squarespace's code will auto-crop and re-size the images to fit our areas, and they won't distort the aspect ratio, but if the images are larger than the target area, there is a great-deal of unnecessary overhead when loading the images. It's totally possible that the image files-sizes could be 10-20 times larger than they need to be. Pre-scaling your images will greatly help you! 

(*NOTE* This changes in Version6, where images are sampled at multiple image sizes on the server-side)

Here's What.

If you've used the Squarespace "Slideshow" component, you might already know that configuring a custom "image ratio" is a little confusing, so in the video, I'll walk you through determining the "image ratio".

Do I need to learn Photoshop?

No. I work with many clients who wish to swap-out images on their websites, but either they don't want to invest in the cost of Photoshop, or in-reality— learning how to use Photoshop for simple edits can be daunting. 

There are hundreds of apps, and even websites that will allow you to crop and re-size images, and after further hunting for "an ideal app", it looks like Google's Picasa (free app) will be the easiest to use, and is available on both Mac and PC.