Squarespace Image Sizes: Every Page Type and Block

Per-block image dimensions for Squarespace 7.1 — banners, gallery blocks, product images, blog headers, image blocks — plus how Squarespace's automatic resizing actually works and what that means for what you should upload.

Want to check the exact image sizes your Squarespace site is serving?

Run a free scan →

Looking for sizes for other platforms? See our full image size reference.

Quick Answer

Upload images at 2500 pixels on the longest side, JPG quality 80, under 500 KB after compression. Squarespace automatically generates seven smaller variants and serves the right one for each viewport. You don't need to upload multiple sizes — the platform handles resizing for you.

That single rule covers 80% of Squarespace image work. The rest of this guide covers specific block types where the rule deviates and the Pixel Geometry mechanics behind why Squarespace works this way.

Recommended Sizes by Block Type

Block TypeUpload SizeAspect RatioNotes
Banner / cover2500×15005:3Use focal point editor for mobile crop
Image block (full-width)2500×16673:2Most common content image
Image block (inline)1500×10003:2 or freeUsed inside text columns
Gallery block1500×15001:1Squarespace enforces consistent ratio
Product image2000×20001:1Square required for product grid
Blog post thumbnail1500×10003:2Used in blog index + summary blocks
Blog header2500×16673:2Becomes the og:image automatically
Logo1000×400~5:2 or freeUse SVG if available; PNG with transparency otherwise
Favicon300×3001:1Squarespace generates the actual favicon variants

How Squarespace Serves Images

Squarespace 7.1 uses a system called Pixel Geometry. When you upload an image, Squarespace stores the original and automatically generates resized variants at seven preset widths: 100, 300, 500, 750, 1000, 1500, and 2500 pixels. Image URLs include a format parameter that specifies which width to serve:

https://images.squarespace-cdn.com/.../my-image.jpg?format=750w
https://images.squarespace-cdn.com/.../my-image.jpg?format=1500w
https://images.squarespace-cdn.com/.../my-image.jpg?format=2500w

The browser receives a srcset attribute listing all available variants and picks the smallest one that still satisfies the rendered slot at the device's pixel density. On a 1440-pixel-wide retina laptop, the browser requests the 2500w variant. On a 375-pixel iPhone, it requests the 750w variant. You upload once; the platform handles multi-density delivery.

The implication: upload size matters less than upload quality. A 2500-pixel image at JPG quality 80 and 400 KB is ideal. A 5000-pixel image at JPG quality 95 and 4 MB gets resized down by Squarespace, but the wasted upload bandwidth and storage are real, and the original 5000-pixel variant is never served to anyone.

Banners and the Focal Point Editor

Squarespace banners are rendered as CSS background images. They scale to fill the viewport, which means parts of the image will be cropped — the question is which parts. That's what the focal point editor controls.

In the image editor, drag the focal-point indicator (a small circle) to the most important part of the image — usually a face, a product, or a key visual element. Squarespace pins that point to the visible center of the banner and crops outward, so the focal subject stays in frame at every viewport size.

Common mistake: setting the focal point for the desktop view, then forgetting to check mobile. On a portrait phone screen, a 5:3 banner becomes much narrower — if your focal point is in the center but the subject is offset, mobile may crop the subject out entirely. Preview the banner on mobile in the Squarespace editor before publishing.

Product Images

Squarespace Commerce expects product images at a consistent aspect ratio. The default templates assume 1:1 (square), and mixing in 4:3 or 3:2 product photos creates visible inconsistency in the product grid — some cards taller than others, awkward gaps, uneven thumbnails.

Recommendation: 2000×2000 pixels, square, JPG quality 85. The grid view downscales to roughly 750 pixels, the product detail page renders at roughly 1500 pixels, and the zoom feature shows the full 2000 pixels. Going larger than 2000 wastes file weight; going smaller risks blur in zoom view.

Multi-image products work the same way — every variant should be the same aspect ratio and similar dimensions, or the carousel jumps in size as the visitor cycles through.

Gallery Blocks

Squarespace gallery blocks (grid, slideshow, stack, carousel) all benefit from consistent aspect ratios across the contained images. The grid layout in particular looks broken when images are mixed orientation.

For grid galleries: 1500×1500 (1:1) is the safest default — square images grid cleanly at every breakpoint. For slideshow galleries: 2500×1500 (5:3) matches the banner convention. For stack and carousel galleries: free aspect ratio is fine, but keep individual images at similar dimensions so the page doesn't reflow as visitors scroll.

Blog Headers and og:image

Squarespace automatically uses your blog post's thumbnail or featured image as the Open Graph image for social shares. That means a blog header serves two purposes — it appears at the top of the post and as the preview card on Facebook, LinkedIn, Twitter, and Slack.

The double-duty constraint: Open Graph wants 1200×630 (1.91:1) for clean social cards. Squarespace post headers display closer to 3:2 or 16:9. The compromise that works for both:

  • 2500×1667 (3:2) — renders cleanly as a post header, crops to a workable og:image with the focal point centered. Squarespace serves the 1500w variant to social platforms, which crop it to 1.91:1 around the focal point.
  • Important text near the edges gets cropped on social. Keep titles and key elements within the central 60% of the image.

