Squarespace Image Optimization: Sizes, Compression & Speed Tips
Squarespace handles image processing differently from most website builders. Every image you upload passes through an automatic compression pipeline that generates seven responsive sizes and applies quality-75 JPG encoding. This means your upload strategy matters more on Squarespace than on platforms where you control the output. Upload too large, and you waste bandwidth while the platform downscales anyway. Upload too small, and Squarespace upscales the image, producing visible softness on high-resolution screens.
What Image Sizes Does Squarespace Need?
With Squarespace, uploads up to 20MB are accepted, but the internal rendering targets specific dimensions depending on how each image is used. Uploading images that match these dimensions gives Squarespace the best starting point for responsive size generation. According to Squarespace's image formatting documentation, the recommended range is 1500 to 2500 pixels wide for most use cases.
| Image Type | Dimensions | Max File Size | Format |
|---|---|---|---|
| Product (main) | 1500 x 1500 px | 300 KB | JPG, WebP |
| Banner / Hero | 2500 x 1500 px | 500 KB | JPG, WebP |
| Gallery | 1500 x 1000 px | 250 KB | JPG, WebP |
| Thumbnail | 300 x 300 px | 30 KB | JPG, WebP |
| Logo | 400 x 200 px | 50 KB | PNG, SVG |
Squarespace supports JPG, PNG, GIF, WebP, and AVIF uploads. For photographs and product images, JPG or WebP produces the smallest files. Reserve PNG for logos and graphics that require transparency. AVIF support is newer on Squarespace and delivers 20-30% smaller files than WebP at similar quality -- see our AVIF vs WebP comparison for detailed benchmarks.
Common Squarespace Image Problems
Double Compression Blur
The most frequent Squarespace image complaint is blurry product photos. This happens because Squarespace applies quality-75 compression to every upload. If you already compressed an image to quality 70 or 80 before uploading, the platform compresses it again, stacking two rounds of lossy encoding. The result is visible softness, especially in fine textures and text. The fix: upload images compressed at quality 85-90, giving Squarespace room to apply its own compression without degrading the output. For related troubleshooting on other platforms, see our guide to fixing blurry images on Shopify.
Banner Gradient Artifacts
Full-width banner sections on Squarespace require images at least 2500 pixels wide. Banners with smooth color gradients -- common in lifestyle and fashion photography -- show visible banding and block artifacts after Squarespace compression. JPG encoding struggles with gradients at quality 75. For gradient-heavy banners, upload as PNG (which Squarespace will convert to JPG but at higher internal quality) or use WebP, which handles gradients with fewer artifacts at equivalent file sizes.
Gallery Spacing Issues with Mixed Aspect Ratios
Squarespace gallery blocks arrange images in a grid and expect uniform aspect ratios within each gallery. Mixing portrait, landscape, and square images in a single gallery creates uneven spacing, gaps, and inconsistent row heights. Crop all images for a given gallery to the same aspect ratio before uploading. For product galleries, 1:1 square (1500x1500) works best. For portfolio galleries, 3:2 landscape (1500x1000) produces a clean grid.
Page Speed Drops from Oversized Uploads
Uploading images at 4000+ pixels wide is a common mistake on Squarespace. While the platform generates smaller responsive variants, it still stores and initially processes the full-size original. Google's Core Web Vitals framework penalizes pages where the Largest Contentful Paint exceeds 2.5 seconds, and oversized hero images are a primary cause of slow LCP scores. Resize images to the target dimensions in the table above before uploading.
Image Prep for Faster Page Loads
- Resize images to Squarespace target dimensions. Resize product images to 1500x1500 pixels, banners to 2500x1500, gallery images to 1500x1000, and thumbnails to 300x300. These sizes match Squarespace's responsive rendering pipeline and prevent the platform from upscaling small uploads.
- Compress images before uploading. Run all images through an image compression tool before uploading to Squarespace. Because Squarespace applies its own quality-75 compression on top of whatever you upload, starting with a clean high-quality compressed file produces better results than uploading an uncompressed original.
- Set focal points on cropped images. After uploading each image, open the image editor and set the focal point to the most important area of the photo. Squarespace crops images differently per template and screen size, and the focal point determines which part stays visible in every crop variation.
- Test across templates before publishing. Preview your pages on mobile, tablet, and desktop before publishing. Squarespace templates crop banners and gallery images at different aspect ratios, and a layout that looks correct on desktop can clip product details on mobile devices.
Template Switching and Image Crops
Switching Squarespace templates changes how every image on your site is cropped and displayed. A banner that fills the full viewport width on one template may appear as a narrow strip on another. Product grids shift between 2-column, 3-column, and 4-column layouts depending on the template, and each column width triggers a different responsive image variant from the srcset.
Before switching templates, document the dimensions of all key images on your current site. After applying the new template, review every page and re-upload or re-crop images where the new layout distorts your content. Pay special attention to focal point settings, which reset to center when you replace an image in the asset library.
Frequently Asked Questions
What image size should I use for Squarespace products?
Upload product images at 1500x1500 pixels for Squarespace. This resolution gives the platform enough data to generate sharp responsive variants across all device sizes without producing unnecessarily large files. For banners, use 2500x1500 pixels to fill full-width sections without upscaling. Keep product image files under 300KB after compression for fast page loads.
Why are my Squarespace images blurry after uploading?
Squarespace applies automatic compression at approximately quality 75 to every uploaded image. If you compress images before uploading, the platform compresses them a second time, which causes visible blur and softness. To avoid this, upload high-quality compressed files at the correct dimensions rather than heavily pre-compressed images. A lightly compressed 1500x1500 product photo at quality 85-90 will look sharp after Squarespace processing.
Does Squarespace automatically compress images?
Yes. Squarespace compresses every image you upload and generates 7 responsive size variants via srcset for different screen widths. The platform targets approximately quality 75 for JPG output. You have no control over this compression level in the editor. Because of this automatic processing, uploading images at the correct dimensions with light compression produces the best balance of speed and visual quality.
No signup required. Drop your images and download compressed versions instantly.