Formatting Your Images for Display on Squarespace
Basic Image requirements
First let’s get the basics out of the way when it comes to images on Squarespace. Keep these details in mind when working with your files and preparing them for upload.
| Image Attribute | Specification | Note |
|---|---|---|
| File type | Only .jpg, .gif, or .png | .pdf, .psd, .webp, files aren't compatible. |
| File size | 20 MB limit | Optimal size is 600 KB or less for a quickly loading site. |
| File name | Only use letters, numbers, underscores, and hyphens. | Exclude spaces, special characters, and puncuation. |
| Image width | 2500 pixels max (ideal) | Images less than 1500px wide may appear blurry. |
| Resolution | 120 MP (megapixel) limit | Formula: W × H / 1 million |
| Color mode | RGB (red, green, blue) | CMYK color mode is only for printed materials. |
| Color profile | sRGB | Required for digital screens. |
| DPI | n/a | DPI is only for printed materials. |
Image Width Dimensions
When you upload an image for use on your website, Squarespace creates up to seven versions of that image, each with a different width. The height changes relative to the width to preserve the original images aspect ratio (2:3, 4:5, 16:9, etc). Squarespace's built-in responsive design automatically loads the appropriate sized image based on the visitor's screen resolution.
The widths created by Squarespace are: 2500px, 1500px, 1000px, 750px, 500px, 300px, 100px
This is a big deal. That means the resizing of your images for different display sizes is minimized, since Squarespace will ‘swap out’ the image for a smaller/larger size when needed. That built-in feature alone will make a huge difference in the perceived quality of your images on the web.
We can do better. Let’s say you take a photograph and upload it directly into Squarespace and it’s original size is 8064 x 6048 pixels. When the image width is resized from 8064 to 2500, there is a high probability that it will be slightly blurry, or soft. It will work fine, but it will not be optimal.
Instead, take the time to resize your image to 2500px width before you upload. This will match the max width Squarespace makes, which means the system will not need to resize your image at all. Keep it sharp!
Image dimension is only one part of optimization
The real optimization of an image is still up to you. Yes, Squarespace makes and serves up properly sized images, but it does not run any compression upon upload – thank goodness. Squarespace leaves that up to us, which is how it should be. So now that you’ve properly sized your images width, drag it through a compressor like JPEGmini↗ or TinyJPG↗.
Now you’ve optimized your image for Squarespace. You may now upload that image into your gallery and rest assured it’s going to look sharp and load fast.
