Guide: Formatting Your Images For Display On Your Squarespace Website

Squarespace takes the guesswork out of formatting your images for display on the web. They create seven variations of each uploaded image, to ensure perfect display on any screen size.

Below are 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 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.

Image requirements

When uploading images to your site, follow these guidelines:

File types

Save images in .jpg, .gif, or .png format only. .pdf, .psd, .tff, and .doc files aren't web-compatible.

File name

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.

File size

Squarespace recommends 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.

Resolution

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.

Color mode

Save images in RGB color mode. Print mode (CMYK) won't render in most browsers.

Color profile

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

Image width

The dimensions of the original image you upload to your site can have a big impact on how it displays. Squarespace recommends 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. Squarespace doesn'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. Squarespace's 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.

Image cropping

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.

Image text

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.

Aspect ratio

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.

Orientation

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.

DPI

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.

Page size

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.

Logos

When adding a logo, upload it at a similar height to that which you'd like to display. In some templates, you can adjust the display height using the Logo Image Height tweak in the Style Editor. 

Tip: 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 Squarespace's template guides to learn how your template displays your logo.

Favicons

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

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. Squarespace recommends formatting animated .gifs in whatever size you want them to display on your site.

Helpful links

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?.

Product images

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.

Image Blocks

For information about using images in Image Blocks, visit Using the Image Block.

Gallery Blocks

For information about displaying images with Gallery Blocks, visit Using Gallery Blocks.

Gallery Pages

For information about displaying images with Gallery Pages, visit Using the Gallery Page.

Note: For more advanced help with formatting images for your site contact us today!