Squarespace templates are high-density and Retina Display-ready. Your site's appearance on Retina and HD screens depends on the original size of the images you uploaded to your site.
When you upload an image, we store up to seven versions of it, each with a different width. Our built-in responsive design automatically detects the visitor's screen and picks the best image size to fit it:
- Non-Retina screens - We'll pull the largest image needed to fill the image's container without stretching it. For example, if a banner's width is 310 pixels, we'll display the 500-pixel version. This creates the best image display without slowing page load times.
- Retina screens - We'll show an image twice as large as needed. In the example above, we would use the 750-pixel version of the image. This gives the image the highest pixel density needed for Retina screens.
Note: Images loaded through the Style Editor, such as background images, are the exception to this rule. For these images, we'll always show the original image at its full size.
Uploading a large image file (twice the size needed) for your logo can improve its appearance on HD and Retina screens. However, this may cause blurring on other screens and some browsers, such as Internet Explorer. We recommend considering your site's audience and use a logo size suitable for the majority of your visitors' screens.
Tip: In most templates, you can adjust the logo's display size in the Style Editor.
Most icons in our templates, like menu icons, social icons, and Share buttons, scale without a loss of image quality because they're web font or SVG-based.
Some older or discontinued templates have image-based icons that don't scale on Retina displays.
Any text added to your site will scale for Retina screens without a loss of quality.
For tips on optimizing images for your site, visit Formatting your images for display on the web.