Skip to main content

Formatting your images for display on the web

John

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

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.

Tip: You can create download links for non-web-compatible files.

File name

Only use letters, numbers, underscores, and hyphens in file names. Other characters (like accented letters, question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior in galleries.

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

File size

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 multiple large images can affect site performance. If you're adding multiple images to a page, keep your overall page size in mind.

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 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 use third-party software to reduce an image's dimensions. 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.

Image cropping

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

Image names

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, keep our alt text best practices in mind.

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.

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.

If you've already added the image to your site, you can rotate the image using the built-in Image Editor.

DPI and PPI

If you're concerned about image resolution, focus on the image's dimensions and keeping file sizes under 500 KB, rather than DPI (dots per inch) or PPI (pixels per inch). DPI and PPI affect an image's print quality, but not its web display.

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

Review our image requirements before adding a logo. Format the image so it’s similar in height to how you want it to display. We don’t require a specific size for your logo, but it’s best to start with a larger image. When your image is too small to begin with, it can pixelate when resizing. You can change the size after you upload the logo.

If your site is on version 7.0, how you resize a logo depends on your template.

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.

More help

In addition to guides above, we offer other resources to help you format images:

Comments

0 comments

Article is closed for comments.

Powered by Zendesk