images

general image formatting

Please familiarize yourself with the Squarespace image formatting guidelines

image blocks and matching aspect ratios

It’s highly recommended that  aspect ratios be made to match across a given set or gallery of images before they are uploaded to Squarespace. It’s even better if the images are the same dimensions, too.

Summary and gallery blocks can crop images of different sizes to a given aspect ratio — 3:4, 16:9, etc. — so that their heights match when they’re displayed at the same width. But, sometimes we need more layout options than the summary and gallery blocks give us. In those situations, we need to use the image block to place images and text manually using the Squarespace layout engine. The image block can be made to crop the image it contains, but there is no simple way to match heights/crops across a bunch of differently-sized images displayed in the same layout. One has to either eyeball it, or rely upon non-Squarespace tools to inspect and match heights in the browser. Achieving a pixel perfect match is unlikely and tedious. However, if a given set of images already share the same aspect ratio, and are displayed at the same width, the image blocks can and usually will *snap* to the same height. This doesn't just save time. When “eyeballing” is kept to a minimum, content appears more polished and professional because it has a consistent vertical rhythm. 

recommended image widths

The best width for a given image will depend on its content and the layout in which its displayed.

content inset width

An image that is 1322 pixels wide will come closest to matching the default width of text content in the main content area of a standard page without the need to manually adjust the width of the image block in the layout. This width is a product of the maximum content width (2000 pixels) and the content inset settings (2 columns) in the Style Editor. Changes to these settings will affect this width. The benefit of matching this width is that layout columns flanking the image block are no longer necessary. The behavior of these flanking columns can cause an image to be narrower than the content above or below it at certain browser widths. Rendering the flanking layout columns unnecessary ensures a more polished layout across all browser widths.

image width maximums

As a general rule, 1500 pixels is the best width for images uploaded to Squarespace. Squarespace will automatically create narrower sizes upon upload and deliver the appropriate size to your visitors. Photos can withstand a little enlargement before quality is obviously degraded, so the minority of your visitors who have very wide monitors will have an adequate experience.

Images that contain text/type and which will potentially be viewed full width in a widescreen view should be capped at 1920 pixels wide. The majority of your visitors will be viewing your site at that width or narrower, so that will ensure that the any type placed in imagery remains crisp for the majority of your visitors. We will have to be on our guard for problems that size might cause for mobile viewers, but I think it’s good to start with a larger source image and resize, if we have to.

Images that contain text/type and which will always be viewed in columns could also be capped at 1500 pixels wide — assuming we don’t change the interior width of our sandbox content which is currently 2000 pixels.

image width ranges

The Layout Tests page demonstrates different layouts and can be used to test how narrow a given image might display before Squarespace invokes the stacked-full-width view for mobile. This is important to know, particularly if there is text that needs to be legible in a broad scope of screen widths.

Images displayed in a two column, full width layout could be displayed at any size from 284-983 pixels wide, depending on the user’s browser width. The vast vast majority of folks are seeing images set in two columns, full width at at least 347 pixels.

Images displayed in a three column, full width layout could be displayed at any size from 177–644 pixels wide, depending on the user’s browser width. The vast vast majority of folks are seeing images set in three columns, full width at at least 220 pixels.

Setting images containing text in columns any tighter than what’s listed above is not recommended. Test test test.

In terms of Root viewership, about 42%  in October 2016 would have seen a single column, stacked layout if they could have viewed this site on their mobile devices. The layout is stacked when viewed on a device that is 640 pixels wide or narrower. In those cases, image widths placed into columnar layouts will be 280-600 pixels wide. (Assuming no devices narrower than 320!)