For a deeper treatment, see our Open Graph image size guide.

See exactly which Pixel Geometry variants your Squarespace site is serving.

Scan a URL →

Common Mistakes

  • Uploading at maximum dimensions without compression. A 6000-pixel, 8 MB JPG straight from a DSLR will be resized by Squarespace, but the original upload still chews bandwidth and the platform's automatic compression is mild. Compress before uploading.
  • Inconsistent product aspect ratios. Mixing 1:1, 3:2, and 4:3 product photos across the same store creates a visibly broken grid. Pick one ratio and crop all products to match before upload.
  • Forgetting the focal point on banners. The default focal point is dead center. If your banner has a subject offset to the right or top, mobile users will see a cropped or empty version of the banner. Always set the focal point.
  • Using PNGs for photographs. Squarespace serves PNGs at full size to every browser regardless of need, and PNG is wildly inefficient for photos. Use JPG for photos; reserve PNG for logos with transparency and graphics with sharp edges.
  • Skipping alt text. Squarespace pulls alt text from the file caption field, not from a separate accessibility input. Set the caption — it becomes both the visible caption (if shown) and the alt attribute on the rendered image.
  • Editing after upload. Squarespace's built-in image editor re-encodes when you crop or adjust, which loses quality compared to editing the source and re-uploading. Crop and color-correct in your image editor before upload.

Tools That Help

Squarespace has no native image-optimization plugin ecosystem like WordPress — you don't install extensions, the platform handles resizing automatically. The high leverage move on Squarespace is compressing source images before upload, so the smallest variant Squarespace generates is also the cleanest.

Affiliate disclosure: Some links below are affiliate links. If you sign up for a paid plan we may earn a commission at no extra cost to you. We only recommend tools we have evaluated. Full disclosure.

ShortPixel

Web-based bulk compressor that handles JPG, PNG, and WebP. Drop a folder of images, pick a quality preset, and download the optimized batch ready to upload to Squarespace. The standalone web tool works without installing anything — useful since Squarespace doesn't support plugins.

Try ShortPixel

Bunny.net

For Squarespace sites with heavy image traffic where the built-in CDN starts feeling slow internationally. Bunny offers a perimeter image CDN you can layer on top of Squarespace's asset hosting via custom domain configuration. Useful for stores with global customers.

Visit Bunny.net

Frequently Asked Questions

What is the best image size for Squarespace?

Squarespace recommends 1500–2500 pixels wide for most images. The platform automatically resizes uploads to seven preset widths (100, 300, 500, 750, 1000, 1500, and 2500 pixels) and serves the smallest one that still fits the rendered slot. Upload at 2500 pixels wide and Squarespace handles every smaller size for you. Going larger than 2500 wastes upload bandwidth without a visible benefit.

What size should a Squarespace banner image be?

2500×1500 pixels (5:3) is the safe upload size for full-width banners. Squarespace serves the banner as a CSS background image and crops it to fit the viewport, so the focal point matters more than exact aspect ratio. Use the focal-point editor in Squarespace to set what should stay visible when the banner crops on smaller screens.

What is Squarespace Pixel Geometry?

Pixel Geometry is the URL-based image-resizing system Squarespace uses to serve different sizes from a single uploaded source. Image URLs end with `?format=750w` or `?format=1500w` — those are Pixel Geometry parameters telling the CDN what width to deliver. You don't generally edit them, but they explain why Squarespace doesn't need a multi-size upload workflow: the platform generates sizes automatically.

Should I compress images before uploading to Squarespace?

Yes. Squarespace resizes images but does not aggressively compress them — a 5 MB JPG uploaded at 2500 pixels wide may still be served as a 1.5 MB file at the rendered size. Compress to about 80% quality before upload using a tool like ShortPixel or TinyIMG. Squarespace 7.1 added on-the-fly WebP delivery for browsers that support it, but starting from a smaller, cleaner source is still measurably faster.

What size should Squarespace product images be?

2000×2000 pixels at 1:1 for clean product grid display. Squarespace product galleries use the uploaded image at multiple sizes — thumbnail (~300px), grid view (~750px), zoom view (full size). Square aspect ratio matters more than exact pixels because Squarespace product templates expect a consistent ratio across products. Mixed aspect ratios create visual chaos in the grid.

What is the maximum image size Squarespace allows?

20 MB per file is Squarespace's upload cap, but the practical ceiling is much lower — 2500 pixels wide and under 500 KB after compression. Files larger than that hurt page load without helping visual quality, since Squarespace will downscale them anyway. Banners can run up to 1 MB if necessary.

Why does my Squarespace image look blurry?

Three usual culprits: the uploaded source was smaller than the rendered slot (Squarespace upscales, which always softens), the focal-point crop is using a low-resolution preset, or the browser is on a retina display and Squarespace served the standard-density variant. Upload at 2500 pixels wide whenever the slot is full-width, and Squarespace will have a high-density variant available when needed.

Related Guides

Last updated: