Start with what must survive

A format decision begins with the content, rather than the filename you want. A product photograph needs natural color transitions and useful detail. A logo may need a transparent background. A screenshot needs readable small text. Those priorities lead to different exports even when every file will appear on the same website.

JPEG is a useful choice for photographs when a little loss of detail is acceptable. It has no alpha transparency. PNG can preserve transparency and sharp flat graphics. WebP supports transparency and can be useful for compact web images, but the receiving application still needs to accept it. Renaming a file does not convert its contents.

Compare one photograph three ways

Keep an untouched original. In Image resizer, make a copy at the dimensions the destination actually needs: for example, 1600 × 1200 pixels rather than a 4000 × 3000 camera original. That reduces the pixel count from 12 million to 1.92 million, an 84% reduction. It does not promise an 84% reduction in bytes, because encoding also matters.

Export that same resized photo as JPEG, PNG and WebP. Use a consistent quality setting where one is available. Compare the reported file sizes, then inspect the face, hair, foliage and edges at a normal viewing size. There is no honest universal winning byte size: the source and settings determine the result.

  1. Choose the photo and confirm its thumbnail and dimensions in the upload area.
  2. Set the output format and create the copy.
  3. Download under a descriptive new name and compare it with the original.
  4. Repeat using Change image or change only the output settings.

Treat transparency as a separate requirement

A transparent logo exported as JPEG needs a solid background. Decide that background deliberately, especially if the logo will sit on a dark page. A white rectangle around a supposedly transparent mark is a format or flattening issue, rather than a crop problem.

For a screenshot containing small text, inspect punctuation and thin lines. Aggressive lossy encoding can create halos around letters. A slightly larger PNG may serve the task better than a very small photographic export. Keep a vector original for a logo when available; converting a small raster logo into another raster format cannot restore missing detail.

Check the delivered file

Some browser encoders do not support every requested output type. Canvas export can fall back to PNG when a type is unsupported. Check the actual downloaded file type and preview, and use the format the destination accepts. Animated inputs in these image utilities become a single frame.

Pixel dimensions determine how much detail exists. DPI metadata does not create more pixels. For ordinary screen use, compare dimensions, appearance and bytes. For a physical print, confirm the required print size and pixel density with the receiving service. Keep the original so a later export starts from the best available source.

References & method notes

The linked references explain the underlying formats, APIs or methods. Worked examples and instructions are original to this guide; a reference is not an endorsement of Nepocore.