Image SEO is the work of making the pictures on your page both understandable to search engines and fast for the browser to load. Done well, it pays off twice: extra organic traffic from Google Images and a faster page with better Core Web Vitals. On most sites images are the heaviest resource, which is why optimizing them is usually the highest-return performance step you can take.
Why image SEO matters
Search engines can't understand the contents of a picture as clearly as a human does. They rely on the file name, the alt text and the surrounding context to guess what the image is about. At the same time images make up the bulk of page weight. A single unoptimized hero image can be 2-3 MB, while a properly compressed version drops to 150 KB. That difference directly affects both a mobile user's wait time and your LCP (Largest Contentful Paint) score.
- Discoverability: Well-labeled images appear in Google Images and bring extra visitors.
- Speed: Smaller files load faster, improving Core Web Vitals, which is a ranking signal.
- Accessibility:
alttext turns the content into speech for visitors using screen readers.
How to write alt text
Alt text is shown when an image fails to load and is read aloud by screen readers. Its job is to describe the image, not to stuff keywords. Convey the content in its context, in a short, natural sentence.
<!-- Bad: empty or spammy -->
<img src="product.jpg" alt="">
<img src="product.jpg" alt="shoes cheap shoes running shoes buy">
<!-- Good: descriptive and natural -->
<img src="running-shoe.jpg"
alt="Grey running shoe with blue sole, side view">A few practical rules: leave alt="" for purely decorative images that carry no meaning (screen readers skip them). If an image contains text, put that text in the alt. Don't start with words like "image" or "picture"; the screen reader already announces "image". Use a keyword only if it genuinely describes the picture.
Choosing the right format
Format choice directly determines file size. Modern formats produce much smaller files than older JPEG and PNG at the same quality.
- WebP: Should be your default choice today. For photos and graphics it's usually 25-35% smaller than JPEG/PNG, and every modern browser supports it.
- AVIF: Produces even smaller files than WebP, but encoding is slower and support in older browsers is slightly lower. Worth it for critical images.
- SVG: Ideal for logos, icons and simple graphics. As a vector it stays sharp at any resolution and is usually tiny.
- JPEG/PNG: Useful as a fallback for backward compatibility; use PNG only when you need transparency.
To serve a single image in multiple formats and let the browser pick the one it supports, use <picture>:
<picture>
<source srcset="cover.avif" type="image/avif">
<source srcset="cover.webp" type="image/webp">
<img src="cover.jpg" alt="Project cover image" width="1200" height="630">
</picture>Reducing file size
The biggest win comes from not serving an image larger than it needs to be. There's no point putting a 4000-pixel file into an area shown at 400 pixels wide. Resize the image to the size it will be used at, then compress.
On the command line you can quickly produce WebP with cwebp:
# Convert a JPEG to WebP at quality 80
cwebp -q 80 cover.jpg -o cover.webp
# For AVIF (libavif tools)
avifenc --min 20 --max 30 cover.jpg cover.avifIf you prefer a tool over per-file commands, Squoosh (runs in the browser), ImageOptim or sharp (Node.js) are good options. Keep quality around 75-85; for most photos that's the sweet spot that's invisible to the eye but halves the size.
Responsive images and lazy loading
To serve different sizes to different screens, use srcset and sizes; the browser downloads the file best suited to the viewport. Defer off-screen images with loading="lazy" so the initial load is faster.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="500"
loading="lazy"
alt="Designer working in the studio">One important detail: do not give loading="lazy" to above-the-fold images, and especially not to the LCP image; that delays your most important picture and hurts the score. If needed, add fetchpriority="high" to that image instead.
File name, sitemap and layout placement
The file name is a small signal, but a free one: instead of DSC_0421.jpg, use descriptive, hyphen-separated names like grey-running-shoe.jpg. Prefer ASCII and hyphens over spaces and special characters.
Specifying width and height on every image lets the browser reserve space and prevents the page-shift problem known as CLS (Cumulative Layout Shift). Finally, if you have many important images, an image sitemap—or adding image entries to your existing sitemap—helps Google discover them faster.
Frequently Asked Questions
Does every image need alt text?
Every image that carries content, yes. For purely decorative images (a background pattern, a divider line) you deliberately leave alt="" so screen readers skip them. The point isn't to leave it empty, but to intentionally mark the meaningless image.
Should I use WebP or AVIF?
In practice, serving both is best: inside <picture>, AVIF first, then WebP, with a JPEG fallback last. If you must pick one format, WebP is the most balanced choice—broad support and good compression.
Does image SEO really affect rankings?
Indirectly but powerfully. While images aren't counted as a direct "ranking factor," they affect speed (Core Web Vitals) and traffic from Google Images, both of which raise your overall visibility.
Are your images slowing your page down, or are you not getting the Google Images traffic you deserve? Let's optimize all of your site's images and set up alt text and formats together. Get in touch and let's speed up your page end to end.