Compress JPG for Web

On a typical content page images account for the majority of transferred bytes, and the largest one is very often the Largest Contentful Paint element — the metric Core Web Vitals measures directly. A hero image that arrives half a second later moves LCP by half a second, and LCP above 2.5 seconds is the threshold at which a page stops counting as good.

The most common mistake is serving the file straight from the camera or the designer. A 4000px, 5 MB JPEG displayed in a 1200px container transfers roughly twenty times more data than the layout can show. The browser downscales it on arrival, so the visitor waits for detail that is discarded before it is ever painted.

Quality 78 sits just below the point where JPEG artefacts become perceptible on photographic content, and 1920 pixels covers full-width display on the overwhelming majority of screens. Together they typically cut a hero image to under 300 KB. Going further with quality costs visible fidelity for relatively little payload; going further with dimensions starts to look soft on high-density displays.

Compression is only part of the fix, though, and the rest is markup. Set explicit width and height attributes so the browser can reserve space and avoid layout shift, add loading="lazy" to everything below the fold, and let the one image that is the LCP element load eagerly. Serving a modern format alongside the JPEG via a picture element is usually the next largest win after this step.