Image optimization mistakes drain Core Web Vitals scores, tank mobile usability, and waste crawl budget. Most errors stem from misunderstanding format tradeoffs, ignoring responsive delivery, or treating alt text as an afterthought—all fixable with systematic audits and revised workflows.
One of the most pervasive image optimization errors is serving a single 2400px-wide image to every viewport. A 1.2 MB hero image might look sharp on a 27-inch monitor, but a phone on LTE downloads the same bloated file even though its CSS scales it down to 375px. The result: slow Largest Contentful Paint, frustrated users, and wasted data on metered Canadian mobile plans.
The fix is responsive images using the srcset and sizes attributes. Define multiple resolutions—say 400w, 800w, 1200w, 1800w—and let the browser pick the appropriate file based on device pixel ratio and viewport width. WordPress handles this automatically for uploads if your theme declares image sizes correctly. For custom builds, tools like Cloudinary or Imgix generate srcset on the fly. The key is testing: inspect DevTools Network tab on throttled 3G to confirm the smallest viable variant is loading, not the full-resolution original.
WebP and AVIF deliver smaller file sizes at equivalent quality, but deploying them carelessly creates compatibility gaps. Older Safari versions, some enterprise browsers, and email clients rendering HTML newsletters cannot decode AVIF. Serving AVIF-only images results in broken visuals for a non-trivial slice of traffic.
The solution is the picture element with format fallback layers: AVIF as the first source, WebP second, and JPEG or PNG as the final fallback. This ensures modern browsers get the savings while legacy clients degrade gracefully. Server-side detection via Accept headers works too, but picture is more reliable and doesn't depend on backend logic. Avoid replacing all JPEGs in bulk without testing—audit which images truly benefit from next-gen compression and which need universal compatibility, especially for transactional emails or PDFs that embed images.
Alt attributes exist for screen readers and scenarios where images fail to load. Stuffing them with target keywords—"best Ottawa SEO agency affordable local optimization services Canada"—degrades accessibility and triggers Googlebot spam filters. Search engines parse alt text contextually; unnatural phrasing stands out.
Effective alt text describes the image content concisely and specifically. For a photo of a team meeting, "Three developers reviewing wireframes on a whiteboard" is useful. "Developers" alone is too vague; a paragraph-long description is excessive. Decorative images—dividers, background textures—should have empty alt="" to signal they convey no semantic information. Tools like WAVE or axe DevTools flag missing or suspicious alt text during audits. If your CMS auto-populates alt with the filename (IMG_2371.jpg), that's a red flag; human review is mandatory.
Lazy loading defers image downloads until they enter the viewport, which saves bandwidth for below-the-fold content. But applying loading="lazy" to hero images, logos, or first-screen product shots delays LCP, because the browser won't start fetching until JavaScript executes and the element scrolls into view—even if it's already visible on page load.
Mark above-the-fold images with loading="eager" or omit the attribute entirely so they load immediately. Reserve lazy loading for carousels, galleries, blog thumbnails, or anything past the initial viewport. Combine this with fetchpriority="high" on your LCP image to hint the browser it's critical. On image-heavy pages, audit what users actually see on a 1366x768 laptop and a 375x667 phone—anything visible without scrolling should load eagerly. The Lighthouse report in PageSpeed Insights will flag lazy-loaded LCP images directly.
Photos exported from Photoshop, Lightroom, or smartphone cameras often carry EXIF data—geolocation, camera settings, thumbnail previews—and embedded ICC color profiles that add kilobytes per image. While color profiles ensure accurate rendering in design workflows, most web browsers apply sRGB by default, making the embedded profile redundant bloat.
Strip EXIF metadata during the build or upload process using tools like ImageOptim, TinyPNG, or Sharp in a Node.js pipeline. Keep orientation tags if needed, but remove everything else. For color profiles, convert to sRGB and discard the profile unless you're displaying professional photography where color fidelity is contractual. A 500 KB image can drop to 480 KB just by removing metadata—multiply that across hundreds of product photos and the savings accumulate. Automated workflows in CI/CD pipelines or CMS plugins prevent this from becoming a manual chore.
Omitting width and height on img tags causes layout shifts as images load, because the browser doesn't reserve space until it downloads the file and measures dimensions. This directly harms Cumulative Layout Shift, one of Core Web Vitals. Users experience content jumping mid-read, especially on slower connections where images trickle in after text.
Modern browsers use aspect-ratio calculations from width and height attributes even when CSS makes images responsive. Set width="1200" height="800" on the HTML element, then apply width: 100%; height: auto; in CSS. The browser allocates the correct space immediately, preventing shifts. For dynamically loaded images—like those from a headless CMS—extract dimensions server-side or via JavaScript before rendering. WordPress and most modern frameworks inject these automatically, but custom-built sites often overlook it. Lighthouse flags missing dimensions under the CLS section; fixing this is low-effort, high-impact.
Hosting images on a single origin server without a CDN penalizes users far from that data center. A Montreal visitor requesting images from a Vancouver server experiences higher latency than necessary. Even with optimal compression, network round-trip time dominates load performance on mobile networks.
CDNs like Cloudflare, Fastly, or BunnyCDN cache images at edge locations globally, reducing Time to First Byte for image requests. Many CDNs also offer on-the-fly image transformations—resizing, format conversion, quality adjustment—so you upload one master file and serve optimized variants per request. For Canadian audiences, ensure the CDN has points of presence in Toronto and Montreal at minimum. Check Cache-Control headers are set correctly (max-age=31536000 for immutable images) so repeated visits skip revalidation. Free tier Cloudflare is sufficient for most sites; paid tiers add better analytics and prioritized routing.
Serve AVIF with a WebP fallback and JPEG as the final layer using the picture element. AVIF offers the best compression for photographic content, but some browsers still lack support. JPEG remains the universal baseline. Avoid PNG for photos unless transparency is required, as file sizes balloon. Test a sample product image through Squoosh to compare visual quality at equivalent file sizes before committing to a format strategy.
Run PageSpeed Insights and focus on the Opportunities section—it flags oversized images, missing dimensions, and inefficient formats with specific files listed. Use Screaming Frog to crawl your site and filter images over 100 KB, then cross-reference against actual display sizes in DevTools. Check Network tab on throttled 3G in Chrome to identify which images dominate load time. For accessibility, run axe DevTools to catch missing or poor alt text across pages.
Googlebot executes JavaScript and respects lazy loading, so images eventually render during indexing. The SEO risk is indirect: slow LCP from lazy-loaded hero images damages Core Web Vitals, which influences rankings. Ensure critical images load eagerly and use loading="lazy" only for below-the-fold content. Google's Mobile-Friendly Test shows what Googlebot sees after rendering, so verify images appear there. Properly implemented lazy loading improves crawl efficiency without harming discoverability.
AI alt text is a starting point, not a final solution. Services like Azure, Google Vision, or AWS Rekognition generate generic descriptions—"a person sitting at a desk"—but lack context about why the image exists on your page. Edit AI suggestions to add specificity and relevance. For decorative images, manually set empty alt attributes. Never auto-publish AI alt text without human review, especially for accessibility compliance or nuanced brand content where tone matters.
Aim for under 200 KB for desktop hero images and under 80 KB for mobile variants when using modern formats like WebP or AVIF. This balances visual quality with acceptable LCP times on 3G connections. If your hero is a complex illustration or high-contrast photo, you might push 250 KB, but test on throttled networks to ensure LCP stays under 2.5 seconds. Use progressive JPEG encoding so a low-quality preview renders immediately while the full image streams in.
SVG is ideal for logos, icons, and simple illustrations because it scales infinitely and file sizes are tiny—often under 5 KB. However, complex SVGs with gradients, filters, or embedded fonts can exceed equivalent PNGs. Also, inline SVG code bloats HTML if overused. For decorative icons repeated across pages, reference a sprite sheet or serve as separate .svg files. For photographs or textured graphics, stick with raster formats. Optimize SVGs through SVGO to strip metadata and simplify paths before deploying.