Updated: July 15, 2026
To compress images for Squarespace, resize most large images to no more than 2500 pixels wide, keep them at 500 KB or less when visual quality allows, and upload a supported JPG, PNG, GIF, or WebP file. Squarespace then creates up to seven responsive widths and, by default, displays site images as WebP. For photographs, start with a moderately compressed JPG or WebP; use PNG when transparency or crisp text requires it. After publishing, test the live page in PageSpeed Insights and inspect the LCP element and image-delivery diagnostics before deciding whether another compression pass is necessary.
Key Takeaways
- Resize large images to no more than 2500 px wide; images below about 1500 px may appear blurry in full-width containers.
- Squarespace supports JPG, GIF, PNG, and WebP uploads. The upload limit is 20 MB per image; the official recommendation is 500 KB or less.
- Squarespace creates up to seven responsive widths and displays images as WebP by default — uploading a WebP is helpful but not strictly required.
- Pre-optimize your source file; Squarespace still recommends keeping uploads at 500 KB or less.
- Verify performance on the live page using PageSpeed Insights, and distinguish lab results from real-user field data.
Squarespace Image Requirements: What the Platform Actually Does
Squarespace 7.1 generates up to seven resized widths from each uploaded image and serves the appropriate width for the visitor's screen. These variants maintain the original aspect ratio. Containers — such as banner sections or gallery blocks — may crop the displayed image according to their own aspect ratio settings; the focal point you set in the editor controls which part of the image stays visible during that cropping.
| Requirement | Value | What it means for compression |
|---|---|---|
| Supported upload formats | JPG, GIF, PNG, WebP | Do not upload AVIF or HEIC — they are not listed as supported formats |
| Hard upload limit | 20 MB per image | This is a ceiling, not a performance target — aim well below it |
| Official size recommendation | 500 KB or less | A recommendation, not an upload restriction |
| Recommended maximum width | 2500 px | Wider files rarely add visible quality and increase file weight |
| Risk below 1500 px wide | May appear blurry in full-width containers | Match source width to your largest display context |
| Responsive widths generated | Up to seven: 100, 300, 500, 750, 1000, 1500, 2500 px | Upload one well-sized source; the platform handles the rest |
| Default display format | WebP (can be disabled in site settings) | Squarespace converts to WebP on delivery; pre-converting is optional |
Source: Squarespace Help Center — Formatting images for display on the web
Step 1 — Match the Image Width to Its Largest Display Size
Compression starts with dimensions. A large source file contains many more pixels than your display context needs, so resizing is usually the biggest single reduction in file weight.
A practical starting point by image location:
| Image location | Starting width | Notes |
|---|---|---|
| Full-width banner / hero | Up to 2500 px wide | Check actual rendered container width |
| Standard page image | 1500–2000 px wide | Covers most single-column blocks |
| Blog post featured image | 1500–2000 px wide | Matches typical Squarespace blog layout |
| Product image | 1500–2000 px wide | Preview on mobile to verify cropping |
| Thumbnail / icon | 400–800 px wide | Small containers need small files |
| Logo | 400–800 px wide (PNG) | PNG for transparency; check actual logo block dimensions |
These are starting points. Check the rendered container size in your Squarespace editor and on a real device before finalizing dimensions. For high-density (retina) screens, a source file wider than the CSS pixel width helps maintain sharpness — though staying within the 2500 px guideline is still advisable.
Resize using Photoshop, Affinity Photo, macOS Preview, or a free browser-based tool like Squoosh before applying quality compression.
Step 2 — Choose a Squarespace-Supported Format
Format choice removes bytes before any quality slider is touched.
| Image type | Recommended format | When to check |
|---|---|---|
| Photograph | JPG or WebP | Gradients, skin tones, textures |
| Transparent graphic or logo | PNG or WebP | Alpha edges, hard cutouts |
| Screenshot with text | PNG or high-quality WebP | Text sharpness at 100% zoom |
| Short animation | GIF | File size, frame count, loop length |
Key points:
- JPG — Reliable for photographs. Export at quality 75–85 as a starting point; visually check for banding and artifacts, as the right setting varies by encoder and image.
- WebP — Roughly 25–34% smaller than JPEG at comparable quality in Google's compression study. Squarespace serves images as WebP by default on delivery, so uploading WebP reduces one conversion step, but it is not mandatory.
- PNG — Use when transparency or sharp text edges are essential. PNG of a photograph is often substantially larger than an equivalent JPG or WebP; convert photographic PNGs.
- AVIF — Not listed as a supported Squarespace image upload format. Do not rely on it for Squarespace uploads.
- GIF — Suitable for short loops. For longer animations, add an MP4 through Squarespace's video block rather than uploading it as an image file.
Step 3 — Aim for 500 KB or Less Without Damaging Quality
With dimensions and format decided, compress the file. The official Squarespace recommendation is 500 KB or less when quality allows. For smaller images and simple graphics, a much lower budget is achievable.
Compression tools
| Tool | Type | Common use |
|---|---|---|
| Squoosh | Free, browser-based | One-off WebP or JPG export with side-by-side visual comparison |
| TinyPNG / TinyJPG | Free, browser-based | JPG and PNG reduction |
| ImageOptim (macOS) | Free, desktop app | Batch processing multiple files locally |
| LessMB | Free, browser-based | Adjust output format, quality, and pixel dimensions locally in the browser without uploading to a server; no login required |
If you want a browser-based pre-upload step, the LessMB image compressor lets you adjust output format, quality, and pixel dimensions locally in your browser. Export a Squarespace-supported format, compare the result visually, and confirm the final file size before uploading.
Pre-upload checklist
- Width matches the largest display context (generally no more than 2500 px)
- Format is JPG, PNG, GIF, or WebP (no AVIF or HEIC)
- File size is at 500 KB or less when quality allows
- No visible banding, halos, or softness at 100% zoom
- Metadata stripped if not needed (location, device data)
- Filename is descriptive and uses only letters, numbers, hyphens, or underscores (e.g.,
linen-bedding-hero.webp)
Step 4 — Upload, Set the Focal Point, and Add Alt Text
Once the optimized file is ready:
- Upload it to the image block, gallery, or product image slot.
- Set the focal point so the subject stays centered when Squarespace adjusts the crop for different container aspect ratios and breakpoints.
- Add descriptive alt text for accessibility and image discoverability in search.
- Preview on both desktop and mobile to confirm the crop looks correct.
Squarespace generates up to seven responsive widths from your single source file. You do not need to upload a separate mobile image in most cases, though complex layouts may still require a visual check at smaller breakpoints.
Step 5 — Check the Live Page in PageSpeed Insights
Compression is only confirmed when the live page shows the result. After publishing:
- Open the live URL in an incognito window and copy it.
- Run it through Google PageSpeed Insights.
- Identify the Largest Contentful Paint (LCP) element. If it is an image, check its transfer size and whether it is explicitly flagged in the diagnostics.
- Review the image-delivery diagnostics. Only images that are listed as an opportunity or diagnostic issue need a further compression pass. A passed audit does not require action.
- For a deeper look, use Lighthouse in Chrome DevTools or the WebPageTest waterfall to see each image's weight and load order.
Lab data vs. real-user data: PageSpeed Insights reports both Lighthouse lab data and Chrome User Experience Report (CrUX) field data. The Core Web Vitals "Good" threshold for LCP is 2.5 seconds at the 75th percentile of real user visits, not a single lab measurement. Use lab data to identify issues, but check field data to confirm real-world improvement.
Post-publish verification checklist
- LCP element identified (image or text?)
- LCP image transfer size is reasonable given its display size
- Image flagged as an opportunity or diagnostic? If yes, re-compress and re-upload
- Passed image audits — no action needed
- Visual quality confirmed on mobile and desktop
- CrUX field data checked (if available) for real-user LCP trend
When Image Compression Will Not Fix a Slow Squarespace Page
Image compression addresses image transfer size, which can reduce LCP for image-heavy pages. But LCP is also affected by:
- Time to First Byte (TTFB): Server or CDN response time before any content loads.
- Render-blocking resources: Large CSS or JavaScript that delays initial paint.
- Web fonts: Unoptimized font loading can block text and shift the LCP element.
- Third-party embeds: Analytics, chat widgets, social embeds, and video players can add significant load time.
- Resource discovery: An image used as a CSS background may be discovered later in the loading sequence than an
<img>element.
If PageSpeed Insights points to these factors rather than images, compressing images further will not move the LCP score meaningfully. Use the full diagnostic report to prioritize the largest actual bottleneck.
Common Mistakes That Undo Your Compression
- Uploading the original camera file. Large source files become the base for all responsive variants.
- Over-compressing to chase a smaller number. Lower quality settings increase artifact risk; the exact threshold varies by encoder and image content. Always do a visual check.
- Using PNG for photographs. A photographic PNG is often substantially larger than an equivalent JPG or WebP. Convert photographic PNGs before uploading.
- Ignoring the focal point. Squarespace may crop displayed images based on container aspect ratios. A subject near the edge may be cut off on certain breakpoints.
- Skipping alt text. Descriptive alt attributes support both accessibility and image discoverability.
- Treating one lab test as a Core Web Vitals pass. A good Lighthouse score is a useful signal, but the actual assessment uses real-user field data at the 75th percentile.
FAQ
What is the best image size for Squarespace?
For most large images and full-width sections, Squarespace recommends keeping images no wider than 2500 px and at 500 KB or less when visual quality allows. Images narrower than 1500 px may appear blurry in full-width containers. The 20 MB per-image upload limit is a hard ceiling, not a performance target.
Does Squarespace compress images automatically?
Squarespace creates up to seven responsive widths (100, 300, 500, 750, 1000, 1500, and 2500 px) from your uploaded file and, by default, displays site images as WebP in supporting browsers. It still recommends preparing uploads at 500 KB or less, so pre-optimizing your source file before upload remains a good practice.
Should I use WebP or JPEG on Squarespace?
Both are supported upload formats. For photographs, a well-optimized JPG or WebP works well. Because Squarespace converts and serves images as WebP by default, uploading WebP is an option but not strictly required. Use PNG when you need transparency or crisp text edges.
Why do my Squarespace images look blurry?
Images may appear blurry when the source file is narrower than the display container. Squarespace notes images below about 1500 px wide may look blurry in full-width sections. Upload a source file wide enough for your largest display context, then let Squarespace serve the appropriate responsive width.
How do I check whether images are slowing down my site?
Run the live page through Google PageSpeed Insights and inspect the image-delivery diagnostics. Only images that are explicitly flagged as an opportunity or diagnostic issue need attention. Check the Largest Contentful Paint element; if it is an image, review its transfer size and whether it appears in a supported format.
Can I upload AVIF or HEIC directly to Squarespace?
Squarespace's current supported image upload formats are JPG, GIF, PNG, and WebP. AVIF and HEIC are not listed as supported upload formats. Convert to a supported format before uploading.
Do I need separate desktop and mobile images?
In most cases, no. Squarespace creates up to seven responsive widths from a single source file. However, some layouts may crop the displayed image based on container aspect ratio and focal-point settings, so preview on both mobile and desktop after uploading to confirm the result looks correct.
Next Steps
- Audit your heaviest pages with PageSpeed Insights and list every image flagged in the image-delivery diagnostics.
- For each flagged image, resize to fit the largest display context (generally no wider than 2500 px), export as JPG, WebP, or PNG, and aim for 500 KB or less.
- Re-upload, set the focal point, add alt text, and re-run PageSpeed Insights on the live URL.
- Check CrUX field data over the following weeks to see whether real-user LCP improves.
- Standardize an export preset so every future image ships at the right dimensions and quality from the start.