Choosing the Right Image Size for Squarespace
Have you ever uploaded a crisp photo to Squarespace, only for it to turn out too blurry on the website? Chances are, you’re using the wrong image size. The reality is that the size of the images you upload in Squarespace have a major impact on how your website turns out. Proper image dimensions help you make sure your site loads quickly and looks sharp across devices. So, if you want your website to look great, learn about how to choose the right image size for Squarespace in this blog post. Keep reading!
Ideal image sizes for Squarespace
Squarespace creates seven different versions of the images you upload to your website, each with different widths, while the height of the image will change relative to the width. And since Squarespace comes with a built-in responsive design, it will choose the image size based on the screen size of your visitor. The widths are:
100px
300px
500 px
750 px
1000 px
1500 px
2500 px
With this in mind, in general, the best image size to upload to squarespace is 1500px or more in width. Images smaller than this can end up looking blurry and you won’t have access to the full range of resized images Squarespace automatically creates.
For more specific image size recommendations, read below!:
Best image size for banners: 2500 pixels wide
Best image size for logos: 100px to 500px wide
Best images size for favicons: 100px by 100px
Best image size for regular images: 1500px wide
Best image file types for Squarespace
While image size has a big impact on how the photo ends up looking on your website, the file type also matters. There are two static image file types you can upload to Squarespace — a PNG file and a JPEG file. When should you use each one?
When to use a JPEG file
For most images, especially ones with a lot of color and details, it’s typically best to use a JPEG image family type.
It’s also better to use JPEG image files if you’re creating a gallery of pictures, as they typically have a faster loading time.
When to use a PNG file
It’s best to use a PNG file when you're using an image with text because PNG files keep their sharpness when compressed, while a JPEG file becomes blurrier.
Use a PNG file if you have an image with a transparent background as those are not supported by JPEG files.
Use a PNG file for logos and illustrations, as they’re better at keeping lines sharp.
The third image file type available in Squarespace are GIF files, which you would use to display short animations.
Ideal image file size
Of course, you’ll also want to make sure your images also load quickly. While Squarespace offers a 20 MB limit for each file, to keep your website loading fast, use images that are 500 KB or smaller.
If you’re creating a page with multiple images, just make sure that the page itself doesn’t go over 5 MB so that your site continues to load quickly.
How to create images with the right dimensions
Canva is one of the best tools to create images with the exact dimensions you need. Here’s how to do it.
Start by selecting Create a Design and choose Custom Size. Enter the exact dimensions recommended by Squarespace, in pixels. Once your design is ready, download it as a PNG or JPEG file. And that’s it!
Other best practices for images in Squarespace
Now that you know how you should be sizing your images in Squarespace to get the most beautiful, clear results. Don’t forget to implement these best practices on your website!
Include an alt tag: Always add descriptive alt text to your images. This not only improves accessibility but also helps search engines understand the content.
Make sure to name the image file: Use clear, descriptive file names for your images. Avoid generic names like “IMG1234”; instead, name them based on their content or purpose.
Make sure it loads correctly: Double-check that your images load properly on all devices. Broken images can hurt user experience and your site's credibility.
Optimize for mobile: Since almost 60% of web traffic comes from mobile devices, you need to make sure your images also look good on mobile. Squarespace will automatically change the size of your images on mobile, but you’ll still want to make sure the image displays what you want. For example, since banners are so large, they are typically cropped on mobile devices and may not be displaying what you want.
Want to learn more?
Hopefully, this blog has given you everything you need to know about image sizes in Squarespace. But do you need more help? You can learn more about Squarespace, design, copywriting, SEO, and more on the blog! Here are some of our favorites!
Blogging vs social media: Which is better?
6 tips for writing website headlines that convert
130 Instagram caption hooks for your next post
40+ ways to increase your blog traffic
