Images are the single biggest cause of slow websites — and slow websites lose rankings. An unoptimized image library can add 3–5 seconds to your page load time, pushing your Core Web Vitals scores into the red and your rankings down the page.
At the same time, properly optimized images are an underused traffic source. Google Image Search drives billions of searches monthly. Pages with well-structured image markup rank in image results and earn clicks that their competitors never see.
Image SEO is one of the highest-leverage, lowest-effort optimizations available to small businesses. Most of it can be done in an afternoon and yields improvements that last for years.
Image compression is the highest-impact, lowest-complexity SEO task that most small businesses haven't done. A raw photo from a modern smartphone is 3–8MB. That same image, compressed without visible quality loss, can be 120–200KB — a 95%+ reduction in file size that makes your page load dramatically faster.
The tools to use:
For existing websites with hundreds of unoptimized images, use a WordPress plugin like ShortPixel or EWWW Image Optimizer to bulk-compress your entire media library in one operation. This single action often improves Google PageSpeed Insights scores by 20–30 points.
WebP is a modern image format developed by Google that produces files 25–35% smaller than JPEG and PNG at equivalent visual quality. Since Google created WebP specifically to speed up the web, it's no surprise that switching to it improves PageSpeed Insights scores and LCP times.
Browser support for WebP is now universal — all modern browsers including Chrome, Firefox, Safari, and Edge support it. The only remaining edge case is very old mobile browsers, but these represent under 1% of web traffic in 2026.
How to convert:
For vector graphics — logos, icons, simple illustrations — use SVG format instead. SVG files are resolution-independent and typically tiny in file size, with no quality degradation at any screen size.
File names are one of the signals Google uses to understand image content. A descriptive file name makes your images eligible to rank in Google Image Search for relevant queries and adds a subtle contextual signal to the page.
The rules for SEO-friendly image file names:
Examples:
Rename files before uploading. Changing file names after they're live breaks any existing links or references to the image and requires setting up redirects — an unnecessary complication.
Alt text (alternative text) is an HTML attribute that describes an image's content. Its primary purpose is accessibility — screen readers read alt text aloud to visually impaired users. Its secondary benefit is SEO — search engines use alt text to understand image content and index images for image search results.
Writing effective alt text:
Describe what's actually in the image. "Plumber replacing water heater in residential basement" accurately describes the image. "Best plumber Cincinnati cheap affordable fast" is keyword stuffing and violates Google's guidelines.
Include the page keyword where it naturally fits. If your page is about water heater repair in Cincinnati, "water heater replacement Cincinnati home" is natural and relevant. Don't force the keyword — if it doesn't fit, don't use it.
Keep alt text under 125 characters. Screen readers truncate at this length. Be descriptive but concise.
Don't start with "Image of" or "Photo of." Google already knows it's an image. Start with the description directly.
Leave alt text empty for purely decorative images. Dividers, background patterns, and decorative icons don't need alt text. Use alt="" (empty attribute) so screen readers skip them without confusion.
Cumulative Layout Shift (CLS) — one of Google's Core Web Vitals — measures how much your page layout shifts as images load. When a browser doesn't know an image's dimensions in advance, it reserves no space for it. When the image finally loads, it pushes surrounding content down, causing the layout shift that annoys users and tanks your CLS score.
The fix is simple: add explicit width and height attributes to every img tag in your HTML.
<img src="roof-repair-denver.webp"
alt="Roof repair in progress on Denver residential home"
width="800" height="600"
loading="lazy">
With these dimensions specified, the browser reserves the correct space before the image loads, completely eliminating layout shift for that element. WordPress automatically adds width and height attributes when you insert images through the media library — custom-built sites and page builders sometimes require manual addition.
Lazy loading delays loading images until they enter the user's viewport. Images below the fold — those the user hasn't scrolled to yet — don't load until needed. This dramatically reduces the amount of data loaded on initial page render, improving LCP and overall page speed.
Modern browsers support native lazy loading with a single HTML attribute:
<img src="example.webp" alt="Description" loading="lazy">
One critical exception: never add loading="lazy" to your LCP element — the largest above-the-fold image that determines your LCP score. That image should load immediately. Add loading="eager" or simply omit the lazy attribute on your hero/banner image.
For businesses with product images, recipe photos, or instructional images, adding structured data (schema markup) makes images eligible for rich results in Google Search — enhanced listings that appear above standard results with visual elements.
Product pages can use Product schema with image properties. Recipe sites use Recipe schema with image. How-to guides use HowTo schema with step images. Each of these schemas, when implemented correctly, signals to Google that your images are high-quality and contextually relevant — improving eligibility for both image search and enhanced web search results.
| Optimization | SEO Benefit | Tool | Time Required |
|---|---|---|---|
| Compression | Faster LCP, better PageSpeed score | TinyPNG / ShortPixel | 30 min (bulk) |
| WebP conversion | 25–35% smaller files, faster load | Imagify / Squoosh | 1–2 hours (bulk) |
| Descriptive file names | Image search rankings | Manual (before upload) | Ongoing habit |
| Alt text | Image search, accessibility, context | CMS media fields | 2–3 min per image |
| Width/height attributes | CLS reduction (Core Web Vitals) | HTML / CMS auto | Low if automated |
| Lazy loading | Faster initial load, better LCP | loading="lazy" attribute | Low (plugin or HTML) |
Fast, optimized pages attract more visitors. AI agents make sure those visitors hear back from you instantly.
See how The Turn AI handles every inquiry automatically — even at 2am →
Alt text is an HTML attribute that describes an image in words. Screen readers use it for visually impaired users. Search engines use it to understand image content since they cannot see images the way humans do. Well-written alt text that includes relevant keywords helps images rank in Google Image Search and adds contextual signals to the surrounding page content.
WebP is the best format for most web images in 2026. It delivers 25–35% smaller file sizes than JPEG and PNG at equivalent visual quality, directly improving page speed and LCP scores. For logos and icons with transparency, WebP or SVG are ideal. AVIF is even more efficient but has slightly lower browser support — fine to use if your audience is on modern browsers.
Target under 150KB for most web images. Hero images can go up to 300KB if further compression noticeably degrades quality. Thumbnails and inline content images should be under 80KB. Run every image through TinyPNG or ShortPixel — it takes seconds and often cuts file size by 60–80% with no visible quality loss.
Yes. Google's crawlers read file names as a signal about image content. "roofing-repair-denver-co.webp" tells Google exactly what the image shows. "IMG_4823.jpg" tells Google nothing. Use descriptive, hyphen-separated file names with relevant keywords before uploading — you can't easily rename files after they're referenced across your site without creating broken links.
Lazy loading delays loading images until they're about to enter the user's viewport — images below the fold don't load until the user scrolls to them. This dramatically improves initial page load time and LCP scores. Add loading="lazy" to all img tags except your LCP hero image, which should load immediately. Modern browsers support lazy loading natively with no JavaScript required.