Squarespace Image Size: Complete Guide for 7.1 Sites

Squarespace recommends uploading images between 1500 and 2500 pixels wide for full-width sections. That's the single most useful number on this page — everything else is optimization from there.

Squarespace 7.1 uses a responsive image system that generates multiple sizes automatically via srcset. Upload once at the right resolution, and Squarespace handles the rest. But upload a 400px wide hero image and no amount of responsive magic will fix the blur on a 27-inch monitor.

Squarespace Image Sizes at a Glance

Upload at the recommended dimensions and these file size targets become achievable with normal compression. If you're regularly exceeding them, the problem is usually an unoptimized source file — not the dimensions.

How Squarespace 7.1 Handles Images

The Responsive Image System

Squarespace 7.1 generates multiple versions of every image you upload using srcset. When a visitor loads your page, their browser receives a list of available sizes and picks the most appropriate one based on screen width and pixel density. You never control which size is served — Squarespace does that automatically.

The generated sizes (approximate) are:

This is why 2500 px wide is the practical maximum you'll ever need to upload. Uploading a 5000 px image does not improve quality — Squarespace caps its generated versions at 2500 px anyway. You're just making the original file larger for no gain.

Retina Display Handling

A retina screen (like a MacBook Pro or modern iPhone) has a device pixel ratio (DPR) of 2×. To display a sharp 1200 px wide image on a retina screen, the browser needs a 2400 px source image. Squarespace's srcset serves the 2500 px version to retina screens automatically — which is why uploading at 2500 px matters even though most CSS layouts are narrower.

If you upload a hero image at only 1000 px wide, retina visitors get a blurry, upscaled version. That's the whole problem this guide exists to prevent.

Dimensions by Section Type

Banner and Hero Images

The banner block is the full-width section typically at the top of a page or section divider. Squarespace crops these responsively, which means the visible portion shifts depending on screen size and the focal point you set.

Recommended dimensions:

• Width: 2500 px (covers retina displays without upscaling)
• Height: 1250–1600 px (taller source = more flexibility for crop)
• Minimum safe height: 750 px (below this, short screens may see stretch artifacts)

The aspect ratio for banners is not fixed — Squarespace crops to fit the container height you set in the editor. Upload a taller image than you think you need, then use the focal point tool to control what stays in frame.

File size target: Under 500 KB for single-page banners; under 600 KB for homepage heroes where first-impression quality justifies a bit more.

Blog Post Featured Images

Featured images appear in three places on a Squarespace blog: the post detail page header, the blog index/listing page, and the Open Graph preview when shared on social media.

Because the featured image serves all three contexts from one file, upload at 1500 × 1000 px (3:2 ratio). That gives you sharp post headers and a good crop window for the OG image.

Gallery Images

Squarespace gallery blocks come in several layouts — grid, masonry, slideshow, and carousel. Each crops images differently.

For galleries where lightbox is enabled — any click-to-enlarge gallery — upload at the highest quality you have. Visitors who open a lightbox are specifically requesting full-resolution detail.

Product Images

Squarespace Commerce auto-generates product thumbnails, but the quality of those thumbnails is only as good as the original upload.

Recommended size: 1500 × 1500 px (square, 1:1)

Squarespace displays product images at up to 1000 px on the product detail page. On retina displays that becomes 2000 px — so a 1500 px source will still be slightly upscaled. Upload at 2000 × 2000 px if you have the source quality to support it.

Keep product images consistent in aspect ratio across your catalog. A mix of square and portrait images in the product grid looks unfinished.

Logo

The Squarespace header logo displays at the size specified in Design → Site Styles → Header → Logo Width. The default logo area is narrow, and most logos display between 100–250 px wide.

Recommended upload size: 400 × 100 px for a horizontal logo. Double the display size to stay sharp on retina.

For square or stacked logos, 200 × 200 px works well. Squarespace scales the logo down to fit the header — you're setting the upper quality ceiling, not forcing a display size.

Format: Use PNG with a transparent background for logos that need to sit on colored headers. SVG is not directly supported as a logo file in Squarespace 7.1.

Favicon

Squarespace accepts favicons via Design → Browser Icon. Upload a square image — Squarespace scales it to the required sizes.

Recommended: 100 × 100 px minimum, 300 × 300 px preferred

Modern browsers use the favicon at multiple sizes: 16×16, 32×32, 180×180 (Apple touch icon). Uploading at 300 px gives Squarespace enough resolution to generate all of them without blurring. Use PNG with a transparent background.

File Format Recommendations

Squarespace 7.1 supports JPEG, PNG, GIF, SVG (in content blocks, not as logos), and WebP. Choose based on content type:

Squarespace 7.1 supports WebP both for upload and for its own image CDN delivery. If you're preparing images specifically for Squarespace, WebP is the best general-purpose choice. For JPEG sources shot on a camera, WebP conversion typically saves 25–35% file size with no visible quality loss.

For more detail on format trade-offs, see the JPG vs PNG comparison and best image format for web guide.

File Size Limits and Practical Targets

Squarespace's hard upload limit is 20 MB per image. That limit is so high that hitting it means something has gone wrong in your workflow. A 20 MB JPEG is an unprocessed raw export from a DSLR — it has no place on a website.

