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.
|File type||Only .jpg, .gif, or .png||.pdf, .psd, and .doc files aren't compatible. Internet Explorer can't display .pngs as favicons.|
20 MB limit
Use images 500 KB or less to help your site load quickly.
|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.
|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.|
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|
|Display image using||How to style your images|
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.
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:
- 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 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.
To learn more about adding images on Squarespace, visit these guides:
- Video series: All about images images
- Using images and videos
- Adding a site logo
- Editing images on your site
- 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: