Optimizing an image for your website means three things: resizing it to the dimensions it actually displays at, compressing the file so it's as small as possible without looking worse, and saving it in a modern format like WebP instead of a raw PNG or an unedited JPEG straight off a phone. I run every image through this process on every site I build, which is a big part of why those sites load in under a second instead of the 4 to 8 seconds I see on a lot of small business websites when I run a speed check.
It sounds like a small technical detail. It isn't. Images are usually the single biggest thing loading on a page, and getting them wrong is the most common reason a small business site feels sluggish.
What Actually Happens When You Upload an Unoptimized Image?
Most business owners add photos to their site the easy way: take a picture on a phone, upload it straight into the website editor, done. That phone photo is often 3 to 12 megabytes and 3000 to 4000 pixels wide, even though it will display on the page at maybe 800 pixels wide. The browser still has to download the entire file before it can shrink it down for display, so a visitor on their phone is waiting on a file 10 to 20 times larger than what they actually need to see.
Do that with five or six photos on one page, a hero image, a few service photos, a team headshot, and you've built a page that has to move 20 to 40 megabytes of data before it finishes loading. On a good WiFi connection that's sluggish. On a phone with average mobile signal, which is where most local searches happen, it can take several seconds or fail to load smoothly at all.
What Is the Right File Format for a Website Image?
| Format | Best For | Typical File Size | Transparency Support |
|---|---|---|---|
| WebP | Almost everything: photos, hero images, service photos | Smallest, 25-35% under JPEG at equal quality | Yes |
| JPEG | Fallback for very old browsers only | Medium | No |
| PNG | Logos, icons, graphics needing a transparent background | Largest for photos | Yes |
| AVIF | Cutting-edge option, even smaller than WebP | Smallest overall | Yes |
WebP is the right default for nearly every photo on a small business site. It's supported by every browser released in the last several years, and Google's own developer documentation recommends it specifically for the file size savings, which is why I build every site I launch to serve WebP images with a JPEG fallback handled automatically at build time. PNG still has a place for a logo with transparent edges, but using PNG for a full photo, which some website builders default to, produces a file several times larger than it needs to be for no visible benefit.
How Should You Resize and Compress Images Before Uploading?
Two separate steps, and the order matters.
Resize first. Figure out the largest size the image will actually display at on your site, usually somewhere between 800 and 1600 pixels wide for a hero image, smaller for a thumbnail, and resize the file down to that before doing anything else. There's no reason to serve a 4000-pixel image into a spot on the page that's 800 pixels wide.
Compress second. Once it's the right dimensions, run it through a compression pass that strips unnecessary data while keeping the visible quality high. A quality setting around 75 to 85 out of 100 is usually indistinguishable from the original to the eye while cutting the file size substantially. I process every image this way (resize, then WebP compression around quality 80) before it ever ships on a client's site.
If you're doing this yourself on a platform like Wix, Squarespace, or WordPress, free tools like Squoosh (a browser-based compressor built by Google's Chrome team) or TinyPNG can do both steps without needing design software. It's a five-minute habit that pays off every time you add a photo.
Why Does Alt Text Matter for SEO and Accessibility?
Alt text is the short written description attached to an image in your site's code, invisible unless a screen reader is announcing your page to a visually impaired visitor or an image fails to load. I covered the accessibility side of this in do small business websites need to be ADA compliant, but it also does real SEO work on its own.
Google can't see a photo the way a person does. Alt text, along with the filename and surrounding page content, is one of the main signals it uses to understand and index an image, which is part of why Google's own image SEO guidance calls descriptive alt text one of the highest-value things you can do for image search visibility. Write it the way you'd describe the photo to someone on the phone: "Licensed electrician installing a breaker panel in Waco" beats "IMG_4821" or, just as bad, stuffing it with keywords that don't describe what's actually in the frame.
This matters more now than it did a few years ago too. AI engines summarizing a page for ChatGPT, Perplexity, or a Google AI Overview lean on the same structured text, alt attributes included, to describe what a business does and what its work looks like. A page full of unlabeled images gives an AI engine less to work with when it's deciding how to describe your business to someone searching.
How Do Images Affect Core Web Vitals?
Directly, in more than one way. I walked through the three specific Core Web Vitals metrics in Core Web Vitals explained for small business owners, but the short version here: an oversized hero image is the single most common cause of a failing Largest Contentful Paint score, since it's usually the biggest thing the browser has to finish loading before the page counts as "loaded." And an image that loads without a defined width and height can cause the page to visibly jump as it pops in, which tanks Cumulative Layout Shift.
Both are fixable with the same habit: resize before uploading, and make sure your website platform (or your web designer) is setting explicit dimensions on every image tag. This is one of the reasons a slow WordPress or Wix site so often traces back to images specifically, which I've broken down further in why is my WordPress site so slow.
What Mistakes Do Small Business Owners Make Most Often?
In roughly 20 years of building these sites, the same handful of mistakes show up over and over:
- Uploading phone photos straight from the camera roll, full resolution, no resizing, no compression.
- Leaving alt text blank or filling it with the camera's default filename.
- Using PNG for photos instead of a photo-appropriate format, usually a default from an older website builder.
- Re-uploading a replacement photo without checking its size, quietly undoing a fast page months after launch.
- Adding too many images to one page without asking whether each one is actually earning its place.
None of these require design skill to avoid. They require a five-minute checklist before hitting publish.
What Should You Do Next?
- Check where you stand right now. Run my free website speed test and see how your current images are affecting your load time.
- Audit your existing photos. Open your site's media library if your platform has one and look for any image file over 500KB, that's almost always an unoptimized upload worth replacing.
- See what a properly built site looks like. Browse real client examples in my portfolio, including sites I built for roofers and restaurants, and notice how fast the photos load.
- Let me handle it for you. Every site I build gets every image resized, compressed to WebP, and given real alt text as part of the build, no extra charge, covered in the $150 a month with $0 down or $3,500 one-time pricing. Request a free mockup and I'll show you your own business on a properly built site before you commit to anything.
Images are usually the heaviest thing on a small business web page, and they're also one of the easiest things to get right once you know the three steps: resize to the size it actually displays at, compress without losing visible quality, and describe it with real alt text. Most of the slow, image-heavy sites I run into weren't built carelessly, the owner just never had a reason to think about it until now.
