Formatting your images for display on the web

Tips for styling images to display clearly on any screen size.

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. You can't change the image file itself after upload, only alter its appearance using our built-in image editor.

Image attribute	Specification	Note
File type	Only .jpg, .gif, or .png	.pdf, .psd, and .doc files aren't compatible.
File size	20 MB limit	Use images 500 KB or less to help your site load quickly. It's best to upload high-quality images that are as large, or larger, than the maximum size you expect the image to display on your site. This will result in the resized versions of the image displaying in the best quality. Our Acuity image limit is 1.5 MB.
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, but if you're exporting your images specifically to upload to Squarespace, try to scale them to 2500px in width. This will give you access to the full range of resized images we create, while minimizing your upload times. You can upload images smaller than 2500px to restrict the maximum resolution of the image that displays on your site. This can be helpful to increase the speed at which your site's visitors can download that image on some devices, or to limit the quality of the image your site's visitors can download. Images less than 1500px wide may appear blurry. We suggest different widths for site logos, browser icons, email campaigns, and animated .gifs.
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.

Keep in mind, depending on the size of the original image, it may not be possible to download your original image file from your site. To reduce the risk of losing the original files, keep all image files on your computer after uploading them to your site.

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.

Examine image files

To determine if your image meets our requirements, you'll need to examine the image file's information.

Mac

To examine an image'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 examine an image'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.

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.

Transparent backgrounds

To create an image without a background color, ensure your image is a .png file with a transparent background. You can use third-party software to achieve this, or if you need a logo, you can use Squarespace Logo to create one with a transparent background automatically.

If you edit your image with our built-in image editor, it saves as a .jpg, and removes all transparency. To maintain the .png format, use third-party software instead.

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:

• Ensure you follow our image requirements
• Style your images
• Troubleshoot image formatting issues

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 learn how to add and style images on your site:

Image filenames and text

Image filenames and alt text

If there isn't any other alt text provided, an image's filename acts as alt text. Alt text also tells search engines what the image is about, making it more likely your site will show up in image searches. Image blocks only have one source of alt text. 

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.

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 keeps 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:

• Make style changes to the block, section, or page where you added images.
• Follow the steps in Troubleshooting cropping issues.
• Use focal points to center images.
• Use our built-in image editor to make changes like cropping and changing the aspect ratio.
• Resize, crop, or edit the original image on your device, then upload it again.

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 120 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:

• Learn how banners and section background images appear on mobile devices
• Learn how to customize your banners

Images in Acuity Scheduling

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

• The file size limit is less than the limit for website images.
• Acuity automatically resizes images larger than 600px x 120 px when they're uploaded in the Business logo field.
• Acuity 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:

• Video series: All about images
• Adding and resizing images
• Adding a site logo
• Editing images on your site
• Making audio, images, and videos more accessible
• Searching and adding stock images
• Stock image best practices
• Importing image metadata

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

• Get advice from the community in the Squarespace Forum.
• Hire a Squarespace Expert to help.