A surprising amount of "my site is slow" comes down to one thing: someone dropped a 4032x3024 photo straight off their phone into a content block that renders at 800px wide. The browser downloads all 5 MB and then throws most of it away during resize. Multiply that by a dozen images and you've got a page that takes 8 seconds on a hotel wifi.
Getting an image "web-ready" is really three decisions made in order: resize first, then choose a format, then compress. Do them in that order and you usually cut file size by 80-95% with no visible quality loss. Here's how to actually do it, with the numbers that matter.
Step 1: Resize to the size it's displayed at (this is the big win)
This is the step people skip, and it's the one that matters most. Pixels you can't see still cost bytes.
Figure out the largest size the image is ever shown at, then add a buffer for high-DPI screens:
