With so many aspects to consider when designing our website, we'll want a design that's not just aesthetically pleasing - we'll need a website that's also easy on the eyes and accessible for those who experience vision impairment. With Squarespace, it's easy to get these two things!

When working on our website, we want it to look professional, but if the images aren’t optimized for the web, our site might not capture our audience's attention. That's because images put a visual element into the content that helps people understand what it's about and make it more interesting. But it's important to remember that size matters when it comes to digital images. 

This article outlines the steps we can take to ensure high-quality images on our website, leading to a more positive user experience.

Why Does Image Size Matter? 

Squarespace is responsive - the platform can adjust to whatever size image we desire.

That's partially true.

Though it doesn't affect how the image looks, the size does play a role in how well it will perform on the page.

Here are a few factors that influence how images show up on our website:

Image File Specification

If we want to upload an image to the website, images must be in certain file types, and the two most common are JPG and PNG.

Image Width

There are times when images appear distorted on a PC monitor, no matter how much Squarespace tries to optimize them. This may happen when the image's width is too narrow.

Image Shape

When it comes to screen images, the aspect ratio is a common term. The height-to-size ratio greatly affects how an image looks on the screen. We are familiar with using ratios when creating Pinterest pins or Instagram images. The two typical ratios are 2:3 or 1:1 (square).

Squarespace allows to upload of up to 20MB of jumbo files, but we must keep all images on our site under 500KB.

Image File Types For Squarespace

There are just a handful of file types that we can upload to our Squarespace site:

• .jpg
• .png
• .gif

When working with images on our website, it's best to stick to .jpg files. This is the format that most browsers can recognize and display properly, which gives us major SEO brownie points.

It's also the easiest file type to resize since .png files tend to be bulky and difficult to work with. We've noted a few specific instances where Squarespace might need to use something else. 

When composing images on Squarespace, it's important to remember that all desktop screens will display our images at their widest width by default. Coming from a digital design background, it's considered best practice to upload all of our photos with the same width.

What's The Magic Width?

Squarespace has built-in image scaling, making it quick and easy to resize images without losing quality or causing distortion. This means the content will load faster on the web, and overall our image quality will be above average.

For digital design, keeping our image to a width of 1500 pixels can be helpful. This is not always the case across different templates or designs, but it's a practical measure to ensure our images are big enough.

Squarespace Image Aspect Ratios & Cropping

What is the aspect ratio of our image? It's the width of our image in relation to its height. If our horizontal image is twice as wide as long, the aspect ratio would be 2:1.

With Squarespace, our images will always look crisp and perfect, no matter how big or small. Its default settings automatically resize images proportionally, so we don’t need to stretch them in one direction to fit a space.

Source: Squarespace

Squarespace will ensure its perfect width if we put an image box beside a text block beside it. It won't shrink the length of the picture or the text within.

If we want our text and image area to end at the same point, we will tap where we want the text to stop. We can also drag on a corner of the text field to shorten it. This is what we call a crop handle on Squarespace.

What happens when we drop the focal point into the image block settings? Perhaps the image's width is preserved, but the length has been cropped according to where it was dropped.

We don't need to worry about aspect ratio when designing a banner. As long as we ensure that the shape of our photo is similar to the shape of our ad space, Squarespace has us covered.

Optimizing Squarespace Images For Mobile

If we crop a photo using the cropping handle as shown, our original image will be saved, and we'll have the option to make its container longer for reusability.

We can change which part of the image our visitors should focus on by dragging a focal point around in the preview pane in our Image Block Settings.

A common layout trick for creating a lot of white space on the desktop is to use spacer blocks to even out our content. When using this on mobile, remember that vertical spacers go away, so it could be worth uploading an image with built-in white space.

In this manner, we'll ensure that our images will be split across the available screen size on mobile devices instead of taking over the whole screen.

For better design and control, we can use Squarespace's built-in image editor and save our images to our computer before uploading. Plus, the Preview app on Mac will come in handy for cropping images before uploading.

We can upload our images and store them extremely efficiently with just a few clicks. Squarespace automatically makes 6 quick copies of the image in different sizes and resolutions.

Design Tips For Acing Squarespace Website Image Size 

For the best results, here are some things to keep in mind when using specific image types:

Squarespace Header Image Size Tips

The banner or header image is the big hero photo that tops most Squarespace websites. It reaches from side to side, often with no margins, and usually includes a snappy text overlay or button.

This is an example of one of the banner images for Paige Brunton's website.

Source: Paige Brunton

Take advantage of all the customization options available with this platform, and ensure the banner image is a perfect size. To avoid having our banner stretched or zoomed to fit on any particular page, consider making it at least 2000 pixels x 2500 pixels wide. But still, keeping the size under 500KB is recommended for everyone.

When uploading a banner image, Squarespace can sometimes crop it slightly. If we need to, we'll have to upload or crop the image several times before it looks perfect.

Squarespace Background Image Size Tips

For optimal viewing on mobile devices, it may be worth increasing the width of the Squarespace background image to 2000px. This will ensure that the image quality is kept high but only 2500px in width. If we go over this limit, we may anger the mobile viewers and lose traffic from people visiting our site on their phones.

Squarespace Gallery Image Size Tips

Keeping the aspect ratios in mind is key when designing Squarespace gallery. We recommend using a slideshow, grid, or carousel layout for the best results. Each of these has specific dimensions that will help Squarespace do its design responsiveness thing and make our site look good on all devices.

When it comes to image size, keep in mind that px-wide images should be no larger than kb file size. The built-in margins or bleed lines can assist Squarespace in its design responsiveness.

Squarespace Product Image Size Tips

To avoid awkwardly cropped or unintended white space that can make our website look DIY (and not in a good way), adhere to the same aspect ratio before uploading to our Squarespace account. For example, if we have a 4:3 product image, ensure all of our images are 4:3 too. This will help ensure that our images are all uniform in size and look better overall.

Squarespace Logo Size Tips

When creating a logo for our website, it is important to keep the quality high. One way to do this is by uploading a larger image than needed to keep the quality high. This will allow us to change the file without losing any original dimensions. We can go into Squarespace site-style settings and play around with size to find a resolution that suits our needs.

Source: Squarespace 

How To Change Image Size In Squarespace? 

To adjust the size of an image in the Squarespace site:

• Before uploading, we'll need to ensure the actual Squarespace blog image size is 500Kb or less. We can crop that image once it's already on our site and use the platform's built-in image editor!
• We can edit the image uploaded using our image editor tool. Just click the icon, and it will appear.
• There is a crop feature in the crop tab. Select one of the pre-set aspect ratios or use the custom option as desired.

Source: Squarespace 

If we follow the following steps, Squarespace will handle the rest. Yay!

UPQODE analyzes the content of your website to build a professional, image-optimized site! 

Find out how to make your website's images shine with our quick tips on creating an amazing website! As a web designer, you're responsible for website content and layout and ensuring your images look good.

The biggest reason website images don't look as good as they should is their size. Learning how to resize images can make the difference between a client being completely satisfied and abandoning the ship. 

UPQODE can help you attract more visitors and increase conversions with our design services. We are the leading web design and development company for small, medium, and enterprise companies. Schedule a meeting with our customer-focused marketing team today.