Images are an SEO opportunity and a liability. Done right, they earn traffic from Google Images, improve accessibility, and contribute to engagement. Done wrong, they tank Core Web Vitals, fail accessibility audits, and waste a real ranking opportunity. This guide covers the practices that matter.
Image SEO does three things: helps images themselves rank in Google Images and AI assistants, improves accessibility for screen readers, and protects page speed (Core Web Vitals). The fundamentals: descriptive filenames, real alt text, modern formats (WebP/AVIF), explicit width/height, and lazy loading for below-the-fold images.
Images are an SEO opportunity and a liability. Done right, they earn traffic from Google Images, improve accessibility, and contribute to engagement. Done wrong, they tank Core Web Vitals, fail accessibility audits, and waste a real ranking opportunity. This guide covers the practices that matter.
Save images with descriptive, hyphenated, lowercase filenames before uploading. "yorkville-toronto-skyline.jpg" tells Google what the image shows; "IMG_4582.JPG" tells it nothing. Filenames are a direct image-ranking signal and they take seconds to fix in your asset workflow.
Alt text describes the image for screen readers, for browsers when images fail to load, and for search engines indexing image content. The right alt text is a literal description of what the image shows, not a stuffed string of keywords.
If the image is purely decorative (a divider, an icon next to a text label that says the same thing), use empty alt (alt="") so screen readers skip it. Empty alt is correct; missing alt is a bug.
Serve WebP or AVIF for photos and PNG-style graphics. Both compress dramatically better than JPEG/PNG (often 30–50% smaller at equivalent quality), all modern browsers support them, and Lighthouse explicitly flags legacy formats as a Core Web Vitals problem.
Use the <picture> element with multiple <source> elements to serve modern formats with safe fallbacks for ancient browsers. Most platforms (Cloudinary, ImageKit, Next.js Image, Shopify, WordPress with Smush/ShortPixel) automate this.
Use srcset and sizes to serve different image sizes to different viewports. A mobile user shouldn't download the same 2,000-pixel-wide image as a desktop user. Responsive images can cut mobile data usage by 50%+ and dramatically improve Largest Contentful Paint.
Most static-site frameworks and image CDNs handle responsive image generation automatically. WordPress generates srcset by default in modern versions.
Always specify explicit width and height attributes on every <img> tag. They prevent layout shift (Cumulative Layout Shift, the third Core Web Vital), and modern browsers use them to reserve space before the image loads.
Use loading="lazy" on below-the-fold images so they only load when scrolled into view. For above-the-fold hero images, do the opposite: use loading="eager" and consider fetchpriority="high" to ensure they paint fast.
Add ImageObject structured data on visually-important pages (recipes, products, articles) to give Google and AI assistants richer metadata. For products, include the image in your Product schema's image field. For articles, set image in Article/NewsArticle schema. This is what unlocks image-rich SERP features.
Toronto SEO works with ambitious businesses across the GTA on the exact playbooks taught in this hub. Get a free, senior-led audit of where your SEO program stands today.