How to Optimize Images for Site Speed on Squarespace

Webp.net-resizeimage (22).jpg

One of the best things about Squarespace is how easy it is to edit content. Adding a new team member, updating hero images, and cranking out blog posts are all at your fingertips with this user-friendly content management system (CMS). Given that images are a large part of your site’s content, it’s important to learn how to optimize your images for site speed on Squarespace so your website loads quickly while still looking beautiful.

What Is an ‘Optimized’ Image?

An optimized image typically relates to file size. Ideally, your images are optimized so that large images (like heroes and banners) are 300kb or less and load within two seconds. All other images should be 100kb or less and load in less than a second.

How to Get There

Image Size Matters

First, ask yourself these questions...Where will the image live on your website? Is it a hero or a banner? Is it in a blog post? How much real estate will your picture require?

Hero Images, Banners & Full-Width Galleries :: Shoot for around 1440 pixels wide. Let the height auto-size since most hero/banner images have their height set by the design.

Featured Blog Image :: 800 x 600 pixels are recommended for a featured image if it’s in line with the blog text. For a featured image that acts like a hero, try 1440 by 520 pixels.

Thumbnails :: For grid layouts, use 640 pixels wide. For a stacked layout, set a max width for the images and size them accordingly.

Inline Images & Inline Galleries :: Any inline images should be sized according to how much space the will take up on the page. If they are half the page, go for 960 pixels wide. If they are a third or a quarter of the page, 640 pixels wide. Why this large? It’s likely your site breaks down to mobile at 640 pixels--so that is the minimum size any image should be.

Quality Is Key

Another important factor in optimizing your images for site speed is image quality. You can adjust an image’s quality anywhere from 60% - 10% and it will still look great on your website.

Hero Images, Banners & Full-Width Galleries :: Usually 30%, but try going as low as 10% for images that have a lot of detail. Remember, these are the heaviest images and the first to load on your pages, so you want them to be less than 300kb.

Featured Blog Image :: 60% is fine. If you can push it to 30%, go for it. Every killabyte matters.

Thumbnails :: 30% for these little guys.

Inline Images & Inline Galleries :: 30% - 60% depending on the size. Most of these should be fine at 30%.

Wondering how you resize and adjust the quality of your images? We recommend using your computer’s built-in photo editor or any of the sites below:

Following these guidelines will help your site load quickly without compromising quality. Optimizing images is one of the best practices you can do to maintain your site. If you have questions about optimizing images on your site, reach out to Bigfoot Web. Otherwise, we look forward to seeing all of your optimized images!

Bigfoot Web