The notebook / Images

Images · 3 min read

PNG, JPEG, or WebP?

A practical way to choose a format for the image in front of you.

A format choice starts with the image and its destination. A small photograph on a page has different needs from a logo with a transparent background. Keep the original file and export a separate working copy so the decision remains easy to change.

Start with the edges

Look at the image at the size someone will actually see it. Photographs contain gradual changes in colour and texture. Diagrams, screenshots, and lettering often have hard edges where compression artefacts are easier to notice.

JPEG is a practical option for photographs and does not retain transparency. PNG uses lossless compression and can preserve transparency, making it useful for graphics and screenshots. WebP supports both lossy and lossless encoding, plus transparency. The best result still depends on the particular image.

Make a comparison you can see

  1. Open the original in Image desk and set the longest edge for its destination.
  2. Export one JPEG or WebP copy. For lettering or transparency, also try PNG.
  3. Compare the exported files at the same displayed size. Look at fine lines, shadows, and text.
  4. Choose the smaller file only if its appearance is suitable for the job.

Our image tool creates a new image from the decoded pixels. Its JPEG export uses a white background where the source was transparent. Keep the source if you need layers, animation, or original metadata; this tool exports one still image.

A useful stopping point

There is little value in repeatedly exporting an already compressed copy. Return to the original when you change the dimensions or quality. Give the export a distinct name and inspect the result before replacing anything in a project.

Reference: MDN’s image format guide.