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 Site Styles, 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.
Tip: 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).
Tip: To find the MP for an image, multiply the dimensions and divide by one million. For example, an image with dimensions of 1500px x 1650px is 2.475 MP.
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 Site Styles (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. You can also search and add high-quality stock images directly from your site.
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 Site Styles 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.
An image's name acts as alt text if there isn't any other alt text provided. It also tells search engines what the image is about, which makes it more likely that you'll show up in image searches.
When creating your images, use readable names that will make sense to people who use assistive screen readers or who've disabled images in their browser. For example, if your image name is IMG_0178.jpg, change it to something that describes the image, like blue-ceramic-glazed-planter.jpg.
Keep these tips in mind:
- Be descriptive and helpful. How would you describe this image to someone who couldn't see it?
- Separate each word with a hyphen or underscore.
- Keep your image names short, typically eight words or fewer.
- Incorporate keywords, without "keyword-stuffing."
- You can omit words like "the" and "a," and terms like "photo" or "picture." For example, instead of a-picture-of-a-green-vase.jpg, use the name green-vase.jpg.
Tip: To change the filename for most images, re-upload the image with the new name. In Image Blocks, you can change the Filename field in the Content tab.
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.
Tip: Avoid having to increase the size of your logo in Site Styles. 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.
Before adding a stock image to your site, review our best practices.
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 Site Styles.
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.