Image SEO: How to Optimize Images for Search

Image SEO is the practice of optimizing the images on your pages so they can rank in image search and so they support, rather than slow down, the page they live on. This guide is for founders, marketers, and developers who publish image-heavy pages and want their visuals to earn attention instead of costing them speed. It covers alt text, filenames, modern formats, responsive images, lazy loading, Core Web Vitals, image sitemaps, and structured data. Treat every image as content Google has to read, not decoration it quietly ignores.

The short version

• For most sites, the biggest win from images is speed, not image-search traffic. A heavy hero image drags down the whole page before anyone sees a single result.
• Alt text is accessibility-first. Describe what the image shows in plain language and do not stuff keywords into the alt attribute.
• Modern formats like WebP and AVIF, plus correctly sized files, do more for rankings than any tag you can add.
• Never lazy-load the image at the top of the page. Lazy loading below the fold is good practice; lazy-loading your LCP element delays the exact thing Google is timing.
• Missing width and height attributes cause layout shift, one of the easiest Core Web Vitals problems to fix.

What is image SEO, and what are its two goals?

Image SEO serves two goals at once, and they pull in slightly different directions. The first is ranking in image results, so your photo, diagram, or product shot shows up when someone searches Google Images, one of several distinct visual elements on a results page; our guide to which SERP features you can actually earn covers where image results sit alongside rich results and the rest. The second is supporting the host page: helping Google understand the content and keeping the images light enough that they do not wreck load time.

Most sites earn more from the second goal than the first. Image-search traffic is real but narrow, and it converts well only for a few categories such as recipes, products, and design inspiration. The performance side, by contrast, touches every page you publish. Fixing it improves rankings, bounce, and conversions from the same effort, which is why image optimization belongs in your on-page SEO checklist rather than in a separate silo.

What does image SEO actually involve?

It comes down to a short list of elements, each with a clear job. The table below is the at-a-glance version; the sections after it explain the mechanics and the trade-offs.

Element	What to do	Why it matters
Alt text	Describe the image literally in the alt attribute	Feeds accessibility and tells Google what the image depicts
Filename	Use descriptive, hyphenated words before upload	A modest signal, and free to get right
Format	Serve WebP or AVIF with a fallback	Smaller files load faster and improve LCP
Dimensions	Set explicit width and height	Reserves space and prevents layout shift (CLS)
Responsive markup	Provide srcset and sizes	Sends each device a file it actually needs
Loading	Use loading="lazy" below the fold only	Defers offscreen work without delaying the hero
Discovery	Add images to a sitemap and relevant structured data	Helps Google find and enrich them in results

How does alt text work, and how should you write it?

Alt text is the text a screen reader announces and the text a browser shows when an image fails to load, and Google reads it to understand what the picture depicts. Write it for a person who cannot see the image. Describe what is actually in the frame, in plain language, as if you were telling someone on the phone.

Good alt text is specific and literal: alt="barista pouring milk into a latte" beats alt="coffee". It does not need to be a sentence, and it should not repeat the caption word for word.

Here is the limit worth stating plainly. Do not keyword-stuff alt text. Cramming alt="best coffee beans buy coffee online cheap coffee" into an image helps no one, reads as spam to Google, and actively harms the blind users the attribute exists to serve. If an image is purely decorative, such as a background flourish or a spacer, give it an empty alt="" so screen readers skip it cleanly.

Why do descriptive filenames matter?

A filename like red-leather-office-chair.jpg tells Google more than IMG_4821.jpg, and it costs nothing to get right before you upload. The signal is modest, well below alt text and surrounding content, but it is one of the few you control completely.

Use hyphens to separate words, not underscores or spaces, and keep names short and human-readable. Rename the file before it goes live, because renaming after publish breaks the image URL and any links to it. If you must rename a published image, treat it like any other URL change and set up a redirect.

Which image format should you choose: WebP, AVIF, or JPEG?

Serve WebP or AVIF for most images, and keep a JPEG or PNG fallback only where you need the broadest possible compatibility. Both modern formats compress far more efficiently than the older ones, so you deliver the same visual quality in a fraction of the bytes. Fewer bytes means a faster LCP, which is where format choice earns its keep.

AVIF usually produces the smallest files and is well supported in current browsers, though its encoding is slower and support in older clients is thinner. WebP is the safe default: near-universal support and a big improvement over JPEG. Whichever you pick, compress before upload. A hero image saved straight from a camera at full resolution is the single most common cause of a slow page, and no tag will rescue a 4 MB file.

How do you serve responsive images with srcset and sizes?

Use the srcset and sizes attributes to offer the browser several versions of an image and let it pick the right one for the device. A phone should never download the 2000-pixel-wide file built for a desktop hero. With srcset listing width variants and sizes describing how much space the image occupies, the browser fetches the smallest file that still looks sharp.

