Picovert

How to Compress Images for Squarespace: Size & Format Guide

By Picovert Team2026-03-305 min read

Squarespace is a popular website builder trusted by photographers, creatives, and small businesses — and images are central to every Squarespace site. But unoptimized images are one of the biggest causes of slow Squarespace pages. This guide explains exactly what image sizes and formats Squarespace recommends, and how to optimize your images before uploading to get the best performance and visual quality.

Squarespace Image Size Recommendations

Squarespace's official guidelines recommend the following:

  • Maximum width: 2500 px for most images. This covers full-width banner sections on most desktop screens.
  • File size: Under 500 KB per image. Squarespace compresses images automatically, but uploading smaller files gives you better control over final quality.
  • Format: JPEG for photographs, PNG for graphics and logos with transparency, WebP is also accepted.
  • Maximum file size accepted: 20 MB per image. Above this, Squarespace will reject the upload.

Why Image Optimization Matters for Squarespace

Squarespace applies automatic image compression and serves images via a CDN, which helps. But it is not a substitute for proper pre-upload optimization for several reasons:

  • Squarespace's auto-compression is unpredictable: The platform may serve your image at different quality levels depending on the visitor's device and connection speed. When you upload a pre-optimized image, the output quality is more consistent.
  • Page speed affects SEO: Google uses Core Web Vitals (including Largest Contentful Paint, which is often a hero image) as a ranking signal. A Squarespace site with 5 MB hero images will be penalized in search rankings regardless of Squarespace's CDN.
  • Squarespace's editor can be slow with large images: Uploading 8 MB photos to the Squarespace editor can make the editing experience sluggish, especially on slower internet connections.

Recommended Image Sizes for Different Squarespace Sections

Different page sections have different optimal image dimensions:

  • Full-width banner images: 2500 x 1400 px. At this size, the image covers even ultra-wide desktop screens while keeping file size manageable.
  • Gallery images: 1500 x 1000 px or 1200 x 800 px. Gallery images are displayed in grids at reduced sizes, so very high resolution is wasted.
  • Blog post images: 1500 x 844 px (16:9 ratio). Blog posts on Squarespace display images at a maximum width of around 800–1200 px depending on template.
  • Product images (Squarespace Commerce): 1500 x 1500 px (square). Product images are displayed at 1:1 ratio in product grids.
  • Logo: 250 x 100 px at 2x resolution (500 x 200 px for retina display). PNG with transparency is best for logos.
  • Favicon: 100 x 100 px PNG.

Best Formats for Squarespace

  • JPEG: Best for photographs, backgrounds, and images with many gradient colors. A well-compressed JPEG at quality 85 is nearly indistinguishable from the original at typical screen sizes.
  • PNG: Best for logos, icons, graphics with text, and any image requiring transparency. Use when you need pixel-perfect sharpness for interface elements.
  • WebP: Squarespace's CDN serves WebP to browsers that support it automatically for uploaded JPEGs and PNGs. You can also upload WebP directly for additional size savings — WebP files are typically 25–35% smaller than equivalent JPEG.
  • GIF: Supported but avoid for large animations — GIFs are large. Use MP4 or WebP animations where possible.

Step-by-Step Image Optimization Workflow

  • Step 1 — Resize to target dimensions: If your photo is 6000 px wide from a camera, resize it to 2500 px using Picovert's image resizer before any compression. Reducing resolution dramatically cuts file size even before quality adjustments.
  • Step 2 — Compress: Run the resized image through the image compressor. For Squarespace photos, quality 80–85 typically brings images to the recommended sub-500 KB range while looking indistinguishable from the original on screen.
  • Step 3 — Convert format if needed: If you have HEIC photos from an iPhone, convert them to JPEG or WebP before uploading. Squarespace can handle HEIC but the conversion at upload time is less predictable.
  • Step 4 — Upload and use descriptive filenames: Rename your images to include keywords before uploading (e.g., handmade-ceramic-bowl.jpginstead of IMG_4823.jpg). Squarespace uses the filename as the alt text by default, which helps SEO.

Quick Optimization Targets

  • Banner images: 2500 x 1400 px, under 300 KB (JPEG quality 80)
  • Gallery images: 1200 x 800 px, under 200 KB
  • Blog images: 1500 x 844 px, under 200 KB
  • Product images: 1500 x 1500 px, under 300 KB
  • Logos: 500 x 200 px, PNG, under 50 KB

Optimizing images before uploading to Squarespace is one of the highest-impact improvements you can make to your site's loading speed. Start with Picovert's free image compressor — it processes images in your browser with no uploads to external servers, which means your photos stay private throughout the optimization process.