Progressive Web Apps (PWAs) are judged by Lighthouse performance scores, which heavily weight image optimisation. Large, uncompressed images are the single most common cause of poor Lighthouse performance ratings. At imgresizr.com, you can compress and optimise images for PWAs to maximise your Lighthouse scores, completely free.
PWA Image Lighthouse Requirements
| Audit | Target |
|---|---|
| Properly sized images | Images no larger than displayed size |
| Efficient image formats | Use WebP or AVIF |
| Defer offscreen images | Lazy load below-fold images |
| LCP (Largest Contentful Paint) | Hero image loads in under 2.5 seconds |
How to Compress PWA Images at imgresizr.com
Upload your image to imgresizr.com. Use the Resize tool to set images to their actual displayed dimensions — serving a 3000px image for a 600px display element wastes bandwidth unnecessarily. Convert to WebP using the Convert tool — WebP provides 25–35% better compression than JPEG at equivalent quality. Use the Compress tool to set quality at 80–85% for photographs and 90% for graphics with text — this is the optimal quality-to-filesize ratio. Target under 200KB for hero images and under 100KB for content images. Create multiple responsive sizes (400px, 800px, 1200px widths) and use the srcset HTML attribute to serve the appropriate size for each device. Export as WebP for all images, with JPEG fallbacks for older browsers.
PWA Image Optimisation Tips
- Run Lighthouse audit after optimising each image batch to measure progress
- Preload the LCP (Largest Contentful Paint) image with <link rel="preload"> for fastest perceived load
- Use Service Worker caching to serve images from cache after the first visit
- AVIF format provides even better compression than WebP but has slightly lower browser support
- Avoid base64-encoded images in CSS — they cannot be cached separately and bloat your CSS file
Compress and convert images for PWA Lighthouse optimisation, free at imgresizr.com.