The other half of the job is correct dimensions. Export images at the sizes they will actually display, rather than shipping one giant original and shrinking it with CSS. Scaling a large image down in the browser wastes bandwidth and still counts the full download against your load time. Most modern frameworks and CMS platforms generate srcset for you; the point is to confirm it is happening, not to hand-write it every time.

When should you lazy-load images, and when should you not?

Lazy-load images below the fold with loading="lazy", and never lazy-load the image at the top of the page. Lazy loading tells the browser to defer fetching an image until the user scrolls near it, which saves bandwidth and speeds up the initial render when most of your images are offscreen.

The exception is the one that trips people up most. Your largest above-the-fold image is almost always your Largest Contentful Paint element, the thing Google times for LCP. Adding loading="lazy" to it forces the browser to wait before fetching the very element the metric measures, which makes your score worse, not better. Load the hero eagerly, and reserve lazy loading for everything the visitor has not scrolled to yet.

How do images affect Core Web Vitals?

Images are the most common cause of two of the three Core Web Vitals, so they sit at the center of page performance. Get them wrong and you fail the metrics; get them right and you have solved a large share of the work. Our Core Web Vitals guide covers the thresholds and the full diagnosis; the image-specific angles are these two.

LCP (loading) is usually decided by the hero image. Compress it, serve WebP or AVIF, size it correctly, and load it eagerly, and the largest paint lands fast. Ship it oversized or lazy-loaded and the metric suffers no matter how quick the rest of the page is.

CLS (visual stability) breaks when an image arrives without reserved space and shoves the layout around, and unsized images are the single most common cause of a failing score. Set explicit width and height attributes, or a CSS aspect ratio, on every image so the browser can plan the final layout from the first paint. It is one of the cheapest fixes in all of technical SEO and it pays off immediately, and our guide to diagnosing and fixing cumulative layout shift covers the other five causes and how to find the exact element that is moving.

What do image sitemaps and structured data do?

Both help Google find your images and, in some cases, present them more richly in results. An image sitemap, or image entries inside your regular sitemap, points crawlers at images they might otherwise miss, which matters most when images load via JavaScript or sit behind galleries. It is a discovery aid, not a ranking boost, and it belongs in the wider crawl-and-index picture our technical SEO guide lays out.

Structured data is where images can earn a visual upgrade in the SERP. Product markup can attach an image to a rich product result, and recipe markup can surface a dish photo in the recipe carousel. Google's structured data documentation lists which types support images and the properties each one expects. Add the markup only where the content genuinely matches the type; marking up a page as a recipe because you want the photo shown is the kind of shortcut that gets pages ignored.

How do captions and surrounding context help images rank?

Google reads the text around an image to work out what it shows and whether it belongs on a page about your topic. A caption, the nearest heading, and the sentences wrapping the image all feed that understanding. An image of a chart sitting under a heading about quarterly revenue, with a caption naming the figure, is far easier for Google to place than the same file dropped into unrelated text.

Captions carry extra weight because people read them. Use them where they add information, not on every decorative image, and let them describe or interpret what the reader is looking at. This is the same principle that runs through Google's Search Central documentation: context tells the search engine what a piece of content is about.

What is the image optimization checklist?

Work the checklist in two passes: first make images discoverable and understandable, then make them fast. Both passes matter, but the performance pass moves rankings for more pages, so do not stop after the first. It slots into the wider sweep in our technical SEO checklist.

Discovery and understanding. Write literal, accessibility-first alt text on every meaningful image. Give decorative images an empty alt="". Use descriptive, hyphenated filenames before upload. Add captions where they inform the reader. Keep the surrounding text relevant to the image. Include images in your sitemap, and add product or recipe structured data only where the content fits the type.

Performance. Compress every image before it ships. Serve WebP or AVIF with a fallback. Export at display size and provide srcset and sizes for responsive delivery. Set explicit width and height to prevent layout shift. Lazy-load below-the-fold images with loading="lazy", and load the hero eagerly. Serve images through a CDN so they arrive from a server near the visitor. Re-check the affected pages in PageSpeed Insights, reading the field data at the top before the lab score.

Where should you start this week?

The habit worth building is checking image weight before you hit publish, every time, because performance decays one oversized upload at a time and nobody notices until a whole template feels slow. A thirty-second compression step on the way in saves hours of cleanup later.

This week, open your three most important pages and inspect their hero images. Confirm each one is compressed, served as WebP or AVIF, sized for the layout, loaded eagerly rather than lazily, and carrying explicit dimensions. If any hero fails even one of those, you have found your highest-priority fix, and if the problem turns out to run deeper than images alone, our SEO services exist for exactly that kind of diagnosis.