Table of contents9
The image that broke me was a hero banner on a client’s homepage: 4.7 megabytes, straight from a stock site, uploaded at full resolution and displayed at one-tenth its size. The page took nine seconds to load on a phone. Nine seconds. The client could not understand why their beautiful site ranked on page four. I compressed that one image to 38 kilobytes — same visible quality — and the page dropped to under three seconds. Two weeks later, it was on page two.
That is image SEO in one story: the thing everyone ignores, quietly deciding who ranks and who does not. Images are the heaviest part of most web pages, the most neglected part of most SEO checklists, and — here is the part nobody talks about — one of the few ranking signals entirely under your control. Google cannot see your images. It reads what you tell it about them: the filename, the alt text, the surrounding words. Most site owners tell it nothing. This guide fixes that.
In this guide, I will walk you through the complete image SEO workflow I use on every site: descriptive filenames before upload, honest alt text that serves humans first, compression that cuts 90 percent of the weight without visible loss, and the surrounding-page signals that tie it all together. If you publish images on WordPress — which is all of us — this is for you. Let’s make every pixel earn its place.
Before we dive in, let me give you the single most useful thing I learned researching this guide: Google reads images through a stack of signals, and the top two — alt text and filename — are completely in your hands and the most commonly neglected. Studies consistently find that half to two-thirds of images on the average WordPress site have empty alt text. That means on most of the web, Google is guessing. Every image you optimize properly is an image where you are not guessing — and that compounds across a whole site.
In this guide, you will learn:
- How Google actually “reads” your images (the complete signal map)
- Filenames: the 30-second habit that beats keyword stuffing
- Alt text: the accessibility-first formula that also ranks
- Compression and formats: WebP, AVIF, and the quality-vs-size balance
- Sizing: why uploading at display size prevents layout shift
- Surrounding signals: captions, nearby text, and image sitemaps
- The complete pre-upload workflow (do it once, in the right order)
Ready? Let’s get started.
How Google Reads Your Images (The Signal Map)
Google’s vision AI is impressive, but for ranking purposes it still leans heavily on the text signals around your images. Here is the map, roughly ordered by impact:
Alt text — critical. The `alt` attribute on your image tag. It is the primary text signal telling Google what the image shows, and it is also what screen readers announce to blind users. Double duty, maximum importance.
Filename — critical. The actual file name in the URL. `sourdough-bread-cross-section.jpg` tells Google something; `IMG_4821.jpg` tells it nothing. Set before upload — renaming after upload in WordPress is a headache you do not want.
Surrounding text — high. The paragraphs near the image. Google uses nearby copy to understand the image’s context and relevance. An image placed next to related text outranks the same image floating in unrelated content.
Page title and H1 — high. The page’s overall topic frames every image on it. This is why relevant images on relevant pages matter — context compounds.
Captions — medium. The visible text under an image. Not every image needs one, but captions get read by humans and machines alike, and they are a natural place for an extra descriptive phrase.
Image sitemap — medium. An XML listing of your image URLs helps Google discover images it might otherwise miss, especially images loaded via JavaScript. Most SEO plugins generate one automatically — check that yours does.
File size and page speed — medium. Heavy images slow the page, hurting Core Web Vitals (especially Largest Contentful Paint). Google’s page experience signals mean image weight is a ranking factor by proxy.
Dimensions (width/height attributes) — low for ranking, critical for UX. Proper dimensions prevent layout shift (CLS) — that jarring jump when text moves as images load. Not a direct image-ranking signal, but a page-quality one.
The takeaway that changed my workflow: the top two signals are set before you ever click “upload.” Filename and alt text are decided at export time. Everything else is page-level work. So the entire game is won or lost in the thirty seconds before upload — which is exactly where most people rush.
Filenames: The 30-Second Habit
This is the simplest win in all of image SEO, and almost nobody does it. Before you upload an image, rename the file:
Descriptive, lowercase, hyphen-separated. `sourdough-bread-cross-section.jpg` — not `IMG_4821.jpg`, not `final-final-v2.jpg`, not `Screenshot 2026-10-18 at 12.04.11.png`. Lowercase because some servers treat uppercase differently; hyphens because Google reads hyphens as word separators (underscores are not treated the same way — use hyphens).
One or two accurate words beat a stuffed filename. `leather-crossbody-bag-tan.jpg` is perfect. `best-cheap-leather-crossbody-bag-buy-online-discount-sale.jpg` is spam, and Google’s image algorithms treat over-optimized filenames as a spam signal, not a ranking boost. Describe what is actually in the image. If the keyword fits naturally, include it. If it does not, do not force it.
Rename before upload, not after. In WordPress, the filename becomes part of the attachment URL. Renaming after upload means either living with the old URL or doing redirects — both worse than thirty seconds of renaming beforehand. I keep a simple rule: no image touches the Media Library with a camera-default or screenshot-default name. Ever.
Bonus Tip: Make this a team rule, not a personal habit. If anyone else uploads to your site — writers, assistants, clients — a one-line instruction in your style guide (“rename every image descriptively before uploading”) saves hundreds of bad filenames a year. I learned this after finding 200 images named `image1.jpg` through `image200.jpg` on a client site. Two hundred.
Alt Text: Accessibility First, SEO Follows
Alt text is the most misunderstood field in WordPress. Let me clear it up with the rule that governs everything: alt text describes what is literally in the image, for a person who cannot see it. The SEO value follows from doing that honestly — it is not the goal, it is the reward.
Here is my formula: describe the image as you would to a friend on the phone. “A cross-section of sourdough bread showing an open, airy crumb with large holes.” That is it. Specific, visual, honest. A blind user hearing that through a screen reader gets a real picture. Google reading it gets real context. Everybody wins.
What good alt text looks like:
- “A barista pouring latte art into a ceramic cup on a wooden counter.” (Specific, visual, natural.)
- “Line chart showing website traffic doubling from January to June 2026.” (Describes the data, not just “chart.”)
- “The WordPress block editor with the image block settings panel open.” (Useful for tutorial screenshots.)
What bad alt text looks like:
- “image” / “photo” / “picture” (Tells nobody anything.)
- “” (Empty — correct only for purely decorative images, see below.)
- “best cheap sourdough bread recipe buy now discount” (Keyword stuffing. Screen readers read this aloud to blind users. Imagine hearing that. Do not do this.)
- The exact same text as the caption (Redundant — if the caption says it, the alt can be empty or complementary.)
The decorative image rule: if an image is purely decorative — a background flourish, a divider graphic, an icon next to text that already says the same thing — leave the alt text empty (`alt=””`). An empty alt tells screen readers to skip it silently. Writing “decorative blue swirl” forces a blind user to listen to noise. Empty is correct, and it is a deliberate choice, not laziness.
Length: keep it under 125 characters. Screen readers may cut off longer alt text, and concision forces you to describe rather than ramble. If you need more than 125 characters to explain an image (a complex chart, an infographic), put the full explanation in the surrounding text or caption and keep the alt as a summary.
Where to write it in WordPress: Media Library → click the image → “Alternative Text” field. Fill it at upload time. Going back to fill 500 empty alt fields is the kind of soul-crushing work that never gets done — I know, because I have quoted for it.
Compression and Formats: 90 Percent Lighter, Same Quality
Remember the 4.7MB hero image from my opening story? Here is the physics behind the fix. Digital images carry far more data than screens can show, and most of that data is waste. Compression removes the waste. The trick is removing waste without removing visible quality — and modern formats make this almost embarrassingly easy.
The format decision (simple version):
- WebP for photos and general images — typically 25–35 percent smaller than JPEG at the same visual quality, supported everywhere that matters now. This is my default for everything photographic.
- AVIF where you want maximum compression and your audience’s browsers support it — even smaller than WebP, at the cost of slower encoding. Worth it for hero images on high-traffic pages.
- PNG only for graphics needing transparency or pixel-perfect edges (logos, screenshots with text). Never for photos — a photographic PNG can be ten times heavier than the same image as WebP.
- SVG for icons and simple vector graphics — infinitely scalable, tiny file size. Perfect for logos and UI icons.
- JPEG is still acceptable, but there is rarely a reason to choose it over WebP in 2026.
The compression workflow I use: export at the display size, convert to WebP, then lower the quality setting until just before visible degradation appears. For most photographic images, quality 70–80 in WebP looks identical to the original at a tenth of the file size. For graphics with flat colors, you can often go lower. Always compare visually — zoom to 100 percent and look at edges, gradients, and text. If you see banding, blockiness, or blur, you went too far. Quality over compression, always: a blurry image that loads fast is still a blurry image.
My quality floor: I never ship an image I would not proudly show a client at full size. If hitting a file-size target requires degrading below that bar, the answer is a smaller display size or a different image — not a worse one. This is a standing rule, not a suggestion.
In WordPress specifically: compress BEFORE uploading. Server-side optimization plugins help, but starting with an already-optimized file beats fixing a 5MB upload after the fact. And enable lazy loading for below-the-fold images (WordPress does this natively now) — images load as the reader scrolls to them instead of all at once, which dramatically improves initial page speed.
Sizing: Upload at Display Size
Here is a mistake I see constantly: uploading a 3000-pixel-wide image to display at 800 pixels. The browser downloads all 3000 pixels and throws away two-thirds of them. That is pure waste — slower loads, worse Core Web Vitals, zero visual benefit.
The rule: size the image to its actual display size before upload. If your content column is 800 pixels wide, your image should be 800 pixels wide (or 1600 for retina sharpness — double resolution for crispness on high-density screens, which is the one legitimate reason to upload larger than display size). Not 3000. Not “whatever the camera produced.”
This also fixes layout shift (CLS) — one of the three Core Web Vitals. When the browser does not know an image’s dimensions in advance, the page text jumps when the image loads. That jump is measured, scored, and factored into your page experience. Setting explicit width and height (WordPress does this automatically for uploaded images) reserves the space before the image arrives. No jump, no penalty, happier readers.
Responsive images: WordPress automatically generates multiple sizes of each upload and serves the right one via `srcset` — smaller files to phones, larger to desktops. This only works if the original upload is sensibly sized. A 6000-pixel original generates a srcset of oversized variants; an 1600-pixel original generates a sensible set. Garbage in, garbage out — start clean.
If image sizing inside WordPress confuses you, our guide on how responsive images actually work in WordPress explains srcset in plain English. And if your images look blurry rather than merely heavy, the real fix for blurry WordPress images covers the sharpness side of the equation.
Surrounding Signals: Captions, Context, and Sitemaps
The image itself is only half the SEO. The other half is everything around it.
Place important images near relevant text and headings. Google uses surrounding copy to understand what the image shows and how it relates to the page. An image of sourdough crumb sitting under the heading “Reading Your Crumb Structure” with a paragraph about open crumb is a relevance triple — filename, alt, and context all agreeing. That agreement is what ranks in image search.
Use captions where they add value. A caption is visible text under the image — readers actually read captions (eye-tracking studies have shown this for decades), and Google reads them too. A caption is a natural place for one more descriptive phrase. Not every image needs one; use them where the image benefits from explanation.
Check your image sitemap. Your SEO plugin should generate an image sitemap automatically — a dedicated XML file listing your image URLs so Google can discover them, including images that JavaScript might hide from normal crawling. Verify it exists and that your important images are in it. Images Google cannot find cannot rank.
Open Graph and social images. Set a proper og:image for every important page — the image that appears when your page is shared on social media. The recommended size is 1200×630 pixels. A page shared with a broken or missing preview image loses the click before the fight starts. This is not strictly “image SEO,” but it is image-driven traffic, and it belongs in the same workflow.
The Complete Pre-Upload Workflow
Here is everything in this guide condensed into the order of operations. Do it in this order — several steps depend on earlier ones:
1. Choose the right image. Relevant to the content, high quality, yours to use. No relevant image beats a misleading stock photo — Google’s vision AI increasingly checks whether the image matches the topic.
2. Resize to display size (or 2× for retina). Never upload camera-resolution files.
3. Rename descriptively. Lowercase, hyphens, one or two accurate words. Before upload, always.
4. Convert and compress. WebP (or AVIF for heroes), quality set by visual check, never below your quality floor.
5. Write the alt text. Describe it like you are on the phone with a friend. Under 125 characters. Empty only for pure decoration.
6. Upload to WordPress and fill the Title, Alt Text, and (where useful) Caption and Description fields in the Media Library.
7. Place near relevant content under a descriptive heading, with supporting text around it.
8. Verify. Run the page through PageSpeed Insights — its “improve image delivery” audit flags anything oversized or inefficiently formatted. Fix what it finds.
Eight steps, a few minutes per image once it is habit. For bulk-fixing an existing library, triage by page traffic like I described in the meta description guide — fix the images on your most-visited pages first. And if shrinking images without losing quality is your main battle, our guide on shrinking WordPress image sizes without losing quality goes deeper on the compression craft.
Frequently Asked Questions
Does alt text still matter for SEO in 2026? Yes — as one accessibility-first signal among several, not the whole strategy. Alt text helps Google understand image context and is essential for screen reader users. But it will not compensate for a keyword-stuffed filename, oversized dimensions, or an uncompressed file. Do all of it; the signals compound.
Do image filenames actually affect rankings? Yes. Filenames are one of the contextual signals Google uses to understand what an image shows, alongside alt text and surrounding content. A camera-default filename like IMG_4821.jpg gives Google nothing. A descriptive filename is a free signal — it costs thirty seconds and it lasts forever.
Should I put keywords in my image filenames and alt text? Only if they genuinely describe the image. One or two accurate words beat a stuffed string every time — Google treats over-optimized filenames and alt text as spam signals. Describe honestly first; if the keyword fits the honest description, it belongs there.
WebP or AVIF — which should I use? WebP as your default: 25–35 percent smaller than JPEG at equal quality, universally supported. AVIF for hero images on high-traffic pages where maximum compression justifies the slower encoding. PNG only for transparency and pixel-perfect graphics, SVG for icons. The wrong format can cost you 10× the file size — format choice matters more than most people think.
How do I fix 500 images with missing alt text? Triage, do not panic. Sort your pages by traffic and fix the images on your most-visited pages first — that is where the impact lives. For each image: describe what is literally shown, under 125 characters, at upload-time quality. Batch the work by page, not by image — context makes alt text faster to write. And set the rule going forward: no upload without alt text.
Final Thoughts
That 4.7-megabyte hero image taught me something I now tell every site owner: your images are not decoration — they are infrastructure. They decide your page speed, your accessibility, your image search traffic, and part of your rankings. And unlike backlinks or algorithm updates, every piece of image SEO is entirely within your control. Filename, alt text, compression, placement — all yours, all free, all permanent.
The beautiful thing about this work is that it compounds silently. Each optimized image is a small, permanent improvement. Do ten images a week and in three months your whole library is transformed — faster pages, clearer signals, happier visitors on screen readers and search engines alike.
Start with your homepage hero image today. Check its size. I will bet you a coffee it is heavier than it needs to be. Fix that one image, feel the page get faster, and then keep going. You have the workflow now — all eight steps. Your pixels are waiting to earn their place.
