Images are usually the heaviest bytes on a page, so optimizing them is the biggest LCP win. Three levers: modern formats, responsive sizing, and loading priority.
AVIF and WebP compress far smaller than JPEG/PNG at the same quality (AVIF often 50% smaller than JPEG). Serve them with a fallback so old browsers still work:
Don't send a 2000px image to a 400px phone. srcset lets the browser pick the right size for the device:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes tells the browser how wide the image renders so it can choose the smallest sufficient source.
fetchpriority="high", loading="eager", and consider a preload.loading="lazy" so it isn't fetched until needed.Always keep width/height to prevent CLS.
A slow LCP is most often just an oversized hero image. Knowing formats (AVIF/WebP), srcset for the right resolution, and correct priority — plus not lazy-loading the LCP image — is the practical toolkit interviewers expect, and it's usually the single highest-impact change on a real site.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate