Work backwards from the layout
Find the largest size at which the image will be displayed. A small thumbnail does not need the same file as a full-width feature. Create delivery versions from a master rather than repeatedly resizing an already compressed export.
Choose a few representative images for testing: fine foliage, smooth sky, skin tones and a dark scene. The quality setting that looks acceptable on one subject may show obvious artefacts on another.
Compare at a realistic size
Review the export at its displayed size and inspect difficult areas more closely when needed. Modern image formats and compression can reduce transfer size, but the decision is visual as well as technical. Keep an eye on the whole page weight when a series contains many photographs.
Use explicit image dimensions in the page layout so space is reserved before the file loads. Images further down a long page can load later; the main photograph should not be delayed by the same rule. MDN explains these delivery choices in its image-performance guidance.
Keep the export repeatable
Write down the dimensions, format and naming convention used for the project. Save the settings when your editor supports presets. Consistency makes a later addition easier and helps you spot an accidental full-resolution upload.
Open the published page on a phone over an ordinary connection. Look at both the first image and the experience of scrolling through the full series. Adjust the export based on what the visitor actually receives, not only how fast a local preview opens.
Keep in mind
- Export from the master
- Test several kinds of detail
- Reserve image dimensions
- Check the complete page weight