10 Best Practices For Image Use in Squarespace

So, now that you’ve either created or curated some gorgeous photos for your new website, this post provides my 10 best tips for sizing images on Squarespace.

And that’s not all.

Since images are vital to the success of your website, the tips are broken down into sections that address each aspect of website images.

The photos used on your website will either draw people in and forge a connection with both you as well as your brand, or they can repel folks without another thought. So, images are pretty important to the overall success of your site.

The tips in this post are geared towards helping you draw people in, aaand keep them on your site long enough for them to take action. Often times, the goal of a website is to encourage people to either buy from you or hire you as well as standout. Optimizing your on brand images for your website will help ensure this happens and encourage people to visit your site, regularly.

Below, you’ll find my 10 best tips for sizing images for your Squarespace site, so you can maximize every moment your site is live. Take a look!


How to Size Images in Squarespace


With Squarespace you’ll notice that there are a few different spots to place an image within your selected template. This section will cover a few ways images can appear on your site, and they include:

  • Banner images

  • Product images

  • Favicons

  • Logos

 

Note: The minimum size for photos in Squarespace is 1000 pixels (px). For banner images you’ll want something closer to the maximum width which is 2500 px, 2000 being ideal. For photos within the content of your page, 1000 px is the minimum. For most photo uses, 1000 px is the smallest size you’ll want to upload.

 

01. Banner Images

The first photo you’re likely to want to change on your Squarespace template is the banner image. When I first started building sites, I made a beeline for the banner images.

Depending on the template you’re using, the banner image can either be a simple fix or require some extra effort. The Bradford template falls into the latter category, and I will get to that in just a sec.

First things first! Regardless of what template you are using, you’ll always want to start with a horizontal/landscape image for your banner image.

Note: Not sure what a banner image is? Check out the glossary to find out and discover more helpful terms to help with your website project.

If a vertical/portrait image is used, your beautiful image will become distorted, or blurry. The banner image area is designed to span widths, so when an image is placed in that space, it will stretch itself out to fit.

A vertical/portrait image used in the banner will crop and cut out the top and/or bottom of the image. No bueno!

Choose a high quality horizontal/landscape image that is 1500 pixels (px) wide. Since all Squarespace templates are mobile responsive, you’ll want to consider how your image will appear on mobile devices.

 

Squarespace Banner Image Best Practices:

  • Banner images should be between 1500px - 2500 px.

  • A horizontal/landscape orientation.

  • Minimum of 1500 px wide so it will show up on mobile.



 

02. Product Images

Product images are a bit unique since you’ll want to consider how the product will display in each scenario. Squarespace allows for product images to be displayed a few ways, including:

Primary Images. The primary image is referred to as such because it is the first image that will show. It’s also likely to be the image that pops up when someone searches for your product or brand.

Additional images. Additional images appear on the product page themselves. These are the pics that are often seen beneath the main product image or on the side of it, depending on how you’d like these to show.

If your Squarespace template supports it, an Advanced Product Page will offer features that will allow additional images to appear when hovering over it with your mouse.

Thumbnail images. A thumbnail image is small, and often intended to be small. You’ll find these images organized on product pages and in product blocks.

So, you now have an overview of how images are displayed on a product page. When sizing images in Squarespace, sequentially, you’ll want to ensure that all of your images are the same shape and size.

For example, you’ll want to have product shots that are either all horizontal/landscape or all vertical/portrait. This will help to maintain consistency as well as alignment of your images.

 

Squarespace Product Image Best Practices:

  • Decide on one orientation for your product images - horizontal or vertical.

  • Once you’ve decided, stick with this orientation for all product shots.

  • Like banner images, upload images that are between 1500 px - 2500 px.

  • Where available, select the Advanced Product Page for optimal performance.



 

03. Favicons/Browser Icons

Not sure what it is about favicons but, I get pretty excited about this little aspect of websites, no pun intended. I wrote a whole post devoted to this web feature.

In case you missed it, a favicon is an image of your logo, or other brand specific identifier, that usually has a transparent background and occupies the space in your browser window.

I’m talking about this little guy right here.

Favicons are tiny and powerful.

For further deets on this one, check out this post.

In the meantime, here are a few things to consider when uploading yours!

There will be more on this a little later in the post, so for now I will share that favicons are the one exception to the kind of image file type you’ll want to use for your site.

For your favicon, a .PNG file is an option. Since favicons are on the smaller side, this is the one case where a .PNG file type will not negatively impact your site’s page load time. A downside to .PNG files is that favicons saved as .PNG files will not show up in Internet Explorer.

To ensure that your favicon is visible across all browsers, upload a .ICO file. You can use a favicon generator site like, Favicon to create yours for free.

Though I’ve seen it recommended that a favicon file should be 100 x 100 or 300 x 300 pixels, I’ve had the best results from a 500 x 500 pixel .PNG file. Squarespace will automagically adjust the size for you! This means you will not have to search for a creation tool.


Squarespace Favicon/Browser Icon Best Practices:

  • Use a 500 px x 500 px size file.

  • A .PNG file is ok here, and a .ICO file is best.

  • Favicons are necessary and should not be overlooked.



 

04. Logos

Logos are one of the visual elements in Squarespace that can display differently based on template selection. When selecting your template, you’ll want to consider how you want the end result - your website- to appear, and think of all the visual elements you’re using to create it.

Some of the templates in Squarespace allow for the adjustment of the display height. To do this, head on over to the Style Editor under Design and adjust using the Logo Image Height tweak. You can always access the template guide to discover how the template you’re using or considering will treat your logo.


