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

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.

Use this guide to understand how images display on the web, learn about Squarespace image requirements, and find formatting tips for your images. We also have steps to troubleshoot image formatting issues.

Tip: Make your site stand out with high quality, well-placed images. To learn more, visit our guide about choosing compelling images.

Watch a video

How images display on the web

Several factors influence how your images display on websites:

  • Image file specifications - Review our image requirements to ensure you can upload images to your site.
  • Image width - Images with a narrow width may look great on mobile devices but blurry on computers, because computer screens are wider than mobile devices.
  • Image shape - Also known as aspect ratio, this is the relationship between your image’s height and width. Your image shape influences how images display on your site. To learn more, visit Understanding aspect ratios. We also have examples of common aspect ratios.
  • Image containers and cropping - Every image on your site is in a container, which is an invisible box that controls how the image displays in relation to other content on the page. For example, banners have a rectangular container. To minimize or prevent cropping, ensure your image’s shape matches the container’s shape. If your image appears cropped, visit Troubleshooting cropping issues.
  • Responsive design - Every Squarespace site has responsive design, which automatically changes the size of your images, depending on your visitor’s device.

Image requirements and best practices

Before uploading images to your site, ensure your images follow our image requirements. Our requirements are the minimum we recommend to ensure your images display well on your site. Keep your page size under 5 MB to ensure your site loads quickly. If you notice your site loads slowly, visit Reducing your page size for faster loading.

Image attribute Specification Note
File type Only .jpg, .gif, or .png .pdf, .psd, and .doc files aren't compatible. Internet Explorer can't display .pngs as favicons.
File size

20 MB limit

Use images 500 KB or less to help your site load quickly.

Our Squarespace Scheduling image limit is 1.5 MB. For more Scheduling image requirements, go to Images in Squarespace Scheduling.

File name Only use letters, numbers, underscores, and hyphens. Accented letters, question marks, percent signs, and ampersands may not upload or could cause unexpected issues.
Image width 2500 pixels width is ideal in most cases.

You don't need to resize your images if they're wider than 2500px and meet our other specifications. Images less than 1500px wide may appear blurry.

We suggest different widths for site logos, browser icons, email campaigns, and animated .gifs.

Resolution 60 MP (megapixel) limit To find your image resolution, use this calculator or multiply the dimensions and divide by 1 million. For example, an image that's 1500px x 1650px is 2.47 MP.
Color mode RGB (red, green, blue) CMYK color mode is only for printed materials and won't appear correctly in most browsers. On Macs, this attribute may be called Color profile or Color space.
Color profile sRGB If images don't look right on mobile devices, they may not have an sRGB color profile.
DPI and PPI n/a You don't need to be concerned about DPI and PPI because they only affect an image's print quality, not its web display.

Image formatting

How and where you add images influences how they appear on your pages. You can add images to your site using blocks, sections, and pages.

Keep in mind:

  • Ensure 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 already added the image to your site, rotate the image using our built-in image editor.
  • Images added to galleries display best if all images have a similar shape. For example, use all landscape images (wider than they are tall) or all portrait images (taller than they are wide), not a mixture of both.
  • To preview how your site looks on mobile devices, use device view.

How do my images resize for different devices?

When you upload an image, Squarespace creates up to seven versions of that image, each with a different width. The height changes relative to the width to preserve the image's shape. Squarespace's built-in responsive design automatically chooses the appropriate image size based on the visitor's screen. The widths we create are:

  • 100 pixels
  • 300 pixels
  • 500 pixels
  • 750 pixels
  • 1000 pixels
  • 1500 pixels
  • 2500 pixels

Do my images need to have exact dimensions?

No. Our system automatically resizes your images to be larger or smaller to fit different device widths, so you don't need to format your images to exact dimensions, like 750px × 500px. For example, there isn’t a specific image height and width requirement for image blocks and a different requirement for images in gallery sections. Follow our tips about image width to help ensure your images aren't blurry.

If your images don’t display the way you’d like:

Add and style your images

You can use site styles, design panels, and block or page section settings to make style changes and customize how your images appear. How you add and style images depends on which version your site is on. Browse the table below to find how to add and style images on your site:

 

Display image using How to style your images

Site logo

Favicon or browser icon

Image blocks

Banners or section backgrounds

Gallery sections

Gallery blocks

Thumbnail images

Product blocks

Animated .gifs

Display image using How to style your images

Site logo

Favicon or browser icon

Image blocks

Banners

Cover pages

Gallery pages

  • Style your template’s gallery pages

Gallery blocks

Thumbnail images

Product blocks

Site-wide background images

Animated .gifs

Image filenames and text

Image filenames and alt text

An image's filename acts as alt text if there isn't any other alt text provided, except for with image blocks. Alt text also tells search engines what the image is about, making it more likely 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 and image alt text in the Content tab.

Image text

To add text over your image, we recommend adding it as an overlay instead of embedding it into your image. This makes the text searchable and keeps it visible if the image crops on smaller devices. Visit our tips for adding overlay text to image blocks, banners, gallery pages, and gallery blocks.

If your image contains text, 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.

Troubleshooting image formatting issues

If your images appear cropped or distorted, you can:

Why does an error message appear when I upload my image?

First, review our image requirements. If you’re using the correct file type and your image is 20MB or less, the issue might be your image’s resolution. Image resolution is measured in megapixels and our limit is 60 MP.

Why is my image’s color distorted?

Your image’s color mode or color profile might not be formatted correctly. Review our image requirements to confirm you’re using the correct settings.

Why do my banner images crop on mobile devices?

Banner images almost always crop on mobile devices because a banner is wide and mobile devices have a narrow width. Several factors cause banner images to crop on mobile devices. If you notice cropping on mobile devices:

Images in Squarespace Scheduling

When uploading images to Squarespace Scheduling, you can use the same image file types used in the rest of your site. However, you'll want to keep these differences in mind when formatting your Scheduling images:

  • The file size limit is less than the limit for website images.
  • Scheduling automatically resizes images larger than 600px x 120 px when they're uploaded in the Business logo field.
  • Scheduling automatically resizes images larger than 600px x 600px when they're uploaded as the image for a calendar or appointment type.
  • For the best visual results, we recommend using images with a square shape or 1:1 aspect ratio.

More help

To learn more about adding images on Squarespace, visit these guides:

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

Was this article helpful?
779 out of 1344 found this helpful
Formatting your images for display on the web