A photo, a screenshot and a transparent logo are all images, but they do not ask the same things of a file format. The photo may contain soft gradients and texture. The screenshot may depend on tiny letters. The logo may need a clean transparent edge.
Choose the job first. Then compare the files that can do it.
Know what the format is preserving
MDN’s image-format guide describes JPEG as using lossy compression, PNG as lossless, and WebP as supporting both lossy and lossless modes as well as transparency. Those are capabilities, not a promise that one format will always produce the smallest acceptable file.
Lossy compression can discard information to reduce size. A lossless export preserves the pixel information it encodes. Neither term tells you whether the image was resized or edited before export, so keep the export settings alongside the format name when comparing results.
Start at the display size
If a picture will appear in a modest article column, ask whether the full camera-sized version is necessary for that use. Keep your original separately, then make a copy sized for the intended display. For responsive websites, several image sizes may be appropriate for different screens.
Inspect the copy at its normal viewing size first. Zoom in when checking a suspected problem, but do not choose an enormous file solely to preserve detail that readers will never see in the intended layout.
Compare the difficult areas
Look at small text, sharp edges, gradients and transparent borders. A photograph may tolerate a setting that makes a screenshot unpleasant to read. A logo that looks fine on white may reveal a poor edge on a dark background.
Use a simple comparison note: dimensions, format, export setting, file size and visible issue. Keep dimensions equal when testing formats. Otherwise a smaller file might simply contain fewer pixels, which answers a different question.
Check the features, then the destination
If you need transparency or animation, verify that the chosen format and export mode preserve it. Open the result in the application or browser where it will be used. A successful export dialog is not the same as a successful final display.
Repeatedly saving an already compressed image can also make comparisons confusing. Return to the retained original for each candidate export instead of using the previous candidate as the next source.
After replacing an image online, a saved copy may still appear for a while. Our guide to web caching explains why that can happen.
Reference: MDN, Image file type and format guide. This article describes a comparison method; it does not report benchmark results for particular files.