image optimization: the fastest way to speed up your website

if your website is slow, images are the most likely culprit. specifically: images that are much larger than they need to be, in formats that browsers have to work harder to display, or served from locations that take time to reach.

the good news: image optimization is the highest-impact, lowest-complexity performance improvement available on most small business sites. here's how to do it.

why unoptimized images are so damaging

a photo taken on an iphone 15 is typically 3–8 megabytes. a headshot from a professional photographer might be 10–20 megabytes in the original file.

your website visitor is downloading that image every time they load your page. over a mobile connection, a 5mb image alone can take 5–10 seconds to load. if your homepage has eight of these, you see the problem.

the rule of thumb: no image on a website should be larger than 300kb for a full-width hero image, and most smaller images should be under 100kb.

the webp format: what it is and why it matters

jpeg and png have been the web's dominant image formats for decades. webp is a newer format developed by google that achieves similar visual quality at 25–35% smaller file sizes than jpeg and up to 70% smaller than png for many images.

browser support for webp is now nearly universal (all modern browsers on ios and android support it). switching your images to webp is one of the easiest file-size wins available.

if you're building a new site, specify webp for all images at the start. if you have an existing site, converting your images to webp as part of an optimization pass makes a measurable difference.

the right tools for the job

for quick, one-off optimization:

• squoosh.app — free, browser-based, excellent quality control. upload an image, choose webp, adjust quality (85% is usually the sweet spot), download. simple and effective.
• tinypng.com — free for up to 20 images, handles png and jpeg compression well.

for wordpress users:

• shortpixel — compresses images automatically as you upload them. free tier for up to 100 images/month. paid plans are cheap.
• imagify — similar to shortpixel, good webp conversion, easy setup.
• smush — popular free option, though the free tier doesn't convert to webp.

for next.js and modern web apps: next.js has built-in image optimization via the <Image> component. it automatically serves webp to browsers that support it, resizes images to the displayed size, and lazy-loads images below the fold. using it correctly handles most image optimization automatically.

responsive images: serving the right size

an image displayed at 300px wide on a phone shouldn't be the same file as the image displayed at 1400px wide on a desktop. serving a large image to a phone is wasted bandwidth.

responsive images use the srcset attribute to tell browsers to download only the size they need. a properly set up site serves:

• a 400px-wide image to phones
• an 800px-wide image to tablets
• a 1400px-wide image to large monitors

for most small businesses, this is handled by their theme (wordpress) or framework (next.js) if configured correctly. if it's not being handled, it's worth addressing.

lazy loading: only load what's visible

images below the fold — below what's visible on screen without scrolling — don't need to be loaded until the visitor scrolls to them. "lazy loading" defers this loading, which means the initial page load is faster because it's only loading images the visitor can currently see.

on modern wordpress themes and next.js, this is often on by default. you can verify by looking for loading="lazy" on img tags in your page's source code.

how to check if images are your main problem

in chrome: open your site, right-click → inspect, click the "network" tab, reload the page. look at the list of files loaded and sort by "size." if images are dominating the top of that list and they're large (over 500kb each), you have a clear problem.

alternatively, run your site through pagespeed insights. if it lists "serve images in next-gen formats" or "properly size images" in the opportunities section, images are a priority.

the typical result of a proper image optimization pass on a small business site: load time drops by 30–60%, pagespeed score improves by 10–30 points, mobile experience meaningfully faster. it's often the single best-value improvement available.

nanushi includes image optimization in all site builds and can audit existing sites for quick performance wins. reach out if you'd like help.