Image SEO: Alt Text, Formats & Optimization
Images make your content engaging, but to search engines they are essentially invisible boxes of pixels unless you help them out. Image SEO is the practice of optimizing your images so they load fast, rank in Google Images, stay accessible to every visitor, and give crawlers the context they need. This guide covers everything from alt text to modern formats and Core Web Vitals.
1. Why Image SEO Matters
Images are not just decoration. When optimized correctly, they become a powerful, often underused, traffic channel and a key contributor to user experience. Here is why they deserve your attention:
- Google Images Traffic: Google Images is one of the largest search engines in the world. Properly optimized images can rank in image search and the standard SERPs, sending qualified visitors to your site that you would otherwise never capture.
- Accessibility: Visually impaired users rely on screen readers that read your alt text aloud. Accessible images are both an ethical obligation and a signal of quality content.
- Page Speed & Core Web Vitals: Images are usually the heaviest assets on a page. Unoptimized images slow down loading and damage your Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) scores — both ranking factors.
- Context for Crawlers: Search engines cannot "see" an image. Alt text, file names, captions, and surrounding text are how Google understands what the image depicts and how it relates to your topic.
The bottom line: missing alt text and oversized images directly hurt your SEO, both through lost relevance signals and degraded performance metrics.
2. Alt Text: The Most Important Image Attribute
The alt attribute (alternative text) is a short written description of an image embedded in
the HTML. It is the single most important image SEO element, serving two critical purposes:
- Accessibility: Screen readers announce the alt text to visually impaired users, so they understand what the image shows.
- Context for search engines: Google reads alt text to understand the image, which helps it rank in Google Images and reinforces the topical relevance of the page.
Alt text is also displayed in the browser if the image fails to load, providing a fallback for users on slow connections.
How to Write Great Alt Text
Describe the image clearly and concisely as if you were explaining it to someone who cannot see it. Be specific, keep it under roughly 125 characters, and include a relevant keyword only when it fits naturally — never force it.
<!-- Bad: vague and useless -->
<img src="dog.jpg" alt="dog">
<!-- Bad: keyword stuffing -->
<img src="dog.jpg" alt="dog puppy cute dog best dogs buy dog puppy cheap dog">
<!-- Good: descriptive and natural -->
<img src="golden-retriever-puppy.jpg"
alt="Golden retriever puppy playing with a tennis ball in a backyard">Decorative Images: Use an Empty alt
Not every image needs descriptive alt text. Purely decorative images — background flourishes, divider lines, spacer graphics — should use an empty alt attribute. This tells screen readers to skip the image entirely rather than reading out a meaningless filename.
<!-- Decorative image: intentionally empty alt -->
<img src="divider-swirl.svg" alt="">Caution: Never omit the alt attribute entirely on meaningful images,
and never stuff it with keywords. Missing alt text is an accessibility failure and a wasted SEO
opportunity, while keyword-stuffed alt text can be read as manipulative and looks spammy to both
users and crawlers.
3. The Image Title Attribute
The title attribute is often confused with alt, but they are very different. The
title attribute provides advisory information that typically appears as a small tooltip
when a user hovers their mouse over the image.
<img src="golden-retriever-puppy.jpg"
alt="Golden retriever puppy playing with a tennis ball"
title="Our 10-week-old puppy, Biscuit">Unlike alt text, the title attribute carries very little SEO weight and is largely ignored by screen readers (so it is not a substitute for alt text). It is also invisible on touch devices, where there is no hover state. Use it only when a hover tooltip genuinely improves the user experience — otherwise it is optional and safe to leave out.
4. Descriptive File Names
Before you even upload an image, give it a meaningful name. Search engines read file names as another clue
about the image's content. A camera's default name like IMG_0042.jpg tells Google nothing,
while a descriptive name reinforces your topic.
- Be descriptive: Use words that describe what the image actually shows.
- Use hyphens, not underscores: Google treats hyphens as word separators but reads
underscores as joiners, so
golden_retrieveris read as one word. - Use lowercase: Avoid spaces and special characters that get encoded into ugly URLs.
IMG_0042.jpg
Screenshot 2026-06-11 at 14.32.png
golden-retriever-puppy.jpg
blue-running-shoes-side-view.webp5. File Size & Compression
Large image files are the number one cause of slow pages. Because images are frequently the Largest Contentful Paint element, an oversized hero image can single-handedly tank your LCP score and frustrate users before they ever see your content.
- The rule of thumb: Aim to keep most web images under 300 KB. Hero images may be slightly larger, but thumbnails and inline images should be far smaller.
- Resize before uploading: Never serve a 4000px-wide photo in a 600px slot. Scale the image to the maximum size it will actually be displayed at.
- Lossy vs. lossless: Lossy compression (JPEG, WebP) discards some data for much smaller files — ideal for photographs. Lossless compression (PNG, lossless WebP) preserves every pixel — best for logos, screenshots, and graphics with sharp edges or text.
Useful tools include Squoosh, TinyPNG, ImageOptim, and ShortPixel, plus build-time pipelines that generate optimized variants automatically.
Caution: Oversized images don't just slow your page — they directly hurt SEO by damaging Core Web Vitals (LCP) and increasing bounce rates. A single uncompressed 5 MB photo can add several seconds to load time on mobile connections.
6. Modern Image Formats
Choosing the right format can dramatically reduce file size with no visible loss in quality. The modern formats are significantly more efficient than the older JPEG and PNG standards.
- WebP: Now supported by all major browsers, WebP is typically 25–35% smaller than JPEG at equivalent quality and supports both transparency and animation. It's the safe default for most photos and graphics today.
- AVIF: The newest format, offering even better compression than WebP (often 50% smaller than JPEG). Browser support is strong but slightly behind WebP, so it's best served with a fallback.
- JPEG: Still a reliable, universally supported choice for photographs when you need maximum compatibility.
- PNG: Use only when you need lossless quality or transparency on graphics — it produces large files for photos.
- SVG: The ideal choice for logos, icons, and simple illustrations. As a vector format it stays razor-sharp at any size and the files are tiny.
You can serve a modern format with a graceful fallback using the <picture> element:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Team celebrating a product launch" width="1200" height="630">
</picture>7. Responsive Images & Lazy Loading
Serving the same large image to every device wastes bandwidth. Responsive images let the browser choose
the most appropriate version for each screen size using srcset and sizes.
<img src="shoe-800.jpg"
srcset="shoe-400.jpg 400w,
shoe-800.jpg 800w,
shoe-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Blue running shoe, side view"
width="800" height="600"
loading="lazy">Two attributes in that example are critical for performance and Core Web Vitals:
loading="lazy": Defers loading of off-screen images until the user scrolls near them, speeding up the initial page load. Do not lazy-load your above-the-fold hero image — it should load immediately to keep LCP fast.- Explicit
widthandheight: Always set these. They let the browser reserve the correct space before the image loads, preventing the page from jumping around. This eliminates layout shift and protects your Cumulative Layout Shift (CLS) score.
Pro Tip: Rank-O-Saur automatically scans every page you visit and flags images that are missing ALT tags, missing title attributes, and any image larger than 300 KB — so you can catch accessibility and performance issues before they cost you rankings.
8. Best Practices Checklist
- Write descriptive alt text for every meaningful image; use an empty
alt=""for purely decorative ones. - Never keyword-stuff alt text — describe the image naturally and include a keyword only when it fits.
- Use descriptive, hyphen-separated file names (e.g.
golden-retriever-puppy.jpg, notIMG_0042.jpg). - Compress and resize every image; keep most files under 300 KB.
- Serve modern formats like WebP or AVIF, with SVG for icons and logos.
- Implement responsive images with
srcsetandsizes. - Add
loading="lazy"to off-screen images (but not the hero image). - Always set explicit
widthandheightto prevent layout shift (CLS). - Add context with relevant captions and surrounding text.
- Include important images in your XML sitemap to help Google discover them.
Master these fundamentals and your images will load faster, rank in Google Images, and stay accessible to every visitor — turning a commonly neglected asset into a genuine SEO advantage.
