To reduce image bytes on an existing page, begin with the files the browser actually requests. A smaller local export makes no difference if the page still serves the old asset or selects an oversized responsive candidate. Record the delivered dimensions and transfer size, then change the largest useful opportunity without sacrificing necessary detail.
Find the expensive requests
Open the page with a defined viewport and cache condition. Filter the Network panel to images and inspect large downloads. Separate the hero, content images and off-screen media. A decorative background and a product zoom image may be large for different reasons; do not apply the same dimensions to both.
Choose dimensions before quality
Account for the largest rendered size, display density and any intentional zoom behavior. For responsive layouts, provide variants and accurate sizes information instead of forcing every device to download the largest source.
Illustrative example: an image displayed at 500 CSS pixels might have 500- and 1000-pixel candidates for different density needs. Those are planning examples, not site-wide recommendations. Check which candidate the browser selects for your layout.
Compare exports fairly
Keep an unchanged original. Compare formats at the same pixel dimensions, adjusting quality until each candidate preserves the necessary detail. Photographs, screenshots and transparent logos can favor different choices. An already efficient export can become larger when re-encoded; keep it when a replacement offers no useful improvement.
Confirm the result after deployment
Replace the referenced asset, then reload under the same conditions. Check its actual content type and transfer size, not only its extension. If LCP remains slow despite a shorter download, investigate late resource discovery or rendering work. Reducing image bytes is not a direct fix for slow HTML server responses or layout shifts.