Squarespace handles a lot of image optimization automatically — Imgix CDN delivery, WebP conversion, and responsive resizing — but you still need to upload images at the right dimensions. Too small and hero images look blurry on retina displays; too large and pages load slowly. This guide covers the exact image sizes for every section of a Squarespace website in 2026.

Squarespace Image Sizes — Quick Reference

Banner / full-bleed hero: 2500×1406 px (16:9), minimum 1500 px wide
Section background images: 2500×1406 px ideal
Gallery images: 1500 px on longest edge
Blog featured image: 1500×844 px (16:9)
In-article images: 1500–1600 px wide (retina display width ~800 px)
Product images (Commerce): 1500×1500 px (1:1 square)
Logo: PNG with transparent background, max 250 px tall
Favicon: 100×100 px or 300×300 px PNG
Max upload size: 20 MB per image
Supported formats: JPG, PNG, GIF, SVG, TIFF, WebP

How Squarespace Handles Images

Understanding what Squarespace does automatically helps you make better upload decisions:

Imgix CDN: All uploaded images are served through Imgix, a professional image CDN. Squarespace automatically resizes and compresses images for each device and screen size — visitors get an optimized version rather than the full-resolution upload.
Automatic WebP conversion: Squarespace 7.1 automatically converts uploaded images to WebP for browsers that support it. You do not need to convert images to WebP before uploading.
Upload the largest version: Because Squarespace scales images down for each device, always upload the highest quality, largest version you have. The CDN will serve the right size — you can't go wrong by uploading too large, but uploading too small causes blurriness on retina and 4K screens.
File size still matters: Despite CDN optimization, a poorly compressed original can still slow things down. Keep originals reasonably compressed before upload.

Banner / Full-Bleed Header Images

The banner or hero image is the large image at the top of a page — often spanning the full browser width. For Squarespace in 2026:

Recommended: 2500×1406 px (16:9) — fills even 4K monitors without upscaling
Minimum: 1500 px wide — anything narrower looks blurry on retina screens
File size target: under 1 MB (resize to 1920 px wide, JPEG q80 before uploading)

On mobile, Squarespace crops banner images from the center. Keep focal content — faces, products, key text — within the center 60% of the image width. Squarespace provides a focal point tool in the editor; use it to control exactly which area stays visible when the image is cropped for smaller screens.

For photographs, use JPEG at quality 85 or WebP. Avoid PNG for large hero photos — it produces unnecessarily large file sizes without any quality benefit for photographic content.

Section Background Images

Section backgrounds follow the same rules as banner images. Squarespace shows the image behind the section's text content:

Ideal size: 2500×1406 px
Visible height: typically 600–900 px depending on section padding and content

Use the focal point tool for every section background — it tells Squarespace which part of the image to keep centered when the section height varies across screen sizes. Background images often appear with an overlay for text contrast; design them with this in mind.

Gallery Images

Squarespace gallery blocks display images in grids and slideshows. For the sharpest results:

Recommended: 1500 px on the longest edge
Consistent ratio: use the same aspect ratio for all images in a gallery — all 4:3 or all 1:1. Mixing ratios causes uneven cropping in grid layouts
Format: JPEG at quality 90 for photography; PNG for design or illustration with sharp edges
File size: under 300 KB per image — galleries load multiple images at once

Use the image resizer to standardize gallery images to a consistent size and ratio before uploading.

Blog Post Images

Blog images in Squarespace serve two distinct roles:

Featured image (thumbnail): 1500×844 px (16:9) — this image appears on the blog listing page, in social sharing previews, and as the post header. The 16:9 ratio ensures it renders correctly in all contexts.
In-article images: The Squarespace blog editor displays images at a max width of about 800 px on most templates, but upload at 1500–1600 px so they appear sharp on retina screens. Target under 300 KB per in-article image for fast page loading.

Use the image resizer to get featured images to exactly 1500×844 px, then compress them to under 300 KB before uploading.

Product Images (Commerce)

Squarespace Commerce product images work best when they are square and consistent across your store:

Recommended: 1500×1500 px (1:1 square)
Background: white or neutral background for the main product shot — creates a clean, professional storefront
Thumbnail cropping: Squarespace crops product images to square in thumbnail views regardless of the original ratio, so uploading square images prevents unexpected cropping
Additional product images: use the same 1:1 ratio for all images in the product gallery for visual consistency
File size target: under 500 KB per product image

Use the resizer to standardize all product images to 1500×1500 px. If your original photos have varied ratios, resize and crop to square before uploading.

Logo

The Squarespace logo appears in the site header and scales depending on the template. Best practices:

Format: PNG with transparent background — ensures the logo looks correct on any header background color or image
Height limit: Squarespace clips logos taller than 250 px in some templates. Keep your logo under 250 px tall to avoid unexpected clipping
Width: varies by template — test at widths between 200–500 px and pick what looks right
SVG: Squarespace supports SVG for logos. SVG scales perfectly at any resolution with no pixelation, making it the best format for logos with fine detail or text
File size: under 100 KB

Never upload a logo as JPEG — JPEG doesn't support transparency, so the logo will have a white or colored rectangle behind it on non-white headers.

Favicon

Recommended: 100×100 px or 300×300 px PNG — Squarespace auto-resizes to 16 and 32 px for browser tabs
ICO format is also supported
Keep the design simple — favicons are displayed very small and fine detail disappears at 16 px. Use the converter if you need to change the format.

File Size Targets Summary

Hero / background: under 1 MB (resize to 1920 px wide, JPEG q80)
Blog featured image: under 300 KB
Product images: under 500 KB
Gallery images: under 300 KB each
Logo: under 100 KB

Step-by-Step: Preparing Images for Squarespace

Identify the image type (hero, product, blog, gallery, etc.) and check the recommended dimensions in the quick reference above.
Use the image resizer to set the exact dimensions. For hero images, resize to 2500×1406 px. For products, resize to 1500×1500 px.
Use the compressor to reduce file size. Target under 1 MB for hero images, under 300 KB for blog and gallery images.
For logos, ensure the file is PNG with transparent background. For photos, save as JPEG at 85% quality or use the converter to switch formats.
Upload to Squarespace and use the focal point tool on every hero and section background image to control mobile cropping.