How to Prepare Images for Squarespace
Squarespace is known for its beautiful templates, but those templates only look their best when you feed them properly formatted images. Upload the wrong format or an oversized file, and you end up with slow page loads, awkward cropping, or blurry images that undermine your professional design.
This guide explains Squarespace's image requirements, which formats to use for different sections of your site, and how to convert and optimize images before uploading.
Step-by-Step Instructions
- Know Squarespace's supported formats
Squarespace supports JPG, PNG, GIF, and SVG. It does not accept HEIC, AVIF, WebP, BMP, or TIFF uploads. If your images are in any unsupported format, you need to convert them before uploading. Squarespace automatically generates WebP versions for visitors whose browsers support it, so you get the performance benefit without needing to upload WebP yourself.
- Match the format to your content type
Use JPG for all photographs, hero images, and backgrounds. JPG gives you the best quality-to-size ratio for photographic content. Use PNG when you need transparency, such as logos that sit on different colored backgrounds. Use SVG for icons and simple graphics that need to scale perfectly at any size.
- Convert incompatible images
Open imageconvert.co and drag your images onto the converter. Select JPG for photos or PNG for graphics that need transparency. The conversion runs entirely in your browser so your images stay private. Download the converted files and they are ready for Squarespace.
- Optimize dimensions for Squarespace
Squarespace recommends images between 1500 and 2500 pixels wide for full-width sections. For blog post images, 1500 pixels wide is sufficient. Banner images should be 2500 pixels wide to look sharp on large screens. Keep file sizes under 500 KB for most images and under 200 KB for blog thumbnails. Squarespace limits uploads to 20 MB per file.
- Upload and check the results
In the Squarespace editor, add your images to the appropriate sections. Use the built-in focal point tool to control how images are cropped at different screen sizes. Preview your site on desktop, tablet, and mobile to verify images display correctly across all breakpoints.
How Squarespace Handles Image Optimization
Squarespace includes built-in image processing that generates multiple sizes of each uploaded image and serves them responsively based on the visitor's screen size. It also automatically converts your uploads to WebP format for supported browsers. This means you do not need to upload WebP files yourself.
However, Squarespace's optimization cannot fix a fundamentally oversized source image. If you upload a 10 MB TIFF file, Squarespace will process it, but the upload will be slow and the original file consumes your storage quota. Starting with a properly formatted and sized image gives the best results.
Common Squarespace Image Problems and Fixes
The most common image issues on Squarespace sites come from using the wrong source format or dimensions.
- Blurry images: Usually caused by uploading images that are too small for the display area. Upload at least 1500 pixels wide for any content area.
- Slow loading: Caused by oversized files. Convert to JPG at 80-85% quality and keep files under 300 KB.
- White borders on transparent images: You uploaded a JPG where you needed a PNG. JPG does not support transparency, so the transparent area becomes white.
- Awkward cropping: Squarespace crops images to fit its layout grid. Use the focal point tool to control which part of the image remains visible.
Frequently Asked Questions
Can I upload WebP images to Squarespace?
No, Squarespace does not accept WebP uploads. Upload your images as JPG or PNG, and Squarespace will automatically generate WebP versions for browsers that support it.
What is the best image size for Squarespace banners?
For full-width banner images, use 2500 pixels wide. For content area images, 1500 pixels wide is sufficient. Keep file sizes under 500 KB for the best loading performance.
How do I upload HEIC photos to Squarespace?
Squarespace does not support HEIC. Convert your HEIC photos to JPG first using a browser-based converter like imageconvert.co, then upload the JPG files to Squarespace.
Convert HEIC to JPG for Squarespace