Squarespace Image Size: 5 Tips for Superb Site Performance
A well-placed image on a website page is a fantastic way to improve readability, boost brand awareness, and encourage people to buy your products and services.
In fact, adding at least one image to a page can double your conversion rate!
However, it’s easy to get images wrong. Large, poorly optimized photos and graphics can make the user experience on your website worse, meaning your customers are likely to go elsewhere.
Confused about Squarespace image sizes? I’ve put together this guide to help you get the images on your website right.
5 things you can do to optimize Squarespace image size
1. Reduce the file size of your images
The first tip when it comes to Squarespace image size is to reduce the file size of your photos and graphics. That 20 MB hi-res photo might look absolutely stunning, but it will make your website grind to a halt!
While you can upload images up to 20 MB on Squarespace, I recommend keeping them at 500 KB or less.
Later on, I will show that Squarespace automatically creates multiple versions of your images. An easy way to reduce the file size without affecting the quality of the image if it’s extremely large is to reduce the width dimension to 2500 pixels.
You can do this in PhotoShop, Paint, or any photo editor. Alternatively, there are tools you can use to compress and optimize images in bulk. Compressor.io is one of my favorites.
2. Choose the right image format
You can upload jpgs, gifs, and pngs to Squarespace. Choosing the best file format for your photos will mean they load faster and look better.
Jpgs are best for photographs where there is a lot of variation in color
Pngs are best for images that need transparency, like logos
Gifs are best for images that are animated. As an alternative to gifs, you can also use MP4 videos for animations
So take the time to choose a suitable format for your images before you upload them.
3. Don’t overload your galleries
Squarespace galleries are great for showcasing your photos and images, but the more you add to them, the slower they perform.
Squarespace says to treat gallery sections, blocks, and pages like display cases – choose the best images to showcase rather than squeezing everything in!
4. Enable lazy loading
Lazy loading is a technique that only loads elements on a webpage when they’re needed.
For example, imagine you’re on a webpage with lots of photos. Typically, a browser would download all the images at once, causing the page to load slowly. However, with lazy loading, the images are downloaded as the user scrolls down the page.
Now, there is bad news and good news when it comes to lazy loading. The bad news? Lazy loading isn’t a default option on Squarespace – although if you’re a developer, you can make changes behind the scenes to determine when images load.
However, the good news is that you can buy plugins that enable lazy loading for you, like this one from SQSkits.
If you’re on version 7.0 of Squarespace, you can enable Ajax loading on some templates – this offers a similar effect to lazy loading.
5. Check the rest of your page for speed issues
While image size can play a part in how fast your Squarespace site loads, there are a lot of other factors to consider too! If your page speed is slower than you would like, take a look at the following:
Turn on SSL if it’s not on already – it uses a faster protocol that can speed up your site loading time
Reduce the number of blocks on your page. While blocks are great for adding functionality, too many can slow your page down
Get rid of any third-party tracking code that you’re not using
Remove any unnecessary redirects
Minimize the number of fonts you use on your site. This doesn’t just help site performance but makes your site look cleaner and more accessible too!
Use AMP to help blog posts load faster on mobile
Moving to Squarespace 7.1 can also lead to a faster site, just as new developments aren’t being made to templates in Squarespace 7.0
What Squarespace does to make your images load faster
Squarespace does two things to help your photos, logos, and graphics load more quickly.
Firstly, Squarespace automatically resizes your images in multiple dimensions when you upload them. This means it will serve the best-optimized version depending on how web users access your website.
For example, if someone is accessing your website on their mobile phone, they’ll see a smaller image that loads more quickly.
The file dimensions Squarespace uses are:
100 pixels wide
300 pixels wide
500 pixels wide
750 pixels wide
1000 pixels wide
1500 pixels wide
2500 pixels wide
Secondly, Squarespace stores your images in a CDN, or content delivery network. A CDN is a network of global servers that bring data closer to website users.
For example, someone viewing your website in the US will use servers in the US, someone in the UK will use servers in the UK, and so on. This means images will load faster for your website users regardless of where they are in the world, as the data has less distance to travel.
While Squarespace does all it can to ensure your images load a little faster, there are still many things you can do behind the scenes to optimize your images for speed. Let’s take a look at some of them!
Bonus: Make your Squarespace images stand out
A well-optimized picture will make your site load more quickly and help boost your search engine presence. However, there are also lots of other things you can do to make your photos, logos, and graphics stand out!
Here are three of my favorite image customizations:
1. Shape shifting images
Looking for a unique and modern way to make the images stand out on your Squarespace website? This shape-shifting effect will draw people's eyes to your favorite photos and graphics.
2. Change image on hover
Easily create interactive elements on your Squarespace website by showing a block when it is hovered.
3. Rotate images
Stand out with a quirky rotation effect.
Spark Plugin offers over 100 awesome Squarespace customizations, meaning you can enhance your images any way you like. Check out the entire list of customizations available with Spark Plugin.
