PNG, JPG and WebP: Choose by the Image.

Start with what the file must do

A photograph for a listing and a logo for a slide may look equally simple in a file browser, but they have different failure modes. A photograph can tolerate some loss of fine texture before the change becomes distracting. A small logo can become visibly damaged when its flat edges acquire compression noise. A transparent asset also needs an alpha channel that survives the export. Pick the format after identifying those needs, rather than assuming that the newest format is always the right choice.

The destination is part of the decision. A browser may display a file that a marketplace uploader rejects. A design application may flatten transparency on import even though the source format supports it. Read the destination instructions, export a copy and open that copy in the actual destination. The final accepted image is the deliverable. A successful download only proves that a file was created.

What our measurements establish

The linked measurement page records actual browser exports from the licensed examples used on this site. Each source was already a prepared WebP image, so this is a conversion test of those inputs, not a comparison against untouched camera originals. The test holds the pixel dimensions constant and records exact bytes. This makes a change in file size easier to attribute to the requested encoding path, while leaving visual quality as a separate judgment.

The test also records unsupported attempts. In the tested Chromium build, requesting AVIF through the canvas encoder did not produce an AVIF file. Treating the returned PNG as AVIF would have created a misleading benchmark. Backdropless checks the output type and exposes only encoders that pass that capability check. The same principle applies when reproducing the comparison in another browser: record what actually came back.

Lossless is a statement about a step

Saving a damaged JPEG into a lossless PNG does not reconstruct the original scene. The PNG can preserve the pixels it received, including any damage already introduced. Similarly, opening a small image and exporting a much larger lossless file cannot invent reliable texture. Lossless encoding is useful when preserving the current raster matters, but it is not an undo button for the editing history.

Keep an original or an editable master before experimenting. If you repeatedly open and re-save an opaque photo with a lossy encoder, later versions are based on already altered pixels. Returning to the same master for each delivery export keeps that chain shorter and makes comparisons fairer. A large master and a compact delivery file serve different purposes, so there is no need to force the same format onto both.

Transparency changes the choice

A transparent cutout includes color information and coverage information. The checkerboard in an editor is only a display aid for that coverage. It should not become part of the downloaded image. PNG is a dependable working choice for this workflow, while WebP can also carry transparency where the destination supports it. JPEG exports need an opaque background, so Backdropless puts transparent areas onto white before encoding them as JPEG.

Inspect a cutout on the background where it will actually be used. A light fringe can disappear on white and become obvious on a dark slide. Changing the file format will not repair a bad mask. Use the erase and restore controls to correct the selection, then export the appropriate format. Separate the edge problem from the encoder problem instead of adjusting quality until the preview happens to look acceptable.

Worked example: a camera listing

Suppose the transparent camera cutout is the editing master. Save that version as PNG so it remains reusable. For a listing that expects an opaque product photograph, place the same cutout on the intended white canvas and export JPEG. For your own website, make a WebP version at the same dimensions and compare it with the JPEG. This example is a workflow choice, not a claim that a format will save a fixed percentage.

To calculate an actual saving, use the byte counts from your own exports. Subtract the candidate file size from the reference size, divide by the reference size and multiply by 100. Keep dimensions and subject placement unchanged while making that comparison. Label the result with the input, browser and settings. If the candidate is smaller but visibly harms the product label, the numerical saving does not make it the better delivery file.

Compare the parts that reveal damage

Look at printed text, narrow straps, smooth gradients and areas of fine texture. View the result at its publishing size, then inspect the details closely enough to identify avoidable damage. Do not judge only from a large zoom that exaggerates changes nobody will see, and do not judge only from a tiny thumbnail that hides a broken edge. Both views answer a different part of the quality question.

If the result is too large, first ask whether the pixel dimensions exceed the destination need. Reducing unused dimensions can be more appropriate than pushing a lossy setting until details break. If the result is already the correct size, try a modest quality change and export again from the master. The aim is a usable file within the destination constraints, not the smallest file that can still be decoded.

Record a repeatable export decision

For recurring work, keep a short specification with the destination, pixel dimensions, background, format and the visual checks that matter. Store it beside the source assets. This gives the next person a reason for the settings rather than an unexplained quality-slider value. A different browser encoder can produce a different file at the same nominal quality, so the visual check remains part of the process.

Use the converter when the format is the only thing that needs changing. Use the compressor when you are comparing quality and file size. Use the removal studio only when the background needs to change. Keeping those operations distinct avoids accidentally modifying a photograph that only needed a different container. The linked tools all create a new download so that you can preserve the original.