Performance: All PNG images are 2+ MB each (unoptimized) #97

New Issue

Closed

opened 2026-05-17 21:15:55 -05:00 by null · 0 comments

null commented

2026-05-17 21:15:55 -05:00

Owner

Problem

Every PNG in public/assets/ is 2.0-2.4MB. The hero image alone (hero-tech.png) is 2.2MB. The about image is 2.4MB. No lazy loading on any images.

For a mobile user on 3G, the Home page alone could take 5+ seconds just for images. Directly impacts LCP.

Fix

Convert all PNGs to WebP (typically 60-80% smaller at same quality)
Add responsive srcset for hero image
Add loading=lazy to all below-fold images
Target: each image under 200KB, hero under 400KB

Files

All images in public/assets/
src/pages/Home.jsx - add loading=lazy to hero image
All pages with img tags - add loading=lazy

Severity

High - directly impacts LCP and mobile performance

## Problem Every PNG in public/assets/ is 2.0-2.4MB. The hero image alone (hero-tech.png) is 2.2MB. The about image is 2.4MB. No lazy loading on any images. For a mobile user on 3G, the Home page alone could take 5+ seconds just for images. Directly impacts LCP. ## Fix 1. Convert all PNGs to WebP (typically 60-80% smaller at same quality) 2. Add responsive srcset for hero image 3. Add loading=lazy to all below-fold images 4. Target: each image under 200KB, hero under 400KB ## Files - All images in public/assets/ - src/pages/Home.jsx - add loading=lazy to hero image - All pages with img tags - add loading=lazy ## Severity High - directly impacts LCP and mobile performance