Squarespace makes formatting images for displaying them on the web easier. It creates seven variants of each image uploaded so that it could display perfectly on display of any size via gallery, slider, etc. In this article, you’ll get some recommendations on how to format your images before you upload them on your Squarespace website.
Before you begin to optimize your images, you need to know how to find dimensions of the original image before uploading it to your Squarespace website. On PC, you need to right click on the image and select Properties from the menu. On Mac, you’ll need to click Option on the image file and after that choose Get info.
What happens after you upload an image on Squarespace
When you perform an upload of an image to your Squarespace site, Squarespace creates up to seven versions of this image, of a different width and size each. Here are these widths:
- 100 pixels
- 300 pixels
- 500 pixels
- 750 pixels
- 1000 pixels
- 1500 pixels
- 2500 pixels
The image height and size will change relative to the width so that the image’s aspect ratio could be preserved. And the Squarespace’s built-in design option selects the appropriate image size according to the visitor’s screen.
How to determine image size for website
If you’re using Google Chrome, enable your developer tools set. To do it, follow these steps:
- Click chrome, go to Preferences, and then open Extensions and on the right check the “Developer mode” option.
- Go to the Squarespace site you need to know the image sizes for.
- Right-click or command-click the image and then pick the Inspect element option.
The image dimension will be demonstrated with a yellow background. To view it once again, repeat the last step from the guide above.
In case you’re using Safari, you’ll also need to enable your developer tools. Then follow these steps:
- Open Safari, go to Preferences and then click Advanced.
- Check the box by “Show develop menu in menu bar”.
- Go to the site you need to know the image sizes for.
- Right-click on any part of the website’s page and then select the Inspect element option.
- Click the Inspect button at the top of the new area at the bottom of the Safari window.
- You’ll see a blue icon that you can hover over any element on the page and you’ll see all the required info, including the image dimensions.
Use this info to find out image sizes for your site and to correct them in case anything’s wrong.
How to copy image from website
If you need to copy or download some image of any size from a Squarespace or any other website, you’ll need to right-click the image to view the properties menu for this image. In case you need the copy of that image for some purpose, select the Copy image option from the menu. And if you need this image to be saved on your computer, select the Save image as option. Then the Save As or Save Picture window will be opened, providing you with an option to choose where you need to save the image and change its name if needed.
Image best practices on Squarespace
Below you’ll find some recommendations for using images of any size on your Squarespace site.
Why is image compression important
When a user clicks a link to open your website, the server calls all the files to load on the screen. And depending on how your Squarespace website is built, the visual content can be responsible for the major part of the data that needs to be loaded due to its size. And as it can be a huge part of content that needs to be loaded, it can slow down site load speed. So, in order to improve site speed, optimizing images on your site is one of the most important things. The smaller images are, the faster your website loads - it means that if images on your site are too large, they need to be optimized. But beware of grainy looking images. To avoid them on your site, make sure you know what type of image to use.
Keep in mind that although the image file size limit is 20 MB, Squarespace recommends using image files of less than 500 KB for best results. And when adding multiple pictures to your site’s page or gallery, keep in mind your overall page size.
Best Image Format for the Web
Each image format is intended for some specific use case and makes sense when it comes to the appearance, performance and scalability. Here’s why:
- Some image formats are more detailed and are of much better quality than others.
- Some image formats require more space than the others which can affect your Squarespace site load time.
- Some image formats can be freely scaled to make your image larger or smaller without losing much of the quality, and others can’t. This can result in different appearances on different screen sizes.
As we’ve already mentioned above, image files on your website should not affect your site load speed so choose them carefully. The optimal choice here might be a JPG. It’s also good if you want to create a gallery of pictures.
A JPG is a raster-based image format that is used for web and print usage. JPG is the standard format for digital cameras and the most popular image format around the web due to its compression and universal support.
JPG files are commonly used for saving photo with small quality loss. But keep in mind that JPGs use lossy compression - it means that each time you re-save, the quality of the image is reduced and the optimization of the image in future can be impossible.
The list of pros of using JPG image format on your Squarespace site includes:
- Universal support across different browsers.
- Small file size resulting in fast loading of the photo gallery.
- Supports millions of colors display which is good for a photo gallery.
- Great quality of image and photo of any size.
But there are also some pros that you need to be aware of:
- JPG doesn’t support transparent backgrounds.
- Lossy image compression results in low quality and further photo optimization.
- It can’t be used for computer-generated graphics.
Now after you’ve come up with the most suiting image format, let’s proceed to the width.
Image width on Squarespace sites
Before you upload an image to your Squarespace site, keep in mind that its width has a huge impact on how it displays, as well as the optimization of your website. Squarespace recommends the width of your images to be between 1500 and 2500 pixels. Images having size smaller than 1500 pixels can look blurry or pixelated when they’re scratched to fill some container, banner, for example.
Squarespace usually reformats large images to the max size of 2500 pixels. But background images and site-wide banners load ath their original dimensions - keep in mind that this can affect site loading speed in case the image is over 2500 pixels along its longest edge.
However, you are free to use third-party tools to scale down image dimensions. Keep in mind that enlarging an image of a smaller size can result in making it pixelated. Also, if some loading issues occur, try to reduce the longest edge of all images to 1500 pixels.
Cropping image on Squarespace
Popular browsers usually load full image for images cropped by your Squarespace website, for example, such as the ones cropped by means of cropping handle or Site Styles aspect ratio tweaks. To make large image files less and facilitate the optimization, it’s better to crop them manually close to the intended size, using some third-party software.
Image text and names on Squarespace
Squarespace recommends using text as an overlay for the image instead of adding it within your image as this method is better for further optimization. This way, you’ll make the text visible in case the image will be cropped for smaller devices. Images with text are better saved as a .png file because text in the JPG image file will be blurry if the image gets compressed. PNG, in its turn, saves its sharpness in such cases.
Keep in mind that the image name will be used as alt text in case other text is not provided. Alt text is used to describe to search engines what the image is about and also guarantees this image will appear on image searches.
Page size on Squarespace
Having a large number of images on your Squarespace website’s page is not recommended as even if all of them are under 500 KB, it can affect your Squarespace site’s loading speed. Your page size must be 5MB or under in order not to have any issues. So it’s better for you to optimize your images.
Image orientation
Before you upload your image to your Squarespace site, make sure it’s of the right orientation. If it was saved upside-down, feel free to use the image editing software to rotate it before uploading it to your site. And if you’ve already uploaded the picture to your site with a wrong orientation, you can rotate with the help of Squarespace’s built-in editor.
Other recommendations
Aspect ratio of the picture helps to ensure each image you use for your website has the same height and width before you add it to your website as all the images are commonly cropped according to their width and height. Remember that if all your images have the same aspect ratio, it will be easier to predict their optimization and how they will crop.
In case you’re worried about the image’s resolution, it’s better for you to focus on the image’s dimensions and keep the image file size under 500 KB, rather than DPI (dots per inch) or PPI (pixels per inch). These two only affect the print quality and do not harm displaying on the web.
Logo image requirements on Squarespace
Before adding a logo image, you need to think about its optimization and ensure that the image is similar in height to how you want it to be demonstrated. Squarespace does not have any specific requirements for your logo, but it’s better to start with a larger image. If you choose the picture that is too small, it can become pixelated after resizing. The logo image size can be changed after you upload it.
Logo picture on Squarespace websites is displayed at the top of the website. Styling logos is only available on computers. Follow the steps below to alter your logo’s image position and size:
- Find your site’s preview and click Edit in the top-left corner of it.
- Select Header and click Edit Site Header.
- Select the Desktop or Mobile icon.
- Click the Header layout and choose the layout you prefer.
- Choose the Back option to return to the main Header editor and after that click the Globe icon.
- Select Site title and Logo picture.
- Here you can use sliders to alter the Logo picture Height and Mobile Logo Max Height.
- Go to the Done section and select the Save option.
Removing your logo depends on your website’s version. Also, the logo picture can be removed through the agency of the Squarespace app.
Favicons on Squarespace
If you’ve decided to use a favicon for your website, make sure that the image is saved as an .ico or a .png file for - it will make the further optimization easier. The recommended file dimensions for your Squarespace favicon are 100px × 100px to 300px × 300px. In browsers, your website’s favicon will be displayed as a 16px × 16px picture.
GIFs
Animated GIFs are the exception for the Squarespace’s 1500-2500 max pixels rule, especially if they are in Image Blocks. It goes without saying that in most cases a 1500 pixel-wide .gif will be a very large one and can potentially affect your website’s loading speed and optimization. Animated GIFs are better be formatted in whatever size needed for displaying on your website.
Upgrade your website with Squarespace Google Reviews plugin!
