Squarespace doesn't enforce strict pixel limits — it will accept almost anything — but the difference between a sharp, fast-loading site and a blurry, slow one comes down to what you upload. The working rule: 2500 px wide for full-width sections, 1500 px for everything else, and under 500KB per file. Squarespace does not compress your files down; you do that before uploading.
| Section type | Recommended size | Aspect ratio | Max file size |
|---|---|---|---|
| Hero / banner | 2500 × 1406 px | 16:9 | 500KB |
| Full-width background | 2500 × 1667 px | 3:2 | 500KB |
| Gallery image | 1500 × 1000 px | 3:2 | 300KB |
| Product image | 1500 × 1500 px | 1:1 | 300KB |
| Blog post thumbnail | 1500 × 1000 px | 3:2 | 200KB |
| Logo | 250 × 100 px | Varies | 100KB — use PNG |
| Favicon | 100 × 100 px | 1:1 | PNG |
| Social sharing image (og:image) | 1200 × 630 px | 1.91:1 | 300KB |
The focal point setting — don't skip it
Squarespace crops images differently at different screen widths. A hero image at 2500×1406 px will be displayed differently on a 1920 px desktop, a 768 px tablet, and a 375 px phone — typically by cropping the sides on mobile. If the most important part of your image is off-centre, it will disappear on mobile.
After uploading an image to a banner or background section, click the image, then click Focal Point. Drag the crosshair to the most important part of the image — a face, a product, a headline. Squarespace will keep that point visible regardless of how it crops the image for different viewports. Most users skip this step and then wonder why their hero image looks strange on mobile.
Product images: keep all photos the same ratio
Squarespace product galleries display images in a grid. If you upload a mix of portrait (2:3), square (1:1), and landscape (3:2) images, Squarespace either crops them all to a common ratio or leaves inconsistent whitespace. Both outcomes look unprofessional.
Pick one ratio before you start a product — square (1:1) is the safest because it works in every Squarespace commerce template — and apply it consistently to every image in that listing. If your existing product photos have different ratios, resize them to a common pixel dimension before upload rather than letting Squarespace crop unpredictably.
Squarespace image sizes and page speed
Squarespace uses a CDN and serves responsive image variants — so a 2500 px image is not delivered at full size to a mobile phone. However, the original file you upload still determines the starting quality. Two things help page speed most:
- Compress before uploading. A 2500×1406 px hero image at good JPEG quality runs around 400–600KB. Much larger than that slows the initial Largest Contentful Paint (LCP) score, which affects Google search rankings. If your hero image is over 1MB, compress it to under 500KB while keeping the pixel dimensions unchanged.
- Use WebP where you control the format. Squarespace's CDN may or may not convert your JPEG to WebP depending on browser support — it varies by plan and version. Uploading WebP directly means a smaller source file regardless.
Blog thumbnail size and the og:image connection
The image you set as a blog post's thumbnail in Squarespace doubles as the og:image sent when the post is shared on social media. That means the same image needs to work at two very different sizes: as a small grid thumbnail (roughly 300×200 px displayed) and as a social card (displayed at 1200×630 or similar).
The practical approach: set the thumbnail image at 1200×630 px (landscape) so it looks good in social sharing, and then set the focal point so the important part is visible at thumbnail size too. This is better than optimising for the thumbnail and getting a poorly cropped social card.
Frequently asked questions
What is the recommended image size for Squarespace?
2500 px on the longest edge for full-width sections; 1500 px wide for galleries, products, and blog thumbnails. Keep files under 500KB. Squarespace does not reduce file size on upload — compression before uploading is your responsibility.
What size should Squarespace product images be?
Square format (1:1), 1500×1500 px minimum, under 300KB. All images in a product listing should share the same ratio, or grid display will be inconsistent.
Does Squarespace compress images automatically?
Squarespace delivers responsive size variants through its CDN, but the source file is not compressed below its uploaded size. Compress images before uploading — target under 500KB for hero images and under 200KB for thumbnails.
What aspect ratio should Squarespace hero images be?
16:9 (2500×1406 px) works across most templates. Use the focal point tool to keep the important part of the image visible when Squarespace crops it for mobile viewports.
Why are my Squarespace images blurry?
Either the source image is too small (under 1000 px wide) and is being upscaled, or it was over-compressed before upload. Upload at 1500–2500 px wide and keep quality high. A blurry source will remain blurry at any size — resizing doesn't add missing detail.