Image SEO 2026: Complete Optimization and Alt Text Guide

Alt text serves two audiences that happen to want the same thing: screen reader users who rely on it to understand visual content, and search engines that use it as a primary ranking signal for image search. Both reward concise, accurate descriptions that convey the image's purpose in context — not keyword-padded captions.

The single most common mistake is treating alt text as a metadata field to be filled for SEO. It's a semantic element. When a user cannot see the image, the alt attribute is what appears in its place — write it as if you're narrating a photograph over the phone.

Filenames are a small but persistent ranking signal for Google Images. They appear in the image URL, in sitemaps, and often in the anchor text when images are shared or hotlinked. Every IMG_0238.jpg you upload is a missed opportunity.

Rename before upload. The workflow is trivial: on export from Lightroom, Figma, or your CMS, apply a naming template that produces descriptive, hyphenated slugs. For dynamic image pipelines (Next.js Image, Cloudinary, imgix), ensure the upstream source filename is meaningful — CDN transformations preserve the stem.

Format choice is the single biggest lever for image weight. In 2026, WebP is the universal baseline — supported in every browser you should be targeting, with ~25–35% smaller files than JPEG at equivalent quality and full alpha transparency to replace PNG.

AVIF goes further, often 50% smaller than JPEG, but encoding is CPU-intensive and support gaps remain on older Safari versions. Serve AVIF through the <picture> element with WebP and JPEG fallbacks for guaranteed compatibility.

JPEG XL has matured but Chrome's support reversal leaves it practical only for Safari-first audiences. For 99% of sites, the correct 2026 stack is AVIF → WebP → JPEG/PNG fallback.

There is no single correct image size in a responsive design — a hero image displayed at 1440px on desktop needs a ~720px version for phones. Shipping the desktop asset to a phone wastes 4× the bytes for no visual benefit and inflates LCP. The browser solves this automatically if you give it the right markup.

Two mechanisms: srcset with sizes for resolution switching (same image, different sizes), and <picture> with media queries for art direction (different crops or aspect ratios per breakpoint).

Native lazy loading is one of the cheapest wins in performance optimization. Adding loading="lazy" to below-fold images defers their download until the user scrolls near them — no JavaScript, no intersection observer, no library.

The rule is simple: lazy load everything below the fold, eager load everything above. The LCP image is almost always above the fold, and lazy-loading it will hurt Core Web Vitals. Use fetchpriority="high" on the LCP image to tell the browser to prioritize it over other resources.

Schema.org's ImageObject markup gives Google structured information about images that represent the primary entity of a page — product photos, article heroes, author headshots. It doesn't apply to every image on a page; reserve it for images that warrant their own discovery.

For sites using CSS backgrounds or lazy-loaded images that standard crawlers miss, an image sitemap extension ensures every image is discoverable. Add <image:image> tags to your existing XML sitemap.

Google Images is a meaningful traffic source for e-commerce, publishing, and visual niches. Roughly 22.6% of SERPs include image results, and image packs frequently appear for commercial and informational queries. The ranking factors are specific and well-documented.

Images are the LCP element on approximately 38% of pages. Optimizing the LCP image is the single highest-leverage performance intervention — more impactful than any JavaScript trimming on image-heavy templates. Three actions move the needle:

1. Serve properly sized, modern-format images — WebP or AVIF at the correct breakpoint size via srcset.
2. Reserve layout space — explicit width and height attributes or aspect-ratio CSS prevent CLS when images load.
3. Preload the LCP image — a <link rel="preload"> hint plus fetchpriority="high" moves LCP ahead of lower-priority resources.

CDN image services — Cloudinary, imgix, Bunny, Cloudflare Images, Next.js Image with a deployed optimizer — automate most of this. They transform on the fly, negotiate format via the Accept header (AVIF to Chrome, WebP to Safari, JPEG as fallback), and serve from edge locations with aggressive caching.

If you're self-hosting, static image pipelines (Sharp at build time, Next.js Image in static export, Astro Image) give you most of the benefit without runtime cost. The trade-off is longer builds in exchange for zero runtime image processing. For revenue implications, see our page speed statistics with revenue impact.