How to Resize Images for Websites (2025 WebP Guide)

What's inside this post: Hide

Your website is gorgeous. Your content is on point. But if your images are bloated megabyte monsters, you're basically asking visitors to go out & grab a coffee while they wait for your pages to load.

And spoiler alert: they won't wait.

I see this a lot with both DIY sites, editing templates, or even business owners updating custom websites after the site launches during maintenance.

Y'all will spend hours perfecting the site design or edits, then you upload massive 5+MB images straight from Unsplash (or worse –your originals from Lightroom or Photoshop!) without a second thought. 😬

But don't worry, I'm not here to shame you. 😂

I'm here to help you understand why this matters and teach you how to fix this shit once and for all!

Why large images actually hurt your website traffic

Let's talk numbers. I'll make it quick ––promise!

ℹ️ Helpful reference tip:
Mbps = megabits per second, which is how internet speed is measured
Megabits ≠ megabytes → there are 8 megabits in 1 megabyte, so internet speeds are actually slower than they sound!

According to Speedtest.net's Global Index, the average global internet speed is around 90 Mbps for broadband and 48 Mbps for mobile. But let's get geeky for a second—fiber users might see 200+ Mbps, cable typically runs 50-100 Mbps, DSL maxes out around 25 Mbps, and standard Dish or DirectTV satellite internet? Often just 12-25 Mbps. Mobile varies wildly from 10 Mbps (3G areas) to 100+ Mbps (5G).

So here's the ugly truth: when someone visits your website, their browser has to download every single image & piece of content on that page. If you've got 20 images at 5MB each, that's 100MB (or 100,000 KB) of data their device needs to process—and that's just the images, not counting all your other content on the page!

To put this into perspective, here's exactly how long those massive images will take to load on different connection types:

Connection Type	Speed Range	100MB of Images	140MB Gallery
Fiber	200+ Mbps	4-5 seconds	6-7 seconds
Cable	50-100 Mbps	8-16 seconds	11-22 seconds
Mobile (Average)	48 Mbps	17 seconds	23 seconds
DSL	Up to 25 Mbps	32 seconds	45 seconds
Satellite	12-25 Mbps	32-67 seconds	45-93 seconds
Mobile (3G Areas)	10 Mbps	80 seconds	112 seconds

Loading times are for images only—doesn't include other page content like text, CSS, or scripts.

But here's the kicker: according to StatCounter, about 59% of all web browsing happens on mobile devices. That means the majority of your visitors are experiencing those slower mobile speeds, making that 17+ second load time a reality for way too many people hitting your site ––if it has those larger images!

The result is pages that may load slower than dial-up internet circa 1999. 😬 And we all know how patient people are these days—so they're not gonna stick around for that. 🫠

Google's been pretty clear about this too—page speed is a ranking factor that's considered when they decide where in search results your site ranks for your keywords and slower sites get buried in search results.

---

SOURCES:

• https://www.speedtest.net/global-index

• https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet

Those chunky images aren't just annoying your visitors; they're also actively hurting your SEO.

---

Thankfully…

Squarespace Now Supports WebP Images (finally!)

This probably flew under the radar for a lot of people: Squarespace recently updated their asset library to support WebP files. This is actually a huge deal, but most people are still uploading JPEGs and PNGs like it's 2015, but the internet has better file formats now that are optimized specifically for web-use to help deal with this quality vs speed issue I just mentioned. 👆🏼

Before this update, you were stuck with using:

1. JPEGs (decent compression, no transparency)

2. PNGs (great quality, but often larger file sizes)

3. GIFs (fine for animations, terrible for everything else)

⚡️ Squarespace Circle Members:

Please go upvote this feature request to make it easier for us to manage our asset library efficiently, and replace oversized images without creating broken or missing images throughout our sites!

Now you can upload WebP files, which are basically the Swiss Army knife of image formats. They're smaller than JPEGs, support transparency like PNGs, and can even handle animation like GIFs. It gives you all the benefits with none of the drawbacks.

Where it gets tricky, is for anyone with an existing website, because you may be sitting on a library full of oversized images that need some serious intervention ––and unfortunately (at least not on Squarespace) the process of replacing the offenders isn’t simple.

