Google Images drives billions of searches daily. For some queries, image results appear above standard web results. For visual products, how-to content, and inspiration-driven searches, image optimization directly impacts traffic.
But image SEO extends beyond Google Images traffic. Page speed depends heavily on image efficiency. Alt text affects accessibility and main web rankings. Visual content influences engagement metrics that correlate with search performance.
This guide covers technical optimization, accessibility requirements, and strategic approaches to making images work harder for your SEO goals.
Why Image Optimization Matters
Images typically account for 50-70% of total page weight. Unoptimized images slow load times, hurt Core Web Vitals, and damage user experience before anyone sees your content.
Google specifically mentions page speed as a ranking factor, and images are usually the biggest speed problem. A Nashville restaurant’s site dropped three seconds in load time simply by compressing and properly sizing their food photography. Organic traffic increased 28% over the following quarter with no other changes.
Beyond speed, properly optimized images earn traffic directly through Google Images, Pinterest, and other visual search platforms. A single image ranking for a high-volume visual query can drive significant traffic.
Image optimization also supports accessibility requirements. Screen readers depend on alt text to describe visual content to users who can’t see it. Accessibility and SEO align here: what helps screen readers also helps search engines understand image content.
File Format Selection
Choosing the right format affects both file size and visual quality. No single format works best for all images.
WebP offers the best compression for most web images, reducing file sizes 25-35% compared to JPEG and PNG with equivalent quality. Browser support now covers all modern browsers including Chrome, Firefox, Safari, and Edge. WebP should be your default choice for photographs and complex images.
JPEG remains viable for photographs when WebP isn’t supported or when you need guaranteed compatibility. Quality settings around 70-85% typically balance file size and visual fidelity well. Lower settings introduce visible artifacts; higher settings provide diminishing returns.
PNG preserves image quality without compression artifacts and supports transparency. Use PNG for graphics requiring transparency, screenshots with text, and images where quality degradation would be visible. PNG files run larger than JPEG or WebP; don’t use PNG for photographs.
SVG handles icons, logos, and simple graphics efficiently because it uses code rather than pixels. SVG files scale to any size without quality loss and typically weigh less than raster alternatives for simple shapes. Use SVG for anything that could be drawn with basic shapes and text.
AVIF offers even better compression than WebP with excellent quality. Browser support continues expanding but remains incomplete, making fallbacks necessary. Consider AVIF for sites where cutting-edge efficiency matters and you can implement proper fallbacks.
GIF should only be used for simple animations where alternatives aren’t viable. Animated WebP and AVIF offer better compression. Static GIFs waste bytes compared to other formats.
| Format | Best Use | File Size | Quality | Browser Support |
|---|---|---|---|---|
| WebP | General web images | Excellent | Excellent | All modern browsers |
| JPEG | Photos, fallbacks | Good | Good | Universal |
| PNG | Transparency, screenshots | Poor | Lossless | Universal |
| SVG | Icons, logos, graphics | Excellent | Scalable | Universal |
| AVIF | Cutting-edge efficiency | Best | Excellent | Growing, needs fallback |
| GIF | Simple animations only | Poor | Poor | Universal |
File Naming Conventions
File names provide context before Google processes any other image information. Descriptive names help search engines understand and appropriately rank images.
Use descriptive, keyword-relevant names. marathon-training-week-one-schedule.webp tells search engines what the image shows. IMG_4752.webp says nothing useful.
Separate words with hyphens. Search engines read hyphens as spaces, so running-shoes-comparison registers as three distinct words. Underscores connect words into single terms.
Keep names reasonably concise. Include enough description to be meaningful without creating unwieldy file paths. Three to five descriptive words typically suffice.
Avoid keyword stuffing. File names stuffed with tangentially related terms appear spammy. Describe what the image actually shows, not every keyword you hope to rank for.
Be specific rather than generic. running-shoes.jpg could describe thousands of images. brooks-ghost-15-side-profile.jpg describes exactly one image and ranks for more specific queries.
Alt Text Best Practices
Alt text serves two audiences: users who can’t see images (via screen readers) and search engines trying to understand image content. Good alt text serves both.
Describe the image specifically. What does someone see when they look at this image? Describe that clearly and concisely. “Person running” is vague. “Woman in marathon bib number 1847 crossing finish line” is specific.
Include relevant keywords naturally. If the image relates to your page’s topic, relevant keywords fit naturally into accurate descriptions. Don’t force keywords into descriptions where they don’t belong.
Keep alt text under 125 characters. Screen readers may truncate longer text. Convey essential information within this limit.
Avoid “image of” or “picture of” prefixes. Screen readers already announce that content is an image. Starting with “image of” wastes characters on redundant information.
Describe function for functional images. If an image serves as a button or link, describe what it does rather than what it shows. A shopping cart icon might have alt text “View shopping cart” rather than “shopping cart icon.”
Use empty alt for decorative images. Purely decorative images that add no information should have empty alt attributes (alt=””). This tells screen readers to skip them rather than interrupting with meaningless descriptions.
Don’t duplicate surrounding text. If text next to an image already describes it, the alt text shouldn’t repeat that information. Provide complementary information or use empty alt if the text is sufficient.
| Image Type | Alt Text Approach | Example |
|---|---|---|
| Informative | Describe content specifically | "Bar chart showing 40% traffic increase from March to June 2025" |
| Functional | Describe action | "Submit contact form" |
| Decorative | Empty alt attribute | alt="" |
| Complex | Brief alt plus detailed description elsewhere | "Quarterly sales data. Full data table follows." |
Technical Implementation
Proper technical implementation ensures images load efficiently without degrading user experience.
Specify width and height attributes. Including dimensions in HTML reserves space for images before they load, preventing layout shift. Cumulative Layout Shift directly affects Core Web Vitals scores.
<img src="image.webp" width="800" height="600" alt="Description">Implement responsive images. Different devices need different image sizes. A 2000-pixel image wastes bandwidth on mobile screens. Use srcset to serve appropriately sized versions.
<img src="image-800.webp"
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="Description">Implement lazy loading for below-fold images. Images outside the initial viewport shouldn’t block page rendering. Native lazy loading with the loading attribute defers off-screen images.
<img src="image.webp" loading="lazy" alt="Description">Don’t lazy load above-fold images. Images visible on initial page load should load immediately. Lazy loading them delays what users see first, harming perceived performance and Core Web Vitals.
Serve images from your domain or a consistent CDN. Images from multiple external sources can slow rendering and complicate caching. Consolidate image hosting where practical.
Implement format fallbacks. Not all browsers support WebP or AVIF. Use the picture element to provide fallbacks.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>Compression and Quality
Finding the right balance between file size and visual quality requires testing with your specific images.
Use lossy compression for photographs. Photographs contain enough detail that minor compression artifacts go unnoticed. JPEG quality settings of 70-85% or WebP quality of 75-85% typically work well.
Use lossless compression for text and graphics. Screenshots, diagrams, and images with sharp edges show compression artifacts clearly. PNG or lossless WebP preserve quality.
Compress images before upload. Don’t rely solely on CMS or CDN compression. Pre-compress images using tools like Squoosh, TinyPNG, or ImageOptim for maximum efficiency.
Test compression results visually. Automated settings don’t account for individual image characteristics. Review compressed images to ensure acceptable quality.
Strip unnecessary metadata. Camera metadata (EXIF data) adds bytes without SEO value. Strip it unless you specifically need it preserved for attribution or other purposes.
Consider progressive loading for large JPEGs. Progressive JPEGs display a low-quality version immediately, then sharpen as data loads. This improves perceived performance for large images.
Image Sitemaps
Image sitemaps help Google discover images that standard crawling might miss, particularly images loaded dynamically or from JavaScript.
Include images in your main sitemap or create separate image sitemaps. Either approach works; choose based on your site structure and CMS capabilities.
List images under their host page URLs. Images are associated with the pages where they appear, not listed independently.
<url>
<loc>https://example.com/page/</loc>
<image:image>
<image:loc>https://example.com/images/example.webp</image:loc>
<image:caption>Description of the image</image:caption>
</image:image>
</url>Include captions and titles when available. These provide additional context that helps Google understand and rank images appropriately.
Update sitemaps when images change. New images and removed images should reflect in updated sitemaps. Stale sitemaps waste crawl budget on images that no longer exist.
Submit image sitemaps through Search Console. Verify Google processes your sitemap and check for errors in coverage reports.
Structured Data for Images
Schema markup helps search engines understand image context and may enable rich results.
Implement ImageObject schema for important images. This markup provides detailed information about images including creator, license, caption, and description.
{
"@type": "ImageObject",
"contentUrl": "https://example.com/images/example.webp",
"caption": "Marathon training schedule for beginners",
"creator": {
"@type": "Person",
"name": "Jane Smith"
},
"datePublished": "2025-03-15"
}Use appropriate schema for image-heavy content types. Product images should be included in Product schema. Recipe images belong in Recipe schema. How-to step images belong in HowTo schema.
Include images in Article schema. The image property in Article schema helps Google select appropriate images for search results.
Google Images Optimization
Ranking in Google Images requires specific considerations beyond general image optimization.
Choose images that match search intent. People searching for “marathon training plan” want to see actual training schedules, not stock photos of runners. Relevant images earn clicks; irrelevant images get scrolled past.
Use unique images when possible. Stock photos used across thousands of sites compete against each other. Original images have less competition and may be perceived as higher quality.
Ensure images appear on relevant, high-quality pages. Google Images results link to source pages. Images on authoritative, topically relevant pages rank better than identical images on weak pages.
Build backlinks to image-heavy pages. Page authority influences image rankings. Links to pages featuring your images help those images rank.
Monitor Google Images performance in Search Console. Filter search analytics to Google Images to see which queries drive image traffic and which images perform best.
Common Optimization Mistakes
Serving desktop images on mobile. A 2000-pixel image viewed on a 400-pixel screen wastes bandwidth. Implement responsive images to serve appropriate sizes.
Using PNG for photographs. PNG files for photos run several times larger than equivalent JPEG or WebP. Reserve PNG for images requiring transparency or lossless quality.
Forgetting alt text entirely. Empty alt attributes are correct for decorative images. Missing alt attributes entirely is never correct. Screen readers and search engines can’t understand images without alt text.
Keyword stuffing alt text. “Running shoes Nike running shoes best running shoes marathon running shoes” helps no one. Describe what the image actually shows.
Ignoring image file sizes. Large images slow page loads. A beautiful photo that takes five seconds to load won’t be seen by visitors who leave first.
Using CSS to resize images. Displaying a 2000-pixel image at 500 pixels using CSS still downloads the full file. Serve properly sized images instead.
Lazy loading everything. Above-fold images should load immediately. Lazy loading them delays the content users see first.
Neglecting mobile image experience. Images that look great on desktop may be too large, load too slowly, or display awkwardly on mobile devices. Test across screen sizes.
Measuring Image SEO Success
Track these metrics to evaluate image optimization effectiveness.
Page load time and Core Web Vitals should improve as image efficiency increases. Monitor in Search Console and PageSpeed Insights.
Google Images traffic in Search Console shows clicks, impressions, and rankings for image search. Filter analytics to track image-specific performance.
Image bandwidth consumption in analytics shows total data transferred for images. Decreasing bandwidth while maintaining or improving traffic indicates successful optimization.
Bounce rate on image-heavy pages indicates whether visitors engage with content after images load. High bounce rates may suggest images load too slowly or don’t match visitor expectations.
Image engagement metrics including clicks, zooms, and time spent viewing galleries provide insight into which images resonate with users.
Resources
Google Search Central: Image SEO Best Practices
https://developers.google.com/search/docs/appearance/google-images
Google Web Vitals
https://web.dev/vitals/
Squoosh Image Compression Tool
https://squoosh.app/
WebP Developer Documentation
https://developers.google.com/speed/webp
Schema.org ImageObject
https://schema.org/ImageObject