The best way to compress images for Websites

Written By Christina Dean

How to compress images

Let's chat about images on your Squarespace website. They're not just nice to look at; they're an absolutely crucial part of your website's performance and your visitor's experience. Uploading oversized images to your site is a bit like wearing shoes that are three sizes too big… you just shouldn’t do it. I’m going to share the best ways I’ve found to compress images for websites.

Here's why image optimization is so important (and often overlooked, especially if you're going the DIY Squarespace route):

  • Website Speed: Large images = slow website. And a slow website is a visitor repellent. People are impatient; they'll click away faster than you can say "buffering."

  • SEO Goodness: Google (and other search engines) favor fast websites. Optimizing your images is like giving your site a speed boost, which can help it rank higher in search results.

  • Happy Visitors: A sluggish website can frustrate your visitors. We want them to have a smooth, enjoyable experience so they can focus on your awesome content, not on watching a loading bar.

  • Professionalism: A fast, well-functioning website reflects well on your brand. It shows you're detail-oriented and care about providing a quality experience.

So, what does "optimizing your images" actually mean? It's all about making them web-friendly:

  • Making the file size smaller (so they load quickly).

  • Using the right format (so they look good).

  • Naming them descriptively (so search engines know what they are).

  • Adding alt text (for accessibility and SEO).

It might sound like a lot, but trust me, once you get the hang of it, it'll become second nature.

Resizing and CompressinG

The biggest culprits behind slow websites are often images that are simply way too big. This is often because people will upload high resolution files that took AMAZING, maybe even from brand photoshoots — but we need to resize them and compress them. Think of your website like a recipe. You need all the right ingredients in the right proportions for it to turn out perfectly. Images are a key ingredient, but if they're too large, they throw off the whole balance, making the site load slowly. We're optimizing them to get that perfect blend of visual appeal and performance. Google doesn’t like when websites are loaded with massive images and we want Google to love our website if we hope to get found.

General Guidelines:

  • Resizing: Aim for these dimensions:

    • Banner images: No wider than 2000-2500 pixels.

    • Most other website images: 500-1500 pixels wide.

  • File Size: Keep things lean:

    • For banner images or large visuals: Under 500KB.

    • For general website use, a target of 100-400 KB is recommended.

    • For smaller images (like blog post screenshots): Aim for 10-300KB.

The goal is always to get the file size as small as possible without sacrificing image quality. We want them to look crisp, not pixelated or blurry.

How to Actually Do It: Tools of the Trade

Here's how to resize and compress your images using tools you probably already have or can easily access:

Resizing:

  • Mac: Preview

    • Open your image in Preview.

    • Go to Tools > Adjust Size.

    • Enter the pixel width (use the guidelines above) and make sure "Scale proportionally" is checked. You’ll see a total KB number at the bottom, and that will tell you if you’re in range. Keep scaling the width of your image down until you are in the recommended range.

  • Windows: Paint/Photos

    • Open your image in Paint or Photos.

    • Use the resize option to set the pixel dimensions, and ensure the aspect ratio is locked to prevent distortion.

Compression (for both Mac and Windows):

  • Online Compressors:

    • Image compressor tools like TinyPNG , Optimizilla, and Compressor.io are your friends. Just upload your resized image, and they'll work their magic to shrink the file size. Easy peasy. *Be sure to reality check the post-compression sizes before uploading to your website.

A Note on File Formats:

  • .JPEG (.jpg): Your go-to for most photos. They compress efficiently and look great on the web.

  • .PNG: Best for images that need to be transparent (like logos) or those with sharp edges (like illustrations).

  • .SVG: Ideal for logos and icons.

Beyond Size: Naming and Alt Text

Optimizing images isn't just about size; it's also about helping search engines understand what your images are and making your site accessible.

  • Naming Your Images:

    • Before you upload, give your image a descriptive filename. Instead of "IMG_4728.jpg," use something like "your-business-name-location-service-photo.jpg". Use hyphens (-) to separate words. You don’t want these to be too long. Stick to no more than 5 words and don’t “keyword stuff” (ex: if the image was an apple, I wouldn’t want to say “Christina-Dean-Squarespace-Website-Designer-SEO-apple.jpeg” — it should say “red-apple-wood-cutting-board.jpeg”. Google is savvy and knows when you’re trying to work the system. Just play by the rules and you’ll be fine as kind.

  • Adding Alt Text:

    • Alt text is a short description of the image. It's crucial for screen readers (for visually impaired users) and also helps search engines understand the image.

    • In Squarespace, you can add alt text in the image block settings if you want to do this manually… OR….

    • Squarespace recently released a fabulous new tool to handle ALL of your alt text for images in one easy space, using AI. Head to your Settings panel —> Marketing —> SEO Appearance —> You’ll see Your SEO Completion Score, then “Improve with AI”. Follow the steps to complete alt text for all your website images. It’s super fast and makes a huge difference on your site.

    • Write clear, concise descriptions. Example: "A bright and airy yoga studio with people in a vinyasa pose."

Why This All Matters (Even Before You Launch)

Optimized images =

  • A faster website

  • Happier visitors who stick around

  • Better search engine visibility

  • A more professional online presence

  • An accessible website for everyone, including those who use screen readers.

Basically, good images make a big difference, and optimized images make sure they're working for you, not against you.

Image Optimization Checklist:

  • Choose the right format (JPEG for photos, PNG for transparency/sharp lines, SVG for logos/icons).

  • Resize your images (1500-2500px wide for most images).

  • Keep file sizes under 500KB (ideally closer to 250KB).

  • Name your image files descriptively (and don’t keyword stuff!)

  • Add descriptive alt text to every image.

Follow these guidelines, and you'll be well on your way to a faster, more effective Squarespace website.

  • Image compression is crucial for several reasons that directly impact your website's performance and user experience. Oversized images lead to slower loading times, which can frustrate visitors and cause them to leave your site. Search engines like Google also favor fast-loading websites, so optimizing your images can improve your search engine rankings (SEO). Additionally, a professional-looking website that loads quickly reflects well on your brand and provides a smoother experience for all visitors, including those using screen readers.

  • For optimal performance on Squarespace, aim to resize your banner images to no wider than 2000-2500 pixels. For most other website images, a width of 500-1500 pixels is recommended. In terms of file size, try to keep banner images or large visuals under 500KB. For general website images, a target of 100-400KB is ideal, and for smaller images like blog post screenshots, aim for 10-300KB. The goal is always to achieve the smallest possible file size without compromising image quality.

  • Beyond resizing and compressing, two key optimization steps are naming your image files descriptively and adding alt text. Before uploading, rename your images with clear, concise descriptions using hyphens (e.g., "red-apple-wood-cutting-board.jpeg"). Avoid keyword stuffing in filenames. Alt text is a short description of the image that aids screen readers for visually impaired users and helps search engines understand your image content. Squarespace offers an AI tool under Settings > Marketing > SEO Appearance to help you quickly generate alt text for all your website images.

 

This article was written by Christina Dean, a Squarespace website design and SEO expert. Christina creates powerful websites that blend tasteful design aesthetics with strategic SEO frameworks to ensure your website becomes your hardest working employee. Need a site that isn’t just nice to look at, but actually converts clients? Book a free call today!

Christina Dean