Practical targets by section:

These are the targets that keep your Google PageSpeed score above 90 on mobile. If you're over these limits, compress the image to your target size before uploading.

The Squarespace Focal Point Tool

When an image is used in a banner, header, or gallery with a fixed container, Squarespace crops the image to fit. By default, it centers the crop. That works fine for landscapes but is a disaster for portraits — faces end up cropped out.

The focal point tool pins a specific region of the image to always stay in frame. Find it by clicking an image in the editor, then selecting Focal Point from the image settings panel.

Set focal points on:

• Any banner or hero image with a subject (person, product, key visual element)
• Blog featured images where the composition matters in thumbnails
• Gallery images where cropping unpredictably would damage the visual

This is one of the most underused settings in Squarespace — and one of the most visible quality differences between a polished site and a default one.

Image Optimization Workflow for Squarespace

The sequence that prevents quality and performance problems:

1. Start with the full-resolution source. Never resize a file that's already been compressed — you're compressing compression artifacts.
2. Resize to the target dimensions. Use Pixotter's image resizer to hit the exact pixel dimensions for your section type.
3. Compress to the file size target. Compress the resized image to hit the file size targets above. For photos, aim for 70–80% quality in JPEG, or equivalent WebP.
4. Check format. Convert to WebP if the source is JPEG and file size matters. Keep PNG for graphics with transparency.
5. Upload to Squarespace. Name files descriptively before upload — Squarespace uses the filename as the image URL, and keyword-rich filenames help image SEO.
6. Set the focal point for any banner or cropped-container image.
7. Add alt text in the Squarespace image settings. Every image needs a description — both for accessibility and for image SEO.

For converting between formats before upload, Pixotter's format converter handles all of the formats Squarespace supports.

Squarespace-Specific Tips

Image loader behavior. Squarespace 7.1 lazy-loads images below the fold by default. This means visitors don't wait for off-screen images to load before the page becomes interactive. Your above-the-fold hero image, however, loads immediately — it's the image most likely to affect your Core Web Vitals LCP score. Prioritize getting that hero under 400 KB.

Page speed and image weight. Squarespace hosts images on a CDN (Fastly) and serves them from the edge, which helps with latency. The file size you upload is the size Squarespace stores and initially delivers, not a recompressed version. There is no automatic compression applied during upload. What you upload is what visitors get.

Consistent image ratios in blog index. The Squarespace blog index uses your featured images in a grid or list. If you use a mix of portrait (2:3), landscape (3:2), and square (1:1) featured images, the grid looks inconsistent. Pick one ratio for your blog featured images and stick with it across all posts.

Background image sharpness. Background images (set via section background settings, not placed in a content block) are handled differently than foreground images. Squarespace stretches them to fill the section, which means a too-small background image will noticeably blur on desktop. Use 2500 px wide for any background image. No exceptions.

Video covers. If using a video background in a banner section, the cover image (shown while the video loads or on mobile where autoplay is blocked) should follow the same banner dimensions — 2500 × 1250 px.

For context on how Squarespace image handling compares to other platforms, see the Shopify image size guide and the general website image size reference.

FAQ

What is the maximum image size for Squarespace? The hard upload limit is 20 MB per image. In practice, you should never be anywhere near this limit — a properly optimized 2500 × 1600 px hero image should land under 600 KB. If you're uploading files above 5 MB, compress them first.

What resolution should Squarespace images be? For web display, resolution (DPI/PPI) is irrelevant — only pixel dimensions matter. A 72 DPI and a 300 DPI image with the same pixel dimensions are identical on screen. Focus on pixel dimensions, not DPI. See the DPI vs PPI explanation if you want the full picture.

Does Squarespace support WebP? Yes. Squarespace 7.1 accepts WebP uploads and its CDN delivers WebP to browsers that support it (which is all modern browsers). Uploading WebP directly is the most efficient approach for photographic images.

Why do my Squarespace images look blurry? Three likely causes: (1) you uploaded an image smaller than the display container — the browser is upscaling it; (2) you're on a retina display and the image is sized for 1× screens; (3) the image was compressed too aggressively before upload. Fix: resize the image to 2500 px wide and re-upload.

What size should my Squarespace blog images be? Featured images: 1500 × 1000 px (3:2 ratio). In-post images: match the container width (typically 800–1200 px for standard content blocks). Infographics and wide content: up to 2500 px.

Does Squarespace compress images on upload? No. Squarespace does not apply compression to images when you upload them. The file you upload is the file your visitors receive. This makes pre-upload optimization your responsibility — and makes the file size targets above even more important.

How do I add alt text in Squarespace? Click any image in the editor, select the image settings (pencil icon or click the image to reveal options), and find the "Alt Text" field. Fill it in for every image. Alt text is read by screen readers for accessibility, and it helps search engines understand what the image contains.

What's the ideal Squarespace logo size? 400 × 100 px for horizontal logos, uploaded as a PNG with transparent background. The actual display size is controlled by the Logo Width slider in your site styles. Uploading at 400 px gives you headroom so the logo stays sharp at any display size your theme allows.