Formatting images for display on the web

false

Formatting images for display on the web

Last updated June 22, 2026 16:25

Requirements and best practices for uploading images.

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

Use this guide to understand how images display on the web, learn about Squarespace image requirements, and find formatting guidelines for your images. For troubleshooting steps, visit Troubleshooting image upload and formatting issues.

After uploading images to your site, keep all image files on your computer to reduce the risk of losing the original files.

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. By default, all images uploaded to your site are converted to WebP format.
  • 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. Images added to galleries usually display best if all images have a similar shape. 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 cropping, ensure your image’s shape matches the container’s shape. To learn more, 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

Before uploading images to your site, ensure your images follow our image requirements. You can't change the image file itself after upload, only alter its appearance using our built-in image editor. To change image attributes, format the image on your computer and upload it again.
Image attribute Specification Note
File type Only .jpg, .gif, .png, or .webp .pdf, .psd, and .doc files aren't compatible. Animated .webp files are not supported. Squarespace Email Campaigns doesn't support .webp format.
File size 20 MB limit To help your site load quickly, we recommend uploading images of 500 KB or less.
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 A width of 2500 pixels is ideal for most images. Uploading images with a width of 2500px gives you access to the full range of resized images we create while minimizing your upload times. You can upload images with smaller widths to restrict the maximum resolution that will display on your site. This can help to decrease site loading time on some devices, or to limit the quality of the image that visitors can download, but images less than 1500px wide may appear blurry. We suggest different widths for site logos, browser icons, and email campaigns.
Resolution 120 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.

These requirements and recommendations help ensure your images display well on your site. If you have a lot of large images on your site and notice it's loading slowly, visit Reducing your page size for faster loading.

Tip: Optimize image sizes by connecting the TinyIMG extension. TinyIMG replaces oversized images with compressed versions, ensuring faster page loading while maintaining image quality. While we work with third-party services to ensure Squarespace Extensions work properly, extensions fall outside our scope of support. We can help with connecting or disconnecting your extensions. For all other questions, contact the extensions provider directly.

WebP file format

To optimize your site’s performance, all images on your Squarespace site automatically display using the WebP format. The WebP image format improves loading time while maintaining quality. Compared to .jpg and .png files of similar quality, WebP files are smaller, making them useful for displaying many images.

When you upload an image to Squarespace, we convert it to the WebP format and display that version in your site content. The original file remains in your asset library, and any edits made to the file will apply to any WebP versions on your site. You can also upload WebP files directly to your site.

If you don’t want your images to be converted to WebP files, you can disable this setting:

  1. Open the Image Settings panel.
  2. Click the WebP image format toggle off.

Any images on your site will revert to their original format within 24 hours.

Find image details

To determine if your image meets our requirements, check the image file's information.

Mac

To find an image file's information:

  1. Select the image file on your computer.
  2. Press Command + I.
  3. In the window that opens, click More Info.

Windows

To find an image file's information:

  1. Select the image file on your computer.
  2. Press Alt + Enter.
  3. In the window that opens, click Details.

Mobile devices

The steps to display image information vary by app, device, and OS. Review the documentation for the application you use to look at or edit photos on your mobile device.

Note: iPhones and iPads on iOS 11 and later capture images in a high efficiency format (HEIF) that produces .heic files. These automatically convert to .jpg when imported or shared in many places, including the Squarespace App, but you can adjust your phone's settings to capture images as .jpg by default. To learn more, visit Apple's documentation.

Transparent backgrounds

If you need an image without a background or a background color, like for a logo, use a .png or .webp file with a transparent background. You can use third-party software to achieve this, or use Squarespace Logo to create one with a transparent background automatically.

Text on images

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 keeps its sharpness, especially if the image is displaying at its original size.

Alt text

When creating your images, keep our alt text best practices in mind. Alt text is important to add to your images as it helps make your content more accessible to visitors who use screen readers. Alt text also tells search engines what the image is about, making it more likely your site will show up in image searches.

If you don't add alt text to your images, the file name will be used as alt text, except for image blocks and auto layouts. You can change the file name for an image you've already uploaded in the Asset library.

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

To preview how your site looks on mobile devices, use device view.

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:

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?

Yes No

3311 out of 5899 found this helpful

Yes No

Formatting images for display on the web