Image optimization directly affects page speed, Core Web Vitals, and how well search engines understand your content. This tutorial walks through format selection, compression workflows, lazy loading, alt text strategy, and delivery methods that balance SEO visibility with fast load times.
Format choice controls both file size and quality retention. For photographs and complex graphics, WebP offers strong compression with broad browser support; AVIF delivers even smaller files but compatibility is still rolling out across older Safari and Firefox versions. Use JPEG as a fallback when serving WebP through picture elements or server-side content negotiation. For logos, icons, and simple illustrations, SVG provides resolution independence and tiny file sizes since it's vector-based, though you lose that advantage with complex artwork. PNG remains useful when you need transparency and don't want to risk compatibility issues, but compress PNGs aggressively with tools like TinyPNG before upload. Avoid BMP and uncompressed TIFF files entirely for web delivery. Test format support in your analytics; if a meaningful percentage of your Canadian audience uses older devices, serve WebP with a JPEG fallback rather than relying on AVIF alone. The goal is smaller file sizes without visible quality loss, which directly improves Largest Contentful Paint scores.
Compression happens in two phases: before upload and at delivery. Before you add images to your CMS, run them through a dedicated compression tool. Squoosh is a browser-based option that lets you preview quality changes in real time; ImageOptim works well for batch processing on Mac; Windows users can use FileOptimizer or the command-line tool cjpeg. For most photographic content, a quality setting between 75 and 85 produces files that look identical to the source on typical displays while cutting file size substantially. Avoid saving at 100 percent quality; the size penalty is steep and human eyes cannot discern the difference. If your CMS includes automatic compression, verify it's actually enabled and set to reasonable thresholds; WordPress plugins like ShortPixel or Imagify handle this server-side after upload. For e-commerce sites with hundreds of product images, consider a bulk optimization pass during off-peak hours. Progressive JPEGs load top-to-bottom in passes, improving perceived speed. Monitor file sizes in your media library; if you see product photos over 300KB or hero images over 500KB, revisit your compression settings.
Lazy loading defers image requests until the user scrolls near them, which cuts initial page weight and speeds up First Contentful Paint. Modern browsers support the loading attribute natively; add loading="lazy" to img tags for any image below the fold. Hero images and anything visible on initial viewport load should use loading="eager" or omit the attribute entirely to avoid layout shift. Combine lazy loading with responsive srcset attributes to serve appropriately sized files based on device width. Define multiple image sources in srcset with width descriptors, and let the browser choose the best fit. For example, a hero image might have variants at 480w, 768w, 1024w, and 1920w, with sizes attribute hinting the layout width. This prevents sending a 2400-pixel image to a mobile visitor who only needs 480 pixels. WordPress and most CMSs generate srcset automatically if you upload a large source file, but verify the markup in your page source. Pair this with aspect-ratio CSS properties to reserve layout space, preventing cumulative layout shift as images load. Test on real devices or Chrome DevTools device emulation to confirm the correct variant is requested.
Alt text describes image content for screen readers and provides context when images fail to load. It also signals relevance to search engines, particularly for image search rankings and overall page topic alignment. Describe what the image shows in plain language, aiming for one to two sentences that convey the essential information. Avoid starting with "image of" or "picture of"; jump straight to the description. If the image contains text, include that text in the alt attribute. For decorative images that add no informational value, use an empty alt attribute (alt="") so screen readers skip them. For product images, include the product name and key distinguishing features; for blog graphics, describe the concept or data the image illustrates. Incorporate relevant keywords naturally when they fit the actual content of the image, but never stuff alt text with terms unrelated to what's shown. Image filenames also matter; rename "IMG_1234.jpg" to "red-maple-leaf-autumn-ottawa.jpg" before upload. Search engines parse filenames as context clues. Review alt text in batches using a CMS media audit; missing alt attributes are both an accessibility failure and a missed SEO opportunity.
How you deliver images matters as much as how you compress them. Serve images through a content delivery network to reduce latency; CDNs cache files on edge servers closer to the visitor, cutting response time especially for international traffic. Cloudflare, Fastly, and BunnyCDN all offer image optimization features that automatically convert to WebP or AVIF based on browser support. Set long cache lifetimes in HTTP headers (one year for images that never change) and use versioned filenames or query strings when you update an image. Enable Brotli or Gzip compression for SVG files, which are text-based and compress well. Consider an image CDN like Imgix or Cloudinary if you need real-time resizing, cropping, or format conversion via URL parameters; these services handle responsive variants on the fly, which simplifies CMS workflows for media-heavy sites. For Canadian audiences, choose a CDN with Toronto or Montreal edge locations to minimize cross-border latency. Monitor Core Web Vitals in Google Search Console; if LCP is flagged, trace whether oversized images or slow delivery are the root cause, then adjust compression or CDN settings accordingly.
Run Lighthouse audits in Chrome DevTools or use PageSpeed Insights to identify oversized images, missing dimensions, and opportunities to adopt modern formats. These tools flag specific files and provide byte-saving estimates. Compare before-and-after load times using WebPageTest with a throttled connection profile; test from Toronto or Vancouver servers to simulate Canadian visitor experience. Track LCP, CLS, and total page weight over time in a spreadsheet or monitoring tool like SpeedCurve. If you deploy changes in batches, measure impact week-over-week to confirm improvements stick. For e-commerce sites, correlate page speed changes with bounce rate and conversion metrics in Google Analytics; faster product pages often see lower bounce rates, though many variables influence this. If a particular template consistently shows slow LCP, audit the hero image: is it too large, served in an outdated format, or loaded from a slow origin? Revisit compression settings quarterly as new tools and formats emerge. Image optimization is not a one-time task; new content and design changes introduce new images that need the same rigor.
Aim for hero images under 200KB after compression for typical full-width desktop layouts, though this depends on image complexity. A simple gradient or illustration might weigh 50KB, while a detailed photograph could reach 300KB and still be acceptable if properly compressed. Use WebP format with quality around 80, and always provide a mobile-optimized variant under 100KB for smaller screens.
WebP is the safer default today because browser support is near-universal, including older iOS and Android devices. AVIF offers better compression ratios but compatibility gaps remain in some enterprise browsers and older Safari versions. Serve AVIF with a WebP or JPEG fallback using picture elements if you want the smallest possible files, or stick with WebP alone to simplify delivery and avoid compatibility testing.
Image sitemaps help search engines discover images that aren't easily found by crawling page markup, particularly for images loaded via JavaScript or embedded in galleries. They're less critical if your images appear in standard img tags with good alt text and structured data, but submitting an image sitemap in Google Search Console can improve indexing for visually focused sites like portfolios or e-commerce catalogs.
Plugins like ShortPixel, Imagify, or Smush handle compression and format conversion, which saves manual effort, but verify their settings align with your quality and performance targets. Some plugins compress too aggressively by default or fail to generate responsive srcset properly. Always test the output file sizes and run a Lighthouse audit after enabling a plugin to confirm it's delivering real improvements without introducing layout shift or quality loss.
Lazy loading does not prevent Google from indexing images; Googlebot executes JavaScript and scrolls pages to discover lazily loaded content. However, lazy loading images that appear above the fold can delay LCP and harm Core Web Vitals scores, which indirectly affects rankings. Reserve lazy loading for below-the-fold images only, and ensure your hero or primary content images load immediately without deferral.
Run a Screaming Frog crawl with image extraction enabled, then export the list of images missing alt attributes. Most CMSs also offer media library plugins that flag images without alt text; for WordPress, try the Accessibility Checker plugin. Prioritize fixing alt text on high-traffic pages and product images first, then tackle blog posts and secondary pages in batches. Assign alt text writing to content editors as part of the regular publishing workflow to prevent future gaps.