Squarespace Logo Best Practices:

  • Consider how you want your logo to look when selecting your template.

  • Adjust your logo’s appearance in the Style Editor under Logo Image Height.

  • Start with a larger image vs a smaller image size for your logo.

  • When in doubt, 1500 px minimum, 2500 px maximum.

  • Use the Squarespace template guide to learn how the template displays logos.



 


How to Format Images for Squarespace


 

05. Name your images

By default, your photos will save to your computer with a looong string of numbers like this:

854223761.PNG

Or

534685136 (1). PNG

Before uploading your images to Squarespace, you’ll want to give them a name. And it is important for the naming to take place prior to uploading them.

What should I name my photos” you ask? Great question!

Let’s start with organization. It’s much easier to find spring-collection-red-tunic vs 854223761.PNG, and not just for you but those you’re partnering with to help support and run your business as well as your potential customers. Yes! If someone is searching in Google for a red tunic, guess who’s site may come up?

Yup! Yours! (Which is totally something to celebrate, btw.)

So it isn’t just for your organization and clarity, but it is also for the sake of getting found and showing up in search results. Google doesn’t really care about photo 854223761.PNG but it will want to help others find spring-collection-red-tunic.

Naming your photos will also assist those that are visually impaired and accessing other technologies to search the web. These services can’t determine what a long string of numbers attached to an image is showing and naming it helps others.

All the way around, naming your images is one of best practices you can adopt for your website. It’s something you can easily do where everybody wins!

 

06. Keep it under 500 KB and compress images

This trick of the trade is one of my faves. Head on over to tinyjpg.com and upload your photos. The cute panda will raise his arms when your images has shrunk from big to small.

I heart this site so much that I went ahead and paid for the annual. Upgrading to the premium version ($35 for the whole year) will enable you to shrink files over 5 MB. If your site is photo rich, photographers or editorial leaning sites, consider going in for a paid service, or compress in Adobe Creative Suite.

 

07. Use JPG/JPEG’s instead of .PNG

Unless it is a favicon/browser icon you’re after, always go for JPG’s instead of PNGs. PNG files are BIG. They’re lovely in that the image quality is higher and they compensate for that by taking up a lot of space. Going with JPGs will keep your site running fast and loading quickly, which is super important if you want people to visit and interact with your website.


How to Optimize Images for Squarespace


08. Use abstract images with text overlays and buttons

So images are not competing with text, select images that are abstract. You can even adjust the blur on an image in the photo editor to fade the image out a bit. It will still be present and the focal point will be the text versus the image.

The idea here is that certain photos might be a little awkward. Placing words over a faces in photos doesn’t work out. No matter how many adjustments are made, it’ll still look off, so use abstract photos and let your words do the communicating there.

 

09. Opt for either light or dark images and stay consistent

In my previous post about selecting brand photos and sourcing stock photos for your website, I mentioned that some stock photography sites had dark and moody photos while others had light and airy ones. This is a theme to pay attention to when deciding on which photos to use for your site.

If the majority of the photos that catch your attention are on the lighter side, then continue to select and include these types of images for your site. If you’re leaning toward darker images then a light and airy one will look out of place. To ensure you’re sticking with a theme of all light or all dark, try and gather photos from one source or photographer to ensure your visuals complement each other.

 

10. Skip the blurry image

Selecting high quality images are a must for your website. If you’re just starting out or a branded photo shoot, whatever the reason, is not in the cards right now, go for stock photos. You may even want to consider purchasing a membership to a stock photography site.

There are many sites to choose from, and I’ve rounded up a few of my faves that are both free and paid, so get yourself some fabulous photos to go with your head-turning website. Good photos will make your site, and bad photos can break it.


conclusion


 

Photos and images can make or break your website, so it’s important to ensure they are sized, optimized, and formatted just right. Blurry photos, large files, and missing favicons may send the wrong impression to your intended audience.

There are some best practices you can use to ensure your website looks and functions fabulously! Squarespace offers a variety of tools to help you achieve this, and there are additional sites out there to help you get the most out of your photos.

The steps covered above will take the guesswork and frustration out of putting your website in the best light. Implement them to help make your website a conversion and finely tuned machine that stuns your target clients and customers.


Related Posts


10 Best Practices for Image Use in Squarespace. Photos and images play a huge role in your website, so utilize these tips for clear and easy guidance on how to get it right! This post covers: Squarespace image sizing tips covered in ten steps. Discover how to size images in Squarespace; how to format images in Squarespace; and how to optimize images in Squarespace. Read the post!
10 Best Practices for Image Use in Squarespace. Photos and images play a huge role in your website, so utilize these tips for clear and easy guidance on how to get it right! This post covers: Squarespace image sizing tips covered in ten steps. Discover how to size images in Squarespace; how to format images in Squarespace; and how to optimize images in Squarespace. Read the post!
10 Best Practices for Image Use in Squarespace. Photos and images play a huge role in your website, so utilize these tips for clear and easy guidance on how to get it right! This post covers: Squarespace image sizing tips covered in ten steps. Discover how to size images in Squarespace; how to format images in Squarespace; and how to optimize images in Squarespace. Read the post!
10 Best Practices for Image Use in Squarespace. Photos and images play a huge role in your website, so utilize these tips for clear and easy guidance on how to get it right! This post covers: Squarespace image sizing tips covered in ten steps. Discover how to size images in Squarespace; how to format images in Squarespace; and how to optimize images in Squarespace. Read the post!
squarespace-web-designer-services.jpg

website overwhelm got you down?

I can help! I’m here to bring a fresh perspective to your web design project. Hop on over to my Services page to learn how my experience can deliver the website of your dreams.