Squarespace Image Sizes: Banners, Headers, Social Images and Every Block
Exact image dimensions for Squarespace 7.1 — banner images, the site header and logo, social sharing images (og:image), gallery blocks, product images, blog headers and 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 Type | Upload Size | Aspect Ratio | Notes |
|---|---|---|---|
| Banner / cover | 2500×1500 | 5:3 | Use focal point editor for mobile crop |
| Image block (full-width) | 2500×1667 | 3:2 | Most common content image |
| Image block (inline) | 1500×1000 | 3:2 or free | Used inside text columns |
| Gallery block | 1500×1500 | 1:1 | Squarespace enforces consistent ratio |
| Product image | 2000×2000 | 1:1 | Square required for product grid |
| Blog post thumbnail | 1500×1000 | 3:2 | Used in blog index + summary blocks |
| Blog header | 2500×1667 | 3:2 | Becomes the og:image automatically |
| Social sharing image (og:image) | 1200×630 | 1.91:1 | Settings → Social Sharing Image; per-page thumbnail overrides it |
| Logo | 1000×400 | ~5:2 or free | Use SVG if available; PNG with transparency otherwise |
| Header background | 2500×400 | ~6:1 | Treat like a banner; crops heavily on mobile |
| Favicon | 300×300 | 1:1 | Squarespace 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.
Squarespace Banner Image Size
Upload banner images at 2500×1500 pixels (5:3). That is wide enough to fill the largest desktop viewport at retina density, and Squarespace generates every smaller variant from it. Keep the file under about 1 MB after compression — banners are usually the heaviest image on the page and the first thing a visitor waits for.
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.
Squarespace Header Size (Logo and Header Background)
The Squarespace 7.1 header has no fixed pixel height. It sizes itself from your logo height plus the header padding set in the style editor — in practice most sites land somewhere between about 60 and 160 pixels tall. So "header size" is really two separate questions: the logo, and the header background.
| Header element | Upload size | Notes |
|---|---|---|
| Logo (horizontal) | 1000–1500 px wide | SVG if you have it; otherwise PNG with transparency |
| Logo (square/stacked) | 800×800 | Displays small — check legibility at ~60 px |
| Header background image | 2500×400 | Treat like a banner; expect heavy cropping on mobile |
| Mobile logo | same file | Squarespace scales it; set a smaller mobile logo height in the style editor |
The rule that matters: upload the logo at roughly twice its largest display height. If your logo renders 80 pixels tall, a 160-pixel-tall source keeps it crisp on retina screens. Squarespace scales down cleanly but never adds detail that wasn't in the upload, which is why small logo files look soft on modern displays.
A vector SVG sidesteps the problem entirely — it stays sharp at any header height and is usually a smaller file than the PNG equivalent. If your logo is a wordmark or simple mark, ask your designer for the SVG.
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.
Squarespace Social Sharing Image Size (og:image)
Design social sharing images at 1200×630 pixels (1.91:1). That is the Open Graph standard every major platform expects. Squarespace gives you two places to set it: a site-wide fallback under Settings → Social Sharing Image, and a per-page or per-post thumbnail that overrides it.
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.
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 ShortPixelBunny.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.netFrequently 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 size should a Squarespace header be?
The Squarespace 7.1 header has no fixed pixel size — its height is driven by your logo height plus the header padding you set in the style editor, typically landing between about 60 and 160 pixels tall. What you control is the logo: upload it around 1000–1500 pixels wide so it stays sharp on retina screens, since Squarespace scales it down to the display height you choose. Use SVG when you have it, or PNG with a transparent background. If you use a header background image rather than a solid colour, treat it like a banner and upload at 2500 pixels wide.
What size is the Squarespace social sharing image?
1200×630 pixels (1.91:1) is the size to design for — that is the Open Graph standard Facebook, LinkedIn, X and Slack all expect. In Squarespace you can set a site-wide fallback under Settings → Social Sharing Image, and individual pages and blog posts override it with their own thumbnail. Because the same image gets cropped differently per platform, keep logos and text well inside the middle of the frame rather than near the edges.
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
- Best image sizes for websites in 2026 — full reference covering hero, blog, social, and more.
- WordPress featured image size — comparing the WP equivalent if you're evaluating platforms.
- Shopify image sizes: complete guide — Shopify equivalent if you sell products.
- Wix image sizes — the other major hosted builder, if you're comparing platforms.
- Hero image size — generic hero/banner reference, useful since Squarespace banners are CSS-driven.
- Open Graph image size — Squarespace blog headers double as og:image; this covers the social-share side.
- Find oversized images on your website — audit workflow for catching uploads that bypassed your compression workflow.
Last updated: