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.
Tip: Visit our All About Images video series for more advice and step-by-step tutorials on adding imagery throughout your site.
Watch a video
Before you begin
To find the size and dimensions of your original image before you upload it to your site:
- PC - Right click on the image file and select Properties.
- Mac - Press Option while clicking on the image file, then select Get Info.
Here’s some of the terminology you’ll see in this guide.
- Aspect ratio - An image's aspect ratio is its width to height ratio expressed as a number, like 3:4. Maintaining a consistent aspect ratio prevents images from becoming distorted. For example, if you reduce the width of an image by half, you must also reduce the height by half.
- Image width - In this guide, image sizes refer to the number of pixels along the image's width and height. Your image may display larger or smaller on your site depending on its container size. To learn more, visit Resizing an image.
What happens after I upload an image?
When you upload an image, Squarespace creates up to 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. Squarespace's built-in responsive design picks the appropriate image size based on the visitor's screen.
Note: Images uploaded via the Style Editor, such as background images, always display at their original image width. We recommend loading these images with a maximum of 2500 pixels along their longest edge. 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.
Note: You can create download links for non-web-compatible files.
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.
We recommend using image files of less than 500 KB for best results, though the limit for an individual image upload is 20 MB. When it comes to image size, bigger isn't always better, as uploading larger images can affect site performance.
There is an image resolution limit of 60 MP (megapixels).
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
The dimensions of the original image you upload to your site can have a big impact on how it displays. We recommend using images that are between 1500 and 2500 pixels wide.
- Images smaller than 1500 pixels may appear blurry or pixelated when they stretch to fill containers, such as banners.
- In most cases, Squarespace will reformat large images to a maximum width of 2500 pixels. However, images added through the Style Editor (background images and site-wide banner images) load at their original dimensions. This can cause page loading issues if the image is over 2500 pixels along its longest edge.
You can reduce an image's dimensions in the Adobe Creative Cloud Image Editor, or use third-party software. We don't recommend enlarging a smaller image, as this can make it appear pixelated. Instead, start with an image that is at least 1500 pixels wide. Our partnership with Getty Images can help you search for high-quality images.
Tip: If you're seeing loading issues, such as a background image not loading on mobile, try reducing the longest edge of all images to 1500 pixels. This is the safest combination of image quality and loading speed for your visitors.
Browsers load the full image for images cropped by your site, such as those cropped with the cropping handle or Style Editor aspect ratio tweaks. To reduce the file size of large images, it's better to first crop them close to the intended size manually with third party software or the built-in Adobe Creative Cloud Image Editor.
Whenever possible we recommend adding text as an overlay instead of including it within the image. This makes the text searchable and keeps it visible if the image crops on smaller devices. See our tips for adding overlay text to Image Blocks, banners, Gallery Pages, and Gallery Blocks.
If your image contains text, it's best to save it as a .png file. Text in a .jpg file often becomes blurry when the image is compressed. A .png file typically retains its sharpness, especially if the image is displaying at its original size.
It helps to ensure each image you’re using has the same aspect ratio (height:width) before uploading, as images are typically cropped based on their width and height. If all your images have the same aspect ratio, it will be easier to anticipate how they'll crop. To learn more, visit Understanding aspect ratios.
Ensure that your image is in the correct orientation before uploading it. If your image is saved upside-down, rotate the image with image editing software before loading it to your site. For a list of image editing programs, visit Editing images for your site.
If you've already added the image to your site, you can rotate the image using the built-in Adobe Creative Cloud Image Editor.
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.
Even if all your photos are under 500 KB, if you have a large number of images on a page it can cause issues such as slow loading speeds. Check your page content to ensure your page size is 5 MB or under.
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 1500-2500 pixels rule, especially .gifs in Image Blocks. A 1500 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 Adobe Creative Cloud Image Editor
For help editing images on your Squarespace site, visit Editing images with the Adobe Creative Cloud Image 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.
Note: For more advanced help with formatting images for your site, we recommend visiting Squarespace Answers, our customer and developer forum. You may also consider consulting with a Squarespace Specialist.