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 around.

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 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!

Part 1: How to Optimize Images BEFORE Uploading to Your Website (easy!)

PART 1

Part 2: How to Optimize Images AFTER Uploading to Your Website (hard)

PART 2

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.

---

Doesn’t Squarespace convert these images for us?

This is a great question ––and the answer is NO. Not yet. I asked Squarespace Support about this exact thing because I was under the same impression you are if you’re asking this question, that their new conversion process released this summer (2025) intended to help us convert images from JPG or PNG to WebP would do the job for us... but that is not the case.

As of fall 2025, the conversion is still new & Squarespace Support told me specifically on August 26, 2025:

I asked: "Can you tell me whether the new WebP feature released might help with this? (ie: is Sqsp resizing &/or converting existing images for us now that WebP is available?)

They said: "So the WebP format helps to reduce loading time within Squarespace sites, and it may help out, but it doesn't adjust the file size of it, it just converts it. I'll share our guide for reference: https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-images-for-display-on-the-web#h_01JZQN7QNZ54XGKX62402VC846"

And the Help Center article they shared, says:

“When you upload an image to Squarespace, we convert it to the WebP format and display that version in your site content. The original file remains in your asset library, and any edits made to the file will apply to any WebP versions on your site. You can also upload WebP files directly to your site.”

So at least for now (until that changes) they ARE NOT also resizing or optimizing the image files, only converting them.

As a result, the converted WebP file size may still be too large (larger than recommended to use on websites) if the original file size was huge to start with, because some file size reduction may occur during the conversion, but it won't change the dimensions of the image itself, which is part of what reduces the file size for the image. So if the image was already too large to start with, then this process is still a must!! 🫠

Example: Converted vs Optimized Images

View fullsize

my screenshot of the actual files while testing this theory

• I downloaded a random horizontal/landscape image from Unsplash which downloaded at 3358 pixels wide by  2239 pixels high.

• I tried 3 different methods to optimize it, to see which produced the best result:

  • 1️⃣ converted it from JPG to WebP with PixResize, without changing the dimensions, and keeping the quality at 100% = resulting file was LARGER than the original

  • 2️⃣ converted it from JPG to WebP with PixResize, without changing the dimensions, and adjusting the quality to 80% = resulting file was SMALLER than the original, but still above recommended file size

  • 3️⃣ converted it from JPG to WebP with PixResize, changed the width to 2000px, and adjusted the quality to 80% = resulting file was under recommended file size limit for web

Optimization Method	Format	Quality	Dimensions	File Size	Result
Original Image	JPEG	Original	Original size	1 MB	Starting point
Convert to WebP only	WebP	100%	Same as original	4.6 MB	Largest file (avoid!)
Convert + reduce quality	WebP	80%	Same as original	866 KB	Better, but still too big
Convert + reduce quality + resize	WebP	80%	2000px max	163 KB	Perfect for web!

Key takeaway: Converting to WebP alone isn't enough—you need to optimize quality AND dimensions for the best results.
Source: Images in this example were processed with PixResize.

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 optimize images, step-by-step

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!

How to optimize new images for your website

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: Uncompress 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.

How to optimize existing oversized images for your website

Already have images uploaded to your website that need fixing?
This process helps you identify and replace oversized images without having to guess which ones are problems:

Step 1: Scan your website with SEOSpace*

1. Use the SEOSpace Chrome extension on the page you want to check (or, if your plan allows, run an audit on the entire site)

2. Go to the page you want to work on, then click the SEOSpace extension icon in your browser

3. Select "Scan without keyword" for a faster general scan, or “Scan with a keyword” for a more in-depth result

4. Wait for the scan to complete and review your suggestions

Step 2: Identify oversized images

1. Click on the "Images" tab in the SEOSpace results

2. Look for images with file sizes over 250 Kb to 500 Kb (anything showing MB or over 1,000 Kb is too big)

3. Note which images show concerning file sizes (like the 2,318KB example from my demo)

Step 3: Download & optimize problem images

1. Select the oversized images you want to fix

2. Click the "Compress and download" button at the bottom of the list of oversized images, or selectively download individually from the “Compress & download” icon on each image

3. SEOSpace will automatically optimize and download those images for you

4. Wait for the download to complete - they will download individually, one at a time, no matter which option you chose (bulk or individual selection)

Step 4: Review optimized files

1. Sort the files by size and review the new file sizes; they should be significantly smaller (like 250 Kb vs 2,318Kb)

2. ⚠️ Notes:

   • SEOSpace downloads these images as a JPEG format during optimization.

   • Since SEOSpace isn’t also converting the images to WebP, any PNGs will lose their transparent backgrounds in this process when converted to JPGs, and will need to be optimized from the original file not in Squarespace or downloaded from SEOSpace, to avoid ‘filling’ in that background color with white or black.

   • If you need transparent backgrounds preserved, use the PixResize method above instead.

Step 5: Replace images in Squarespace

1. Navigate to the specific website page or asset library location where the oversized image lives

2. Remove the old oversized image from its current location on the website page

3. Upload the newly optimized image(s) in its place, to replace the old oversized version(s)

4. Remove the old oversized image from the Asset Library too, so you won’t accidentally re-use it

5. Save your changes and refresh the page to verify the replacement worked

Step 6: Clean up your asset library

1. Search for any original oversized files in your asset library by filename (if you know it)

2. Delete the old versions to prevent accidental reuse

3. Check that deleting them doesn't break other instances where that image was re-used

4. If you find any broken images that you know you’ve fixed, clear your browser’s cache & cookies for the past 24 hours & refresh the page or visit that page in a private/incognito window to double check whether the replacement worked

⭐️ Pro tips:

1. Start with your most important pages (homepage, services, contact) rather than feeling overwhelmed by trying to fix everything as fast as possible.

2. Once you’ve worked through those pages, then check your most high-trafficked pages (pages with the most views or visits)

3. Once you’ve worked through those popular pages, then use your site-audit scan with SEOSpace to check the pages with high or low scores & fix them one page at a time.

4. Remember: this process is more time-consuming than optimizing before upload because you have to go track them down to replace them one-by-one, so use the PixResize method above for all future images to avoid this extra work!
   
   
   

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.🤯

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.

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 &/or most high-traffic pages 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!
  

SEOSpace* tutorials to help with this process:

At 15:06 I show you how I use SEOSpace to find, download & optimize oversized images

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

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

How image optimization improves SEO & user experience

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 most 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.

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!