Pictures are a crucial element of designing a good website. They’re a perfect tool for showcasing your products and services and giving potential customers a glimpse into your company culture. So, obviously, you want your pictures to look good and fit properly into your website. But on a more technical level, the appearance and sizes of your images matter because they change the size of the page overall, which has an impact on your SEO. 

The larger the images, the longer they, and the page they’re on, take to load. That delayed load time will lead to a higher bounce rate, as will images that are so big that they crowd the page and make users scroll to find the information they actually need.

In other words, it’s more important to optimize your images than you might think! You want them to look as good as possible without overextending your pages or overworking your website. So today, let’s look at how you can optimize your images for Squarespace and why preparing them to upload isn’t as daunting as you might think.

Squarespace and Responsive Design

Squarespace optimizes websites and all their elements through their built-in “responsive design” system. In short, responsive design resizes your web pages and images based on whatever screen the person viewing them is using. For example, if you edit your website to look perfect on your desktop computer, Squarespace will reformat it when you pull it up on your phone so it looks perfect there too.

Responsive design makes it easy to format your images because rather than having to submit different sizes of all your pictures and graphics, Squarespace will do it for you. But in exchange for not having to take those extra steps, you do have to be more careful with the dimensions of the images you upload. Even if they look good on one device, you have to make sure that they’re big enough and shaped properly to fit into every device.

Optimal Sizes For All Types of Pictures

Now that you know how Squarespace’s responsive design works and how it affects your images, let’s look at some specific rules and recommendations for uploading pictures to your website and making them look good.

In-Page Images

Ideal Size: 1500px on the longest side; no larger than 500KB.

One of the things we love about Squarespace is how much creativity they give to designers. However, that doesn’t mean there aren’t rules and guidelines for the types of content you can upload, particularly with images.

For starters, Squarespace won’t let you upload images larger than 20 megabytes, but they recommend only using image files 500 kilobytes or smaller to ensure the massive pictures don’t bog down your page’s load times. They also limit the maximum resolution of your photos to 120 megapixels and strongly recommend not uploading images smaller than 1,500 pixels wide.

Squarespace automatically resizes images wider than 2,500 pixels, so you won’t need to resize them as long as they match the criteria above.

Banners 

Ideal Size: 2500px wide; no larger than 500KB.

Squarespace recommends sizing your banner images between 1,500 and 2,500 pixels wide, though we always suggest aiming for the higher end of that range. 1,500-pixel images might look fine on most desktops and mobile devices, but they will appear fuzzy on higher-resolution monitors. That said, Squarespace caps its pixel widths at 2,500, so there’s not much point in aiming beyond our recommended range.

Thankfully, you have more flexibility in the height of your banner images. There isn’t a specific pixel range Squarespace recommends aiming for, but as long as your banners are wider than they are tall, they’ll look good. 

Icons

Ideal Size: Anywhere between 150 x 150 and 300 x 300 pixels.

Your icon images should be equally wide and tall. We recommend setting the dimensions at either 150 pixels by 150 pixels or 300 pixels by 300 pixels. Your icons shouldn’t take up much space on the page but should be large enough to see clearly.

favicons

Ideal Size: 70 x 70 pixels.

Favicons, also commonly called browser icons, are tiny images that show up in your browsers bookmarks or in the corner of your active tabs. These images are visual representations that your tabs or bookmarks lead to your website, so in most cases, your favicon upload should be your brand logo. Favicons should be pretty small, so we recommend a 70 pixel by 70 pixel file size at max.

How We Resize Images For Websites

When we have pictures that are too big to load into a Squarespace website, we like to use TinyPNG to shrink them into a more manageable file size. TinyPNG removes unnecessary image data from files to decrease the file size without making the picture look much worse.

Optimizing images for Squarespace isn’t as daunting as it might feel. As long as you know these recommendations and guidelines, your pictures will load quickly and look perfect on all devices.