For most Squarespace images, upload a source about 2500 pixels wide and try to keep the file at 500 KB or less. Squarespace automatically creates responsive versions, so you normally do not need an exact height or a fixed pair such as 750 × 500 pixels. Keep at least 1500 pixels of source width when the image may be displayed large, choose an aspect ratio that suits its container, and check banners and full-bleed sections on both desktop and mobile.
The practical Squarespace image-size rules
| Use case or limit | Recommended value | What it means |
|---|---|---|
| Most images | About 2500 px wide | Provides Squarespace’s full range of responsive variants while keeping uploads manageable. |
| Lower width threshold | 1500 px wide | Images narrower than this may look blurry on larger displays. |
| File-weight target | 500 KB or less | A practical optimization goal, not a technical upload limit. |
| Maximum upload | 20 MB | The platform’s per-image ceiling; files near this size can still hurt page speed. |
| Page-size target | 5 MB or less | Squarespace’s performance guidance for the total page where practical. |
| Responsive widths generated | 100, 300, 500, 750, 1000, 1500 and 2500 px | Squarespace adjusts height to preserve the original shape. |
These figures are Squarespace guidance current in 2026. They describe source preparation, not a required rendered size. The browser and your template determine which responsive variant is shown.
Why there is no single “correct” height
Squarespace resizes an upload for different device widths. A landscape photograph, square product tile and portrait editorial image can all be appropriate if their proportions fit the component that displays them. Instead of forcing every file to identical dimensions, decide the aspect ratio first.
Common ratios
- 3:2 landscape: useful for photographs and many blog layouts.
- 1:1 square: predictable for product or collection grids.
- 2:3 portrait: useful when the subject is vertically oriented.
Gallery and collection grids look more uniform when every image uses the same ratio. The exact crop controls differ by template and site version, so preview the actual block rather than relying on a universal pixel recipe.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsCrop instead of enlarging
When an image has the wrong ratio, crop the shorter side to reach the target rather than enlarging the longer side. For example, a 1500 × 1200 image can be cropped to 1500 × 500 for a 3:1 banner. Enlarging it to obtain a wider canvas reduces sharpness and does not create real detail.
Recommended dimensions by Squarespace layout
Standard content images
Start with a source around 2500 pixels wide. If the image will only appear in a small column, a smaller export may be sufficient, but staying above 1500 pixels avoids the blur Squarespace warns about on large screens. Resize and compress before uploading so the file is close to 500 KB where image quality permits.
#1 Best Overall
Banners and full-bleed sections
For a banner, Squarespace’s version 7.0 instructions recommend a source 1500–2500 pixels wide and wider than tall. Full-bleed guidance uses the same 1500–2500-pixel range. Cropping is unavoidable because the browser’s shape changes between desktop, tablet and phone.
- Put the focal subject toward the center or in an area that survives likely crops.
- Leave safe space near the edges for responsive trimming.
- Use abstract patterns or uncomplicated backgrounds when possible.
- Do not bake important words into the image; add that text as a Squarespace text element so it remains responsive and accessible.
- Check the section at narrow and wide browser widths before publishing.
Background images
Backgrounds are designed to fill a container, so the platform may crop more aggressively than an inline image. If a face, logo or product is being cut off, change the focal-point or image-position control, redesign the crop, or choose a source with more breathing room. A different pixel count alone cannot prevent a responsive crop.
File format, color and preparation
Formats Squarespace accepts
Squarespace accepts JPG, GIF, PNG and WebP images. It converts uploads to WebP by default. Animated WebP and Email Campaigns have stated limitations, so use a format supported by the specific feature you are editing.
Color profile and resolution metadata
Export in RGB with an sRGB profile for consistent browser color. DPI or PPI metadata does not determine web display size; pixel dimensions do. Keep original, full-quality files outside your site so you can make a new crop or export later.
Compression workflow
- Duplicate the original and work from the copy.
- Crop to the aspect ratio required by the block, removing unnecessary edges instead of upscaling.
- Resize the longest side to roughly 2500 pixels for a general-purpose upload, or 1500–2500 pixels for a banner or full-bleed image.
- Export RGB/sRGB as JPG, PNG or WebP according to the image and feature.
- Adjust quality or compression until the file is near 500 KB without visible artifacts.
- Upload, inspect the real page and verify mobile and desktop crops.
Photographs usually compress efficiently as JPG or WebP. PNG is useful when transparency or crisp, limited-color graphics require it, but an unnecessarily large PNG can make an image-heavy page exceed the 5 MB page-size target.
How to choose between two source files
When two versions are available, compare them in this order:
- Largest intended display: is the source at least 1500 pixels wide, and preferably near 2500 pixels for a prominent image?
- Container ratio: which file needs less destructive cropping?
- Weight: which can reach about 500 KB with acceptable quality?
- Focal-point safety: which keeps the subject visible after mobile and desktop crops?
A slightly smaller file with a safer composition is often the better choice than a very large image whose subject sits at an edge.
Rank #3
Fixing blurry, cropped or slow Squarespace images
The image looks blurry
- Check the source width; a file under 1500 pixels may be undersized for a large display.
- Do not enlarge a small original and expect new detail.
- Replace an overly compressed export with a cleaner source, then compress moderately.
- Confirm that the blur is not caused by the template’s display treatment or a browser zoom setting.
The banner crops on mobile
- Expect some crop: responsive banners cannot preserve the same rectangle at every viewport.
- Move the subject toward the safe center or choose a wider composition.
- Remove text embedded in the bitmap and place it in a separate text overlay.
- Preview the section at phone width, then adjust the focal point or source crop.
The background appears distorted
Distortion usually indicates a mismatch between the image’s proportions and the section’s fill behavior. Re-crop the source to a more suitable ratio, use the section’s fit or position controls, and test several viewport widths. Increasing resolution does not correct a ratio mismatch.
The page is slow
- Compress and resize before upload; the 20 MB ceiling is not a performance recommendation.
- Target roughly 500 KB per image where practical.
- Count all images on the page and aim for a total of 5 MB or less.
- Remove duplicate or hidden oversized assets and avoid uploading originals as display files.
- Retain originals separately so future edits do not require downloading a compressed site copy.
Editing inside Squarespace versus preparing files first
Squarespace includes an image editor for cropping and adjustments. Use it for routine changes after upload. If you need a custom ratio that the built-in crop choices do not offer, or you must change the original pixel dimensions, prepare the file in separate editing software and re-upload it. The official guidance does not require a particular third-party application.
Or skip the browser setup
If you need screenshots of your Squarespace pages for QA, documentation or client approvals, ScreenshotNeo can capture the rendered URL with one request. It accepts cookie or consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before the shot; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
See the parameter details in the ScreenshotNeo documentation. A direct cURL request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 shots each month without a card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan, and yearly billing provides two months free. Create a free ScreenshotNeo account to begin.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Does Squarespace require images to be exactly 2500 × 2500 pixels?
No. About 2500 pixels is a source-width recommendation. Squarespace generates responsive widths and preserves the image’s shape, so height and exact pixel pairs depend on the container and chosen aspect ratio.
Is 500 KB a hard Squarespace limit?
No. It is a practical target for faster pages. The documented upload maximum is 20 MB, but files near that ceiling can still make an image-heavy page exceed the suggested 5 MB total page size.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Should I put text inside a banner image?
Avoid important text in the bitmap. Responsive cropping can remove it, and separate Squarespace text remains easier to edit, read and adapt to mobile.
The Bottom Line
Use a roughly 2500-pixel-wide source, keep it near 500 KB, select the ratio that matches its container, and test every prominent image at mobile and desktop widths. Treat 20 MB as an upload ceiling—not a quality target—and keep the whole page near 5 MB where possible.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
