Squarespace takes the guesswork out of formatting your images for display on the web. We create seven variations of each uploaded image, to ensure perfect display on any screen size.
We have some recommendations on how to format your images before uploading them. For best results, follow the suggestions below.
What happens after I upload an image?
When you upload an image, Squarespace creates seven versions of that image, each with a different width. These widths are:
- 100 pixels
- 300 pixels
- 500 pixels
- 750 pixels
- 1000 pixels
- 1500 pixels
- 2500 pixels
The height changes relative to the width to preserve the image's aspect ratio.
Note: Keep in mind that larger images may slow your site's load speed, so we recommend sizing an image for the area in which you'll use it. For example, an image at 2500 pixels will often be too large for an Image Block or Gallery Page, but might be appropriate if you expect most visitors to view your site on a very large display. For more tips, see Image best practices below.
When uploading images to your site, follow these guidelines:
Save images in .jpg, .gif, or .png format only.
.pdf, .psd, .tff, and .doc files aren't web-compatible.
Only use letters, numbers, underscores, and hyphens in file names. Other characters (like question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior in galleries.
When it comes to image size, bigger isn't always better. There is a 20 MB limit on all image uploads, but we recommend using image files of less than 500 KB for best results.
Save images in RGB color mode. Print mode (CMYK) won't render in most browsers.
Save images in the sRGB color profile. If images don't look right on mobile devices, it's probably because they don't have an sRGB color profile.
Image best practices
We recommend uploading images at a width of 1500 pixels for most areas of your site. Image height doesn't matter, as it will be resized with the width to preserve aspect ratio.
If you need your image to stretch the full width of a larger content area (for example, as a banner or background image), Squarespace supports images up to 2500 pixels wide.
Ensure that your image is in the correct orientation before uploading it. If your image is saved upside-down, rotate the image using image editing software. For a list of image editing programs, visit Editing images for your site.
If you're concerned about image resolution, you don't need to worry about DPI (dots per inch) or PPI (pixels per inch), as neither of these affect the web-display quality. Instead, focus on using image dimensions that work for your site and keeping file sizes under 500 KB.
Note: Avoid having to increase the size of your logo in the Style Editor. It's better to start with a large image and then decrease its size once it's uploaded to your site.
Note: Each template treats logos differently. Visit our template guides to learn how your template displays your logo.
When adding a favicon to your site, ensure that the image is saved as an .ico or a .png file.
The recommended file dimensions for a favicon are 100px × 100px to 300px × 300px. Favicons will display in browsers as 16px × 16px.
Note: Internet Explorer can't display .pngs as favicons.
Animated .gifs are an exception to our 2500 pixels rule, especially .gifs in Image Blocks. A 2500 pixel-wide .gif will likely be very large, which could potentially slow down your site. We recommend formatting animated .gifs in whatever size you want them to display on your site.
Create and edit images
Visit Editing images for your site for links to recommended image editing software.
The built-in Aviary Editor
For help editing images on your Squarespace site, visit Editing images with the Aviary Editor.
High-density and retina displays
For information about viewing images on high-density or retina displays, visit How will my site appear on retina screens?.
When uploading images of products you sell on your site, ensure that the aspect ratio matches what you select for the product size options in the Style Editor.
To learn more, visit Styling the Products Page.
For information about using images in Image Blocks, visit Using the Image Block.
For information about displaying images with Gallery Blocks, visit Using Gallery Blocks.
For information about displaying images with Gallery Pages, visit Using the Gallery Page.