Understanding image file sizes:
kb vs mb

Okay, so now you understand the digital-gravity of why image sizes matter, but now you need to know what sizes to aim for. Right? What’s good vs bad.

So let’s break it down:

• Kilobytes (KB): 0 - 1,000 KB

• Megabytes (MB): 1,000+ KB

But first, let's get our bearings on the full spectrum of file size terminology, so you understand where website images should fall in the grand scheme of digital storage:

Abbreviation	Name	Size	Info
kb or KB	kilobytes	smallest	1,000kb = 1MB (ex: a browser icon or app icon)
mb or MB	megabytes	medium	1,000mb = 1GB (ex: a 500 pg e-book)
gb or GB	gigabytes	large	1,000gb = 1TB (ex: 7 minutes of HD video)
tb or TB	terabytes	largest	1,000tb = 1PB (ex: over 100,000 photos)
pb or PB	petabyte	ginormous	1,000pb = 1EB (ex: all data on the internet for a day)

Now that you can see the full picture, here's the tiny sweet spot where website images should live —it's way smaller than you think!

---

Your goal is to keep every single image under 500KB, but ideally under 250KB.

---

Squarespace recommends staying under 500KB per image. SEO experts like Henry from SEO Space say 250KB max. I'm team 250KB, especially if you're running an image-heavy site or a larger site like mine with lots of content across the whole thing.

Think about it this way: if you're trying to stay under 250KB but your images on average are 5MB/ea (that's 5,000KB), you're literally 20 times over the recommended limit. It's like showing up to a big dinner with family/friends and bringing along 20 different desserts for just 10 people. 😂🤦🏼‍♀️

And just like when you leave that party after taste-testing all of that after eating your meal, you’re gonna pass out from the sugar overload ––and your site’s going to pass out too when it tries to load all that. 🤭

How to check your current image file sizes

On Mac, this is ridiculously easy. Open your image folder, click the view options icon, and turn on "Show item info." You'll see the pixel dimensions right under each image thumbnail.

Want the full details? Right-click any image and select "Get Info" (or press Command+I on your keyboard). This shows you the exact file size & dimensions, etc. If you see anything measured in megabytes, we've got work to do!

Pro tip: when you download stock photos from Unsplash—even through Squarespace's built-in stock library—you're getting large but high-resolution files by default. They're beautiful, sure, but they're also website speed killers.

WebP vs JPEG vs PNG
(which format to use & when)

Here’s a quick & easy breakdown of common file formats, and what each of them are good or bad at, for the purposes of your website:

ATTRIBUTES	WebP	JPG	PNG	GIF
smallest file size	✓	✓	✓	✗
maintains quality	✓	✓	✓	✗
Squarespace-compatible	✓	✓	✓	✓
supports transparent backgrounds (optional)	✓	✗	✓	✓
supports animation	✓	✗	✗	✓
best for logos	✓	✓	✓	✗

💡 Important: PNGs can have transparent backgrounds OR NOT (because it supports BOTH & whether it does or not depends on your design), while JPGs can never have a transparent background.

Need more details? Here's a deeper dive into each format:

WebP (new champion)

1. Smallest file sizes while maintaining quality

2. Supports transparent backgrounds

3. Can handle animation

4. Perfect for literally everything

5. Squarespace compatible (finally!)

JPEG (old reliable)

1. Smaller than PNG usually

2. No transparency support

3. Good compression

4. Fine for photos, not great for logos with transparent backgrounds

PNG (quality queen)

1. Excellent quality

2. Supports transparency

3. Often larger file sizes

4. Great for logos and graphics

GIF (animation specialist)

1. almost always huge (2-20mb typically)

2. supports animation and transparency

3. quality is usually terrible

4. only use when you absolutely need animation

---

THE BOTTOM LINE FOR WEB USE:

Source:

https://caniuse.com/webp

Use WebP whenever possible. It's basically better than everything else, in almost every situation, and with 95% global browser support, you don't need to worry about compatibility.

---

Optimal image dimensions and file sizes for websites

Here's my current formula for web-optimized images in 2025:

1. Maximum dimension: 2,000 pixels (width OR height, not both)

2. File size: Under 250KB

3. Format: WebP when possible

