Image SEO: The Complete Guide to Optimizing Every Image
How to turn images from your heaviest liability into a traffic source — compression, alt text, formats, filenames and image search.
Images are the split personality of web performance: the fastest way to make a page compelling and the fastest way to make it slow. They routinely account for half of a page's total weight — and yet most sites upload camera-fresh photos, name them IMG_4032.jpg, skip the alt text, and wonder why both their speed scores and their image-search traffic look grim.
Fixing this is unusually mechanical. Image SEO is a checklist, not an art form — and every item on it takes minutes with the right free tools. Here's the complete list, in the order that matters.
Size before anything else
The cardinal sin is serving images larger than they display. A 4000-pixel photo squeezed into a 800-pixel column wastes megabytes on pixels nobody sees. Resize first — the Image Resizer handles batches to exact dimensions — targeting roughly 1.5–2× the largest display width (for retina screens) and no more. Full-width hero images rarely need more than 1600–2000px; in-content images, 800–1200px.
Not sure how heavy your pages currently are? Run one through the Page Size Checker — it inventories every resource and, on most sites, images dominate the "heaviest files" list embarrassingly.
Compress like you mean it
After sizing comes compression, and this is where the dramatic numbers live: a typical photo shrinks 60–80% at quality 75–85 with no visible difference. Drop your images into the Image Compressor & WebP Converter, set quality around 80, choose WebP output, and download files a fraction of their original weight. Everything runs in your browser — no upload limits, no privacy questions.
Why WebP? It's the modern default: 25–35% smaller than equivalent JPG, transparency support like PNG, universal browser support since 2020. If a workflow demands classic formats, the PNG ⇄ JPG ⇄ WebP Converter moves between all three in bulk.
Name files like a librarian
Google reads filenames for context. blue-suede-chelsea-boots.jpg tells a story; DSC01847-final-v2.jpg tells nothing. The habit: rename before upload, lowercase, hyphens between words, honest description. Converting a title into a clean filename is exactly what the Slug Generator does — paste, copy, rename.
Alt text: the highest-value 125 characters
Alt text serves three masters at once: screen-reader users who can't see the image, Google Images deciding what you're picturing, and browsers when files fail to load. Write it as if describing the image over the phone — specific, brief, natural. "Golden retriever puppy asleep on a blue couch" beats both "" and "dog puppy cute dog couch dog."
Working through a backlog? The Alt Text Generator drafts descriptions from your filenames and page topic in bulk — a starting point you edit rather than a blank page. Rules of thumb: under 125 characters, no "image of…" (that's implied), keyword only when genuinely descriptive, and empty alt="" for purely decorative flourishes so screen readers skip them.
Stop the layout from jumping
Every image without declared dimensions is a layout shift waiting to happen: the page renders, the image arrives, everything lurches. That lurch is Cumulative Layout Shift — a Core Web Vitals metric with direct ranking consequences. The fix costs nothing: width and height attributes on every img tag (browsers reserve the space before the file arrives). Computing the numbers for responsive layouts is what the Aspect Ratio Calculator is for.
Pair dimensions with native lazy loading — loading="lazy" on everything below the fold, never on the hero. Check your CLS in the field with the Core Web Vitals Monitor.
Winning actual image-search traffic
Beyond hygiene lies opportunity: Google Images is a search engine of its own, and certain niches — recipes, DIY, fashion, product comparisons, infographics, charts — pull serious traffic from it. To compete there: place images near relevant text (Google reads surrounding context), use descriptive captions where natural (captions get read at far higher rates than body text anyway), ensure images are indexable (not blocked in robots.txt, not injected via CSS backgrounds), and consider an image sitemap for image-heavy sites.
Original images outperform stock photos meaningfully — Google can recognize the same stock image across ten thousand sites, and originality is a differentiator. A phone photo of your actual work beats a polished stock photo of someone else's.
Social images are image SEO too
The image that appears when your page is shared — the og:image — drives click-through from every social platform and messaging app. Design it at 1200×630 with the OG Image Generator, verify the markup with the OG Preview tool, and size platform-specific versions using the Social Media Image Sizes reference.
Advanced: responsive images and CDNs
Once the basics are habitual, two upgrades separate fast sites from very fast ones. Responsive srcset: instead of one image for all screens, provide several sizes and let the browser choose — a phone downloads the 480px version while a desktop gets 1600px. The markup looks intimidating but follows a fixed pattern, and most CMSs (WordPress included) generate it automatically once your uploaded images are properly sized. Batch-generate the size variants with the Image Resizer. Image CDNs: services that resize, convert and compress on the fly per visitor, serving AVIF to browsers that support it and caching at the edge. For image-heavy sites they're transformative; for a modest blog, well-executed basics achieve ninety percent of the result at zero cost.
A diagnostic habit worth keeping: after any redesign or plugin change, re-run your key pages through the Page Size Checker. Themes have a talent for silently reintroducing 2MB hero images.
Screenshots and graphics: the forgotten half
Photo advice dominates image SEO, but half of many sites' images are screenshots, diagrams and UI graphics — and they follow different rules. Screenshots live or die on text legibility, which JPEG compression destroys first: keep them PNG or lossless WebP, capture at the display resolution you'll show (retina captures downscaled look crisper than upscaled small ones), and crop aggressively — a full-desktop screenshot showing one relevant button teaches nothing and costs plenty. For diagrams and charts, consider SVG where your platform allows: infinitely sharp, usually tiny, and its text is real text that search engines can read. Annotation discipline matters too — arrows and highlights burned into the image can't be updated when the UI changes, so keep annotated originals in an editable format. And alt text for functional images is its own craft: describe what the reader needs from it ("Settings page with the Privacy tab highlighted"), not its appearance ("screenshot of a webpage"). Instructional content that nails screenshot hygiene reads as dramatically more trustworthy — and re-ranks accordingly when how-to queries compare you against blurrier competitors.
The mistakes that quietly undo image SEO
Watch for these recurring traps: CSS background images for meaningful content — Google doesn't index them as images, so product shots and infographics belong in img tags; text baked into images — headlines rendered as graphics are invisible to search and screen readers alike (use real text over the image instead); decorative images with keyword-stuffed alt text — pure decoration should carry empty alt="" so assistive tech skips it, and stuffing reads as spam; hotlinking other sites' images — you inherit their slowness and their right to swap the file for anything; and re-compressing already-compressed files — each JPG generation loses quality, so keep originals and compress once from source.
The workflow, condensed
For every image, in order: resize to display dimensions → compress to WebP at ~80 → rename descriptively → write honest alt text → declare width and height → lazy-load if below the fold. Six steps, maybe three minutes, permanent benefit.
Then go retroactive: your existing library is where the tonnage hides. Batch-process your twenty heaviest pages this week — start compressing now — and watch your speed scores climb before you've written a single new word.
Choosing quality settings like an engineer
"Quality 80" is a fine default, but understanding the dial earns you more. Compression quality maps to perceptual damage non-linearly: from 100 down to about 85, file size falls steeply while visible difference stays near zero — free money. From 85 to 70, artifacts appear in demanding content (smooth gradients, fine text, night photos) but photos of people, products and scenery survive beautifully. Below 60, everything shows wear. So segment by content: hero photography at 80–85, in-content photos at 75–80, thumbnails at 70 (they're small; artifacts hide), and anything containing text or UI as PNG or lossless WebP because JPEG-family artifacts feast on sharp edges.
Test your own eyes once: take a representative image through the Compressor at 90, 80, and 70, view them at actual display size (not zoomed), and find where YOU stop seeing differences. That's your ceiling; everything above it is wasted bytes. Most people discover their threshold is lower than they assumed — the quality slider's top third mostly exists for peace of mind.
A monthly image hygiene routine
Image debt accumulates through everyday publishing, so schedule the payback: once a month, run your five most-visited pages through the Page Size Checker and re-crush anything over ~150KB; spot-check recent posts for missing alt text (the On-Page Auditor counts coverage per page); and verify your latest theme or plugin updates didn't resurrect uncompressed originals — they do this more often than any changelog admits. Fifteen minutes monthly keeps the tonnage from ever rebuilding, and your Core Web Vitals graphs stay boring in the best possible way.
Key takeaways
Images decide more of your SEO fate than their reputation suggests: they dominate page weight, they gate your Core Web Vitals, and they feed a search engine of their own. The order of operations is fixed — resize to display size, compress to WebP around quality 80, name descriptively, describe honestly in alt text, declare dimensions, lazy-load below the fold — and the entire pipeline runs free in your browser. Segment quality settings by content type, keep screenshots in lossless formats, prefer your own photos to stock, and remember the og:image is the most-seen image most pages have. Then make it a routine rather than a rescue: monthly hygiene on your top pages prevents the debt from ever justifying another emergency cleanup. Your heaviest twenty pages are waiting — find them, fix them, and enjoy being the fast site in your niche for a change. The visitors won't send thank-you notes for the half-second you saved them, but they'll do something better: stay, scroll, and come back — and every ranking system ever built is, in the end, just an elaborate way of measuring exactly that.
Frequently asked questions
Does image SEO really drive traffic?
Google Images accounts for a meaningful slice of all searches, and for visual niches — recipes, products, design, travel, how-to — image results drive real visitors. Even ignoring image search entirely, optimized images speed up pages, which lifts regular rankings.
WebP, JPG or PNG — which should I use?
WebP for almost everything: it compresses 25–35% smaller than JPG at the same quality and supports transparency. Keep JPG only where legacy compatibility matters, and PNG for screenshots or graphics needing pixel-perfect text. Convert in bulk with our free converter.
How long should alt text be?
Under 125 characters — long enough to describe the image to someone who cannot see it, short enough that screen readers do not drone. Describe what is actually pictured; add the keyword only when it honestly belongs.
Do image filenames matter?
Modestly, yes — red-running-shoes.jpg gives Google context that IMG_4032.jpg does not. It is a thirty-second habit at upload time that compounds across hundreds of images.
Should I lazy-load every image?
Every image except the ones visible on first load. Lazy-loading your hero image delays your Largest Contentful Paint — the exact metric you are trying to protect. Native loading="lazy" on below-the-fold images, nothing on above-the-fold ones.