Image Optimization Audit - WebP, Compression & Lazy Loading

Oversized images directly harm Largest Contentful Paint (LCP) scores—often the largest visible content element is a hero image. An unoptimized 3 MB hero image might take 5-10 seconds to load on mobile, creating poor LCP scores and hurting rankings. Image optimization can reduce page weight by 50-80%. Responsive images serving appropriately sized versions for different screen sizes dramatically improve mobile performance. Images without specified dimensions cause layout shifts, harming Cumulative Layout Shift (CLS) scores.

Screen readers read alt text aloud to blind and visually impaired users. Without alt text, images are completely invisible to these users. The Americans with Disabilities Act (ADA) requires websites be accessible. Website accessibility lawsuits have increased from under 800 in 2017 to over 4,000 in 2021, many citing missing alt text. Settlements and legal fees can reach hundreds of thousands of dollars. Prevention through proper implementation is far cheaper than litigation.

Google Image Search represents a significant traffic source—over 60% of consumers want to search using images rather than text. For products, recipes, and visual content, image search often drives 20-40% of total search traffic. Alt text helps Google understand image content. Since mid-2021, Core Web Vitals have been ranking factors. Large, unoptimized images harm performance metrics, potentially reducing rankings. Fast-loading, optimized images improve scores, potentially boosting rankings.

Users form opinions about websites within milliseconds. 40% of users abandon pages that take more than 3 seconds to load. For e-commerce, 67% of consumers say image quality is very important in selecting and purchasing products. Yet large, slow-loading images harm conversions. Modern image formats and compression allow beautiful, detailed photography without enormous file sizes. Many mobile users have limited data plans—optimized images respect users' data constraints while providing good experiences.

We count how many images have alt text and how many are missing it entirely. Images without alt text are invisible to screen reader users and miss SEO opportunities in image search. We provide specific examples of images missing alt attributes.

We detect whether your site uses modern formats like WebP (25-35% smaller than JPEG) and SVG (scalable vector graphics). Sites using only legacy formats like JPEG and PNG are flagged, as modern formats significantly reduce page weight.

We check whether sites serve different image sizes for different viewport widths. Mobile users with 375px screens don't need 2000px images. We verify appropriate sizing accounting for high-DPI displays (2x, 3x density) while avoiding oversized images for standard displays. We identify cases where art direction (different crops for different viewports) could improve mobile presentation and check for bandwidth-aware loading based on connection speed.

We check for the loading="lazy" attribute on images. Sites with more than 5 images should use lazy loading to defer offscreen images, improving initial page load. We report how many images are lazy loaded vs loaded immediately.

We check for srcset attributes and picture elements that serve different image sizes for different viewports. Mobile users do not need 2000px images. We count how many images use responsive techniques.

• Describe what's in the image specifically and clearly, keeping descriptions under 125 characters.
• For product images, include brand, product name, color, key features, and variant shown.
• For informational images and diagrams, convey the key information or message visually presented.
• For decorative images, use empty alt attributes (alt="") to signal screen readers to skip them.
• For functional images (buttons, links), describe the action or destination, not appearance.
• Don't begin with "image of" or "picture of"—screen readers already announce images.
• Don't stuff keywords unnaturally or write overly long descriptions.
• Test with images disabled and screen reader software to verify alt text conveys information effectively.

• For JPEG images, use compression levels of 75-85% quality for excellent quality with significant file size reduction.
• For PNG images, use PNG optimization tools and convert photographs mistakenly saved as PNG to JPEG or WebP.
• Use tools like TinyPNG, Squoosh, ImageOptim, or FileOptimizer for compression.
• Strip EXIF data, color profiles, thumbnails, and other metadata (can reduce size by 10-30%).
• Test different compression levels to find optimal balance between quality and size.
• For e-commerce and portfolios where quality is critical, use higher quality settings.
• For decorative images where quality is less critical, use more aggressive compression.
• Integrate automated optimization into build processes or content management systems.

• Create WebP versions of all images in addition to JPEG/PNG originals (typically 25-35% smaller).
• Use picture elements or content negotiation to serve WebP to supporting browsers with JPEG/PNG fallback.
• For maximum compression, create AVIF versions in addition to WebP and JPEG.
• Use picture element to serve AVIF to supporting browsers, falling back to WebP, then JPEG.
• For photographs and complex images, use JPEG, WebP, or AVIF.
• For graphics, logos, and images with transparency, use PNG or WebP.
• For simple logos and icons, consider SVG (vector format, infinitely scalable, often tiny file sizes).
• For animations, use video formats (MP4, WebM) instead of GIF when possible—5-10x smaller.

• Generate multiple size variations: small (320-480px) for mobile, medium (768-1024px) for tablets, large (1200-1600px) for desktop.
• Double resolutions for high-DPI displays (2x pixel density).
• Use picture element for art direction (different crops for different viewports) and format flexibility.
• For simpler responsive images, use srcset and sizes attributes—srcset lists available sizes, sizes tells browsers which to use.
• Test on various devices and screen sizes to verify appropriate images load for each viewport.
• Check that high-DPI displays receive higher resolution images.
• Confirm file sizes are appropriate for each variation—don't serve 2000px images to 400px displays.

• Use native lazy loading via loading="lazy" attribute on images—simplest implementation with no JavaScript required.
• Only lazy load images below the fold—never lazy load images visible on initial page load.
• Set appropriate loading thresholds so images load before users scroll to them.
• Include proper fallbacks for browsers not supporting native lazy loading using JavaScript libraries like lazysizes.
• Maintain image dimensions to prevent layout shifts as images load.
• Don't lazy load critical images like logos, hero images, or above-the-fold content.
• Test across browsers and devices and monitor Core Web Vitals to ensure lazy loading improves performance.

• Include width and height attributes on all images matching their intrinsic dimensions.
• For responsive images where display size varies, use CSS to maintain aspect ratio while allowing flexible sizing.
• Use modern CSS aspect-ratio property to specify aspect ratio separately from fixed dimensions.
• Dimension attributes let browsers allocate space before images load, preventing content from jumping (improves CLS).
• For images with flexible widths, set max-width to 100% allowing images to scale down while height: auto maintains proportions.
• Use aspect-ratio property to reserve space before images load for responsive implementations.

• Use descriptive names that indicate image content and include relevant keywords naturally.
• Use hyphens to separate words for readability (not underscores or spaces).
• Keep filenames concise but meaningful and use lowercase for consistency.
• Rename generic filenames (IMG_1234.jpg) to descriptive alternatives (product-name-blue-front-view.jpg).
• For products, include brand, product name, color, and variant in filename.
• For content images, describe the scene or subject clearly.
• Avoid special characters, spaces, or non-standard characters in filenames.
• Use logical directory structures organizing images by category, date, or purpose.

• Never leave alt text missing entirely—every meaningful image must have alt text.
• Don't serve full-resolution images to all devices—implement responsive images for appropriate sizing.
• Don't ignore modern formats (WebP, AVIF)—they provide 25-50% file size reduction.
• Always compress images before uploading—a 5 MB camera photo might compress to 200 KB with no visible quality loss.
• Don't lazy load above-the-fold images—only lazy load images below the fold that users may never see.
• Always include width and height attributes to prevent layout shifts as images load.
• Don't write alt text that's too generic ("image"), too long (hundreds of characters), or stuffed with keywords.
• Don't use GIF for animations—use video formats (MP4, WebM) which are 5-10x smaller.
• Don't block images in robots.txt—allow Google to crawl images for proper image search indexing.