4. Quality: 80% (the sweet spot for compression vs. quality)

Why 2,000 pixels? It's large enough to look crisp on high-resolution screens but small enough to keep file sizes reasonable, if using WebP file formats.

Going bigger than that is possibly overkill for web use, though background graphics (images used as a background in sections) can be up to 3,000 pixels max (wide or high).

How to bulk resize images using a free tool

Manually resizing images one by one is about as fun as watching paint dry, or waiting for water to boil, or your coffee to brew if you have a bad hangover. That's why I'm kind of obsessed with PixResize by Square Stylist—it's free, works in your browser, and can batch process dozens of images in seconds. No account needed to use it.

Skip straight to 15:57 to see the step-by-step process!

Here's the step-by-step process:

Step 1: Sort/select images by orientation

Separate your landscape (wider than tall) and portrait (taller than wide) images.

This matters because you'll set different dimensions for the largest edge in each batch.

Step 2: Process landscape images (batch 1)

1. Drag all of your landscape images into PixResize

2. Leave 'Filename Prefix' blank unless you want to rename all your images using whatever you type there

3. Set the width to 2,000 pixels (leave the height blank!)

4. Leave quality at 80% —unless you feel comfortable adjusting

5. Format: choose WebP from the dropdown

6. Keep "maintain aspect ratio" toggled ON

7. Click Process

8. Wait for the green 'success' notification at the bottom (center) of the page

9. Then click Download

Step 3: Process portrait images (batch 2)

1. Drag all of your portrait images into PixResize

2. Set the height to 2,000 pixels (leave the width blank!)

3. Repeat steps 5-9 from above

Step 4: uUncompress the files

1. On a Mac, you can just double-click the .zip file to uncompress it

2. Delete the .zip file once you have the folder with visible files inside (should only take 1-2 seconds after double-clicking the .zip file in step 1!)

3. You'll have 1 .zip file per batch, so repeat for the other .zip file you haven't uncompressed

Step 5: Clean up file names

PixResize adds "processed_" to the beginning of each filename if you left "Filename Prefix" blank. But on a Mac you can bulk rename your files in one go by:

1. Select all the files you want to rename or make changes to

2. Right-click somewhere on that selection

3. Choose "Rename" from the dropdown on the left side of that rename popup

4. Then use the "Replace Text" input field to type "processed_"

5. And in the "Replace with:" input field make sure nothing is there

That fast process will literally 'replace' "processed_" with nothing, removing the addition to the file names all at once.

Best practices for uploading images to Squarespace

Once your images are optimized, uploading them to Squarespace is straightforward, but I do have a few extra tips:

1. Create folders in your asset library to organize your images into related groups (backgrounds, stock photos, blog post images, logos, headshots of me, etc)

2. Drag and drop multiple files at once onto the asset library or use the ‘Upload’ button

3. Don't panic if you see an exclamation mark on the progress icon—refresh the page and your missing images will probably appear, despite the ‘warning’

4. Check the count by selecting one image, then clicking "Select All" to see if the entire group includes everything you just uploaded

Pro tip:
If you want to see file sizes in Squarespace (which are annoyingly hidden), click the three dots next to any image and select "File Details" or double-click on any image in the Asset Library. You'll see dimensions and file size—perfect for confirming your optimization worked, and for getting a larger peek at the image anytime ya want.

Real Results: 5MB Images Reduced to 180KB

Here’s what this process actually accomplishes:

