Squarespace image sizes; how to edit and customise

web design

8 Nov

In this blog post we will be discussing Squarespace image sizes, and how you can adjust and customise them to suit the particular page that you’re designing.

Squarespace makes it very easy to upload and edit your images. Also, the design is so responsive when it comes to viewing the images on all devices, whether the phone, tablet or laptop.

You don’t have to worry about exact dimensions when you upload your images, and so this is hopefully one concern off your plate! We do have some advice to offer however, as there are some tips you need to know about.

We’ll walk you through these …

Squarespace Image Sizing; Things to do before you upload

Image Name

When you save your image file onto your laptop/desktop, name it with something relevant and descriptive. Tip: don’t use characters like ‘%’ or ‘?’ in the descriptions, stick to letters, numbers and maybe hyphens.

Image Width

Squarespace recommends sticking to an image width of between 1500px to 2500px.

Any less than 1500 pixels, and you risk blurry photos.

Image File Size & Type

In minimal website design especially, we want to keep image file sizes small, otherwise you risk creating a site with a slow loading speed.

Keep the file sizes to under 500kB, and this will help in preventing that.

In most cases you will have the option to have .jpg or .png files for images. Type .jpg (or JPEG) is probably the best to use as it is the image type most familiar by many browsers.

You could use .png, but this type does have a tendency of being quite large in size and harder to make smaller. But that said, not impossible. However, .png files are usually better for images with text.

So as a rule of thumb for general images (different rules apply for favicons), save your image files as 500kB and in .jpg format.

For some more tips, we like to use the following sites for image formatting and sizing:

TinyPNG.com; to upload your .jpg or .png files and make them smaller in kB.
png2jpg.com; to upload your .png images and convert them to .jpg format (and therefore making them nice and small in size).

Featured

Squarespace Image Block

Image Cropping & Aspect Ratio

The Aspect Ratio is your image’s ratio of width to height. Example: this will be expressed as the following number format ‘2:1’.

You could start cropping your image ratio before uploading, however Squarespace does a good job at ensuring that your images are resized proportionally when you upload into the image block. What you don’t want to do is start cropping your image in one direction, and not the other. This risks image distortion.

Once you upload into the image block, Squarespace’s default settings will do its best to retain your image’s quality and not stretch the image without you telling it to.

We’ll get into editing your images with image editor soon …

Image Crop Handle

Once the image is uploaded and you want to place some text next to the image, you might decide you want both in line with each other.

This is an example of a simple Inline image upload in the image block.

By moving around some spacer blocks (check out our blog post on content blocks), you’re able to create these columns, one with an image and another with the text in it.

By clicking on the dot under the image (as shown), you can literally drag it to a shorter length, and it still preserves the image’s width.

Now the image is in line with the end of the text as shown.

Image Alt Text

Adding your alt text is a good thing to do as it will ultimately give your site a SEO boost. The name that you give your image will become the alt text, unless you provide another.

The alt text is especially helpful for people who need assistive screen readers or when the image can’t be displayed on the browser (and so this text becomes the description of what you’re showing).

Below is an example of adding the alt text to an Inline image within the Squarespace image block. This is basically the caption under the image, and you have the option of wanting to display this or not (options in the Design tab drop down menu).

Squarespace image alt text showing under image

Featured

Editing your Images

The image block editor is where you can make some adjustments to your images.

You’re able to crop your image to different aspect ratios using the built in editor as shown, once the image is uploaded and on your page. You can also adjust them according to their brightness, contrast, saturation, etc.

This is only if you want to make further changes. Remember though, that the main thing is to follow the initial steps before uploading them to your site as discussed at the start of this post.

Squarespace Image Types

Gallery Images

The one thing to remember about the gallery block is that your aspect ratios should stay the same and consistent for each image. This will make sure that aesthetically the gallery is pleasing. It doesn’t matter which gallery option you choose.

Tip: by using software like Canva* (our favourite!), you can easily design and put together the right image sizes that you need for your site.

Product Images

Within Squarespace ecommerce, you will of course show off images of your products. This will be within the main products page as well as thumbnails of the products.

Just like for gallery photos, make sure each image follows the same aspect ratio and they stay consistent.

Banner Images

Banner images are fantastic for creating that central, eye catching image on your site! Most sites will use the banner to create the impact they want as the image stands out large, from one end of the page to the other (with no margins).

You also have the option to include overlay text and/or a button (great for that call to action!) on the banner images.

As this image is loud and proud on your page, you need to absolutely make sure that it follows the under 500kB rule. Also, it may need to be a little wider (up to 2500px), just to make sure that the image isn’t stretched out when it gets uploaded.

Remember to play around a little with the banner image, and check to see if it looks right on both desktop and mobile.

Logo & Favicon Image

It is better to upload a larger image than what you need for your logo image, because you can always go into Site Styles (and into logo width) and adjust the sizing later.

The thing to remember is that for those users visiting your site on the desktop or laptop, the logo needs to be of a good quality too.

Squarespace has tips for formatting and uploading your favicon image. In case you don’t know, the favicon image is the image/icon that shows up on your browser.

For favicon images, keep the sizes to between 100px X 100px and 300px X 300px. Once uploaded, your little icon will always display as 16px X 16px in browsers. Unlike for other images, the best file formats for favicons is either .ico or .png. However bear in mind that some versions of Internet Explorer won’t be able to display .png files.

Below are examples from our website’s logo and favicon Design.

2020november 2020

Roshni Kahol

Squarespace image sizes; how to edit and customise