Dropping a full phone original into a web page often means a slow load and wasted data, while the image only shows a few hundred pixels wide. Size for display first, then compress.
How wide will it show?
If the content column is about 720–800 pixels wide, most images do not need more than that on screen. Full-bleed heroes can start around a 1280 or 1920 longest edge, then adjust to the layout.
Avatars and icons need much smaller edges. Thumbnail grids do not need 4000-pixel originals.
Retina screens can use roughly 2× the CSS width—for example export 800 for a 400-wide slot—but more than that rarely helps and grows the file fast.
Practical order
Use Image Resize for one file, or Batch Resize when many assets share one rule.
After the pixel size is right, use Image Compress until the look is fine and the weight is acceptable. Resize first, then compress; that is steadier than crushing quality alone.
Prefer JPEG or WebP for photos. Use PNG or WebP when you need transparency. Convert first if the format is wrong.
Check the result
Preview on the real page or a phone: sharpness, unexpected crops, and load feel.
Work runs in your local browser and is not uploaded to our servers. Keep one sharp master file so you can re-export later when the layout changes.