• Before: 4.9MB image (that's 4,900KB)

• After: 180KB WebP image at 2,000px wide

Same visual quality. Same crisp appearance on your website. But the optimized version loads literally 27 times faster.

Multiply that across every image on your site, and you're talking about the difference between a site that loads in 2 seconds versus 30+ seconds. That's not just a better user experience—that's the difference between keeping visitors and losing them to your competitors.🤯

How image optimization improves SEO & user experience

Sweet Brown said it well:
nobody has time for slow websites!

Fast-loading websites aren't just nice to have—they're actually essential for things like:

1. SEO rankings: Google prioritizes faster websites

2. User experience: Nobody waits for slow pages anymore

3. Conversion rates: Faster sites convert better (less people bailing; more people staying!)

4. Mobile performance: Especially crucial for mobile users

5. Bandwidth costs: Smaller images = lower hosting costs + keeps our website platform’s pricing reasonable

Having a website that loads instantly feels professional, intentional, and best of all ––unnoticed. 😂 In other words, it loads so quickly no one notices the speed & they can focus on your content instead.

It’s like you actually know what you're doing. 😉

5 common image optimization mistakes

I see these same mistakes over and over:

• Mistake #1: Uploading images straight from the camera or stock sites without any edits, changes, or optimization

• Mistake #2: Thinking "bigger is always better" for image quality ––nope!

• Mistake #3: Using PNG for everything because "it's higher quality"

• Mistake #4: Ignoring file sizes completely and wondering why the site is slow

• Mistake #5: Not taking advantage of WebP format when it’s available

The truth is, most people just don't know this stuff matters.
They focus on design and content (which are important!) but ignore the technical foundation that makes your online-home a fun & useful experience for your audience.

Step-by-step guide to optimize your website images

For those of you with an existing library of images that need fixing, here's exactly what you need to do right now:

• Start with SEOSpace* (free or paid plans):
  Scan any page on your Squarespace site with this Chrome extension and it'll show you exactly which images are oversized on that page and where they are to quickly swap them out. Even better? It can compress and download optimized versions for you, so you can replace them manually without guessing which images need help.

• Upgrade to SEOSpace’s* DIY plan for site-wide audits:
  Instead of checking pages one by one, for larger sites you can get a complete overview of your entire website's SEO optimization & health score. You'll see specific recommendations for your actual site instead of generic advice.

• Grab my free cheatsheet:
  It has all the technical specs, recommended tools, and even pre-sized Canva templates to help!

• Start with your homepage:
  Use SEOSpace* to scan your most important page first—it'll show you exactly which images are slowing things down and help you fix them.

• Replace strategically:
  You don't have to fix everything at once. Use SEOSpace's* features to tackle one section at a time, focusing on your highest-traffic pages first.

• Batch process new uploads:
  For future images, use PixResize to convert and resize in bulk before uploading to prevent the problem from happening again.

• Re-submit your sitemap:
  After you make a bunch of changes, resubmit your sitemap to Google Search Console so it knows how to change your site’s ranking in search engines!

2 SEOSpace* tutorials to help with this process:

How to use SEOSpace* to find & fix images on your Squarespace website

Skip to 1:16 to see how to submit your Squarespace sitemap to Google Search Console

Best free & paid tools for image optimization and resizing

Beyond PixResize, here are the tools that make image optimization painless:

1. SEOSpace*: a Squarespace-specific SEO tool by Henry Purchase, SEO expert

2. PixResize: Free bulk resizing and format conversion

3. Squarespace Asset Library: Now supports WebP (finally!)

4. Canva: it doesn’t have WebP export options yet, but it does have JPG and PNG options (with transparent backgrounds on PNG or GIF), which you can then convert to WebP with PixResize!

5. Mac Preview: Built-in tools for basic resizing and renaming files

The key is to find a tool or workflow process that doesn't make you want to throw your laptop out the window and pull out all your hair. Bulk or batch processing is your friend here ––and getting into the habit of optimizing images before ya put ‘em on your site.

Start optimizing your images:
grab this free resource!

The crazy thing is, the entire process of optimizing & renaming your images for web takes maybe 2-5 minutes total once you know what you're doing and get the hang of it.

It’ll take a bit longer if you’re also finding existing ‘offenders’ (too-large images on your site) but it’s important to do, despite the time it takes, in order to dramatically improve your website's performance, user experience, and search rankings. So it’s always faster to do this before you add images to your site, not after.

But you don't have to figure it out alone. You can grab a copy of the comprehensive cheatsheet that covers everything we talked about today, plus a bunch of stuff we didn't have time for in this post—like specific dimension recommendations for different types of content, pre-sized Canva templates, and a complete resource list of tools.

Grab the free Image & Video Best Practices cheatsheet here
and stop letting oversized images hold your website back.

Now stop reading and go optimize some images! Your website’s better SEO health score is waiting. 🚀😉

Want more website optimization tips?
Check out this post next for a walkthrough of the cheatsheet info!