📷
Drop an image here or click to upload
JPEG · PNG · GIF · WebP · Converted entirely in your browser — nothing uploaded anywhere
Why Image Format Matters for LCP
Your hero image is the LCP element on over 70% of pages. Every byte saved = milliseconds off your LCP. On a 4G mobile connection (10 Mbps), saving 200KB saves ~160ms of load time.
| Format | Typical Size (1200×630) | Browser Support | Verdict |
|---|---|---|---|
| JPEG | 180–350KB | Universal | OK fallback |
| PNG | 400KB–1.5MB | Universal | Only for transparency |
| WebP | 80–160KB | 97%+ browsers | Use this |
| AVIF | 50–90KB | ~90% browsers | Use with WebP fallback |
Hero Image Checklist
✓ fetchpriority="high"
Tells the browser to prioritize your hero image above everything else. Biggest single LCP win available.
✓ Set width & height
Browser reserves space before image loads, preventing layout shift (CLS).
✗ Remove loading="lazy"
Lazy-loading your hero image delays LCP by 500ms+. Only lazy-load images below the fold.
✓ Add <link rel="preload">
Tells the browser to fetch the image as early as possible — before CSS even loads.