We audited a dermatology practice's website last quarter and found a single before-and-after photo on their homepage that was 14.2 MB. One image. Fourteen megabytes. The original photo had been uploaded straight from a DSLR camera — 6000 x 4000 pixels at maximum quality — and embedded at a display size of 600 x 400 pixels. They were loading a billboard-sized image into a postcard-sized container.
That one image was adding 4.3 seconds to the page load time. Their LCP score was failing. Their mobile experience was borderline unusable on anything slower than fiber internet. And they had 23 similar images across the site.
After we compressed, resized, and converted their images to modern formats, the total page weight dropped from 28 MB to 1.8 MB. Load time went from 7.1 seconds to 1.6 seconds. Their LCP passed Core Web Vitals. And within six weeks, their homepage moved from position 12 to position 6 for their primary keyword — without changing a single word of content.
Images are the single largest contributor to page weight on most websites. They're also the single easiest performance problem to fix. And yet, image optimization is skipped on the majority of sites we audit. The gains are sitting right there.
The format you save your images in determines both file size and visual quality. Using the wrong format — or using a 20-year-old format when better options exist — is the most common image optimization mistake we see.
Our recommendation: Use WebP as your default format for all photos and complex graphics. It's supported by 97%+ of browsers and typically delivers 25–35% smaller file sizes than JPEG at equivalent visual quality. Use AVIF where browser support isn't a concern and maximum compression matters. Use SVG for logos, icons, and simple illustrations. Use PNG only when you need transparency and can't use WebP.
Here's what the same photo looks like across formats at comparable visual quality:
Compression is where the most dramatic savings happen. Most images uploaded to websites are uncompressed or minimally compressed. A photo exported from Photoshop at quality 100 is 3–5x larger than the same photo at quality 80 — and the visual difference is imperceptible to the human eye.
The sweet spot: For JPEG and WebP, quality 75–85 delivers excellent visual fidelity at a fraction of the file size. Below 70, you'll start seeing artifacts. Above 90, you're paying a significant size penalty for quality improvements nobody can see.
If you're on WordPress, install ShortPixel, Imagify, or Smush. These plugins automatically compress and convert images to WebP when you upload them. Set the compression to "lossy" at 80–85% quality. This is the single highest-impact plugin you can install for page speed — it runs in the background and requires zero ongoing effort after the initial setup.
This is the mistake the dermatology practice made — and the one we see most often. Your phone takes photos at 4032 x 3024 pixels. Your DSLR shoots at 6000 x 4000 pixels. Your website displays images at 800 x 600 pixels or smaller. Uploading the full-resolution original means the browser downloads a file 10–20x larger than what it actually needs to render.
The rule: Resize images to 2x the maximum display size before uploading. If an image displays at 600px wide on your site, resize it to 1200px wide (for retina/high-DPI displays). Never upload an image wider than 2400px for any purpose — there's no display context on the web that requires more than that.
Combined, these optimizations can reduce total image weight by 85–95%. A page with 5 MB of images becomes a page with 400–700 KB of images — loading in a fraction of the time with no visible quality loss.
Alt text serves three purposes: accessibility (screen readers read it aloud for visually impaired users), context (it tells Google what the image shows), and fallback (it displays when the image fails to load). Despite its importance, alt text is either missing, generic, or keyword-stuffed on most sites we audit.
Empty — Google and screen readers get nothing.
Filename, not a description. Zero value.
Keyword stuffing. Google may flag this as spam.
Descriptive, natural, includes keyword and location organically.
Describes what the image shows. A screen reader user understands the content.
Specific, descriptive, and human-readable.
The rule for good alt text: Describe what the image shows as if you were explaining it to someone who can't see it. Include a relevant keyword if it fits naturally — but only if it fits naturally. If you have to force the keyword in, leave it out. Alt text is a description first and an SEO element second.
Before an image is uploaded, its filename provides Google with a relevance signal. Most images arrive from cameras or stock photo sites with names like DSC_0847.jpg or shutterstock_298374621.jpg. That's a wasted opportunity.
Use lowercase, hyphens between words, and descriptive terms that reflect the image content. This takes 10 seconds per image and provides Google with another relevance signal before the alt text is even evaluated.
Lazy loading tells the browser to only load images when they're about to scroll into view, rather than loading all images when the page first opens. This dramatically improves initial load time — especially on pages with many images below the fold.
Adding loading="lazy" is a single attribute. It's supported by all modern browsers. There's no reason not to use it on every image below the fold. The one exception: don't lazy-load your LCP image (the largest image visible on initial page load) — that image needs to load immediately.
Responsive images serve different image sizes to different devices. A phone doesn't need a 1200px-wide image for a container that's 380px wide. The srcset attribute lets you define multiple image sizes and let the browser choose the most appropriate one:
Mobile users receive the 400px version. Desktop users receive the 800px version. Nobody downloads pixels they'll never see.
Images directly affect two of the three Core Web Vitals metrics that Google uses as ranking signals:
LCP (Largest Contentful Paint): The LCP element is frequently an image — the hero banner, the main product photo, the primary visual. If that image is unoptimized, LCP fails. Google's threshold is 2.5 seconds. An uncompressed hero image on a slow connection can push LCP above 5 seconds by itself.
CLS (Cumulative Layout Shift): Images without explicit width and height attributes cause layout shift — the page content jumps around as images load and claim space. Always include width and height attributes on every <img> tag so the browser reserves the correct space before the image downloads.
Identify your LCP image (usually the hero image or the largest above-the-fold visual). Add fetchpriority="high" to that specific image tag. This tells the browser to prioritize downloading that image over other resources, which can shave 200–500ms off your LCP score. Don't add this attribute to other images — only the LCP element benefits from priority loading.
A 6000 x 4000 pixel JPEG straight from a camera is 8–15 MB. That's the single biggest load time mistake a website owner can make. Resize to display dimensions and compress before uploading — every single time. No exceptions.
PNG is a lossless format designed for graphics, logos, and screenshots with text. Using it for photographs produces files 3–5x larger than JPEG or WebP at the same visual quality. We've seen sites with 50+ PNG photographs — each one 2–4 MB — destroying their page speed. Photos should be WebP or JPEG, never PNG.
Every image needs explicit width and height attributes in the HTML. Without them, the browser doesn't know how much space to reserve until the image loads — causing the entire page to reflow and jump. This directly causes CLS failures, which is a Core Web Vitals ranking signal.
CSS background images can't have alt text, aren't indexed by Google Image Search, and aren't as reliably crawled as HTML <img> elements. If an image contains important content — before/after photos, team photos, facility images — use an <img> tag, not a CSS background.
Blog posts get alt text. Service pages often don't. We audit law firm service pages with 5–8 stock photos, every one of them with alt="" or alt="image". Each of those is a missed opportunity to reinforce the page's keyword relevance and provide accessibility.
Run through this before uploading any image to your website:
For healthcare, legal, and financial services sites, images carry an additional compliance dimension. Before-and-after photos need proper patient consent documentation. Stock photos of medical procedures can create misleading expectations. Team photos with outdated staff listings can raise credibility concerns.
From an SEO perspective, original photography dramatically outperforms stock photos. Google's algorithms have become adept at recognizing stock imagery — the same photo appears on thousands of sites. Original photos of your team, your office, your results, and your community involvement are both more trustworthy (E-E-A-T signal) and more unique (information gain) than any stock photo can be.
The 80/20 of image SEO: Compression and resizing account for roughly 80% of the performance benefit. If you do nothing else in this entire article, resize your images to display dimensions and compress them to quality 80 before uploading. That single habit will make more difference to your page speed — and therefore your rankings — than every other image optimization technique combined.
Images are simultaneously the easiest SEO win and the most commonly ignored one. Most websites we audit are loading 3–10x more image data than necessary, failing Core Web Vitals because of uncompressed hero images, and missing alt text on 50% or more of their images.
The fix is straightforward: resize before uploading, compress to quality 80, use WebP, write descriptive alt text, include width and height attributes, and lazy-load everything below the fold. These steps take minutes per image and produce measurable speed improvements that directly impact rankings.
Not sure how your images are affecting your page speed? Our free SEO audit includes a complete performance analysis — identifying oversized images, missing alt text, CLS-causing elements, and specific optimization recommendations with estimated speed improvements.
Our free audit identifies oversized images, missing alt text, CLS issues, and Core Web Vitals failures — with specific optimization recommendations and estimated speed gains.