Check the real display width first
A 5000 px photo shown in a 900 px content column does not display five times more useful detail. The browser still has to download the larger file.
High-density screens need some headroom
On dense displays, one CSS pixel can use multiple physical pixels. Important images can be prepared larger than their CSS width, but that does not mean keeping the maximum original size.
Photos and UI captures need different treatment
Photos often tolerate lossy compression well. Screenshots containing code, tables or small text need more care because artifacts can directly reduce readability.
Use a repeatable workflow
Check display size, resize, choose a format, compress, then inspect the real page. A consistent workflow is more useful than memorizing one universal pixel value.