Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Formatting your images for display on the web

Last updated August 17, 2017 22:06

Sections

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.

Glossary

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.

Image requirements

When uploading images to your site, follow these guidelines:

File types

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

There is a 20 MB limit on all image uploads, but we recommend using image files of less than 500 KB for best results. When it comes to image size, bigger isn't always better.

Resolution

Color mode

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

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.

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.

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.

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.

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

Gallery Blocks

Gallery Pages

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.