Images account for over 50 percent of the average page weight and are the most common cause of slow websites and poor Core Web Vitals. WebP reduces file size by 25 to 35 percent compared to JPEG, and AVIF by 40 to 55 percent. Combined with responsive srcset attributes and targeted lazy loading, load times can often be cut in half and PageSpeed scores scores significantly improved – without removing any content.
Why Images Are the Most Common Performance Bottleneck
According to HTTP Archive (2025), the median website loads over 900 KB of image data – a significant bottleneck on mobile connections. Images delivered uncompressed or in the wrong format directly impact the Largest Contentful Paint (LCP) : LCP measures when the largest visible element has loaded and is a core Core Web Vitals metric for Google rankings.
- Uncompressed JPEGs and PNGs: Often 5–20x larger than necessary, uploaded directly via CMS
- Wrong format: Using PNG for photos instead of JPEG/WebP wastes unnecessary bytes
- No resizing: A 3000 px wide original image loaded in a 400 px container
- No lazy loading: All images are loaded on page load, even those far down the page
- No CDN: Images served from the origin server instead of from an edge node near the user
WebP and AVIF: Modern Image Formats Compared
WebP and AVIF are the two most important modern image formats for the web. Both offer significantly smaller file sizes compared to JPEG and PNG at equal or better visual quality.
- WebP: 25–35% smaller than JPEG at comparable quality, supports transparency (replaces PNG), universal browser support since 2020
- AVIF: 40–55% smaller than JPEG, even better quality at low bitrates, broad browser support since 2023 (Chrome 85+, Firefox 93+, Safari 16+)
- JPEG XL: Promising, but browser support still incomplete in 2026 – not yet production-ready
- Fallback strategy: Use <picture> and <source type> to offer WebP/AVIF with JPEG as fallback for older browsers
- Conversion: Tools like Squoosh, Sharp (Node.js), cwebp, or image optimization pipelines in the build process
In practice, WebP is recommended as the standard export format with JPEG fallback for most projects. AVIF is worth adding if an automated conversion pipeline is available. A CDN with automatic image optimization with automatic image optimization (Cloudflare Images, Imgix) can fully automate this step.
Responsive Images: Using srcset and sizes Correctly
A common mistake: the website delivers the same large image on desktop as on a 375 px wide smartphone. With the srcset attribute and sizes, the browser can decide for itself which image size to load.
- Rule of thumb for srcset variants: 400w, 800w, 1200w, 1600w – covers mobile to desktop
- sizes attribute: Corresponds to the actual CSS width of the image in the layout (e.g., '(max-width: 768px) 100vw, 50vw')
- Retina displays: 2x variant for sharpness on HiDPI screens, but consider the file size tradeoff
- Art direction with <picture>: Different image crops for mobile vs. desktop via the media attribute
- Angular NgOptimizedImage: Automatic srcset generation, aspect ratio reservation, and fetchpriority control built in
Lazy Loading: Which Images Benefit From It
Lazy Loading for images means: images are only loaded when they scroll into the visible area of the browser. This significantly reduces the initial data volume – especially on image-heavy pages. For initial rendering, it is crucial that above-the-fold images are explicitly excluded from lazy loading.
- Native Lazy Loading: loading='lazy' attribute on the <img> tag – no JavaScript required, all modern browsers support it
- Do NOT lazy load the LCP image: The main image in the visible area (hero, product image) must receive loading='eager' or fetchpriority='high'
- Angular NgOptimizedImage: Set the priority prop for LCP images – they automatically receive fetchpriority='high' and a preload link
- Placeholder dimensions: Always specify width and height so the browser reserves space and no layout shift occurs
- Intersection Observer API: JavaScript fallback for more complex lazy loading scenarios (background images, iFrames)
In Angular projects, NgOptimizedImage (stable since Angular 15) is the recommended approach for all images. It enforces width/height specifications, generates srcset variants, and integrates cleanly with the caching behavior behavior of CDNs and service workers.
Summary
- WebP as standard: 25–35% smaller than JPEG, universal browser support – no reason to use JPEG/PNG as primary format today
- AVIF as a bonus: Even smaller when a conversion pipeline or CDN handles automation
- Always set srcset + sizes: Let the browser choose the right image size
- Never lazy load the LCP image: fetchpriority='high' and no loading='lazy' for the most important image in the visible area
- All other images: Enable loading='lazy' by default
- Always specify dimensions: width + height prevent Cumulative Layout Shifts (CLS)
- Angular: Use NgOptimizedImage – handles srcset, LCP warnings, and fetchpriority automatically
