JPG vs PNG vs WebP: which image format should you use?

The short answer

If you only need a rule of thumb:

• Photos for forms, email and most uploads: JPG.
• Screenshots, text, charts and anything with sharp edges or flat colour: PNG.
• Anything with a transparent background, such as a logo: PNG, or WebP on the web.
• Images on a website you run: WebP, which is usually smaller than JPG or PNG at similar quality.
• Logos, icons and simple illustrations that must stay sharp at any size: SVG, if you have a vector original.

Lossy and lossless: what happens to your pixels

JPG is lossy. To save space it throws away detail the eye is less likely to notice, working on blocks of 8 × 8 pixels and usually storing colour at a lower resolution than brightness. In photos that is hard to see at sensible settings. Around sharp edges such as text, it shows up as smudges, halos and blocky patches.

PNG is lossless: every pixel you save is exactly the pixel you get back. It compresses by finding repetition, which works very well for flat colours and poorly for the fine grain of a photograph.

WebP has both modes. Lossy WebP does the same job as JPG, lossless WebP the same job as PNG, and both can store transparency. The FlexyPdf tools that save WebP use a quality slider and have no separate lossless option.

The quality number, such as 80, is an encoder setting, not the percentage of detail kept. The same number gives different results in different programs, and in JPG versus WebP, so judge by the preview and the file size.

Transparency

JPG has no transparency at all. When a transparent PNG is saved as JPG, the transparent areas have to become some colour; FlexyPdf’s converters fill them with white, which is why a logo can end up on a white rectangle. PNG and WebP both store full transparency, including soft, semi-transparent edges.

It doesn’t work in reverse: converting a JPG to PNG gives a fully opaque PNG. The background only becomes transparent once someone erases it in an image editor.

How file size behaves

For photographs, JPG and lossy WebP give much smaller files than PNG, because PNG has to keep all the fine variation that lossy formats discard. Saving a camera photo as PNG rarely makes sense.

For screenshots, diagrams and text, it flips. PNG is often smaller than a JPG of similar sharpness and keeps letters crisp, while JPG needs a high quality setting to avoid fuzzy text, which makes it bigger.

WebP is usually smaller than JPG at similar visual quality, and lossless WebP is usually smaller than PNG. How much depends on the image, so compare real files: the Image Compressor saves JPEG or WebP and shows the size before and after.

Pixel dimensions often matter more than the format. A phone photo has far more pixels than a web page or an email needs, and scaling it down usually saves more than switching formats. The compressor’s Scale down to max width option does that in the same step.

WebP support today

Current versions of Chrome, Edge, Firefox and Safari all display WebP, so for images on a website you control it’s a safe default. If you must support very old browsers, the HTML <picture> element lets you offer a JPG or PNG fallback.

Outside the browser, support is patchier. Some upload forms accept only JPG or PNG, some older programs can’t open WebP, and images saved from websites are often WebP. To convert one, use PNG to JPG: despite its name it also accepts WebP, BMP and GIF files and can save JPG, PNG or WebP.

Creating WebP in the browser depends on the browser’s own encoder. If yours can’t, the FlexyPdf tools tell you, rather than quietly handing you a different format.

When converting makes a file bigger

Converting can’t bring back lost detail; it can only keep what is there or lose more. Some conversions also make the file larger:

• JPG to PNG: the PNG stores every pixel exactly, JPG artifacts included, so it is usually much larger and looks the same. JPG to PNG tells you when that happens.
• Simple graphics to JPG: a small PNG icon or screenshot with flat colours can come out bigger as a JPG, and blurrier.
• A low-quality JPG re-saved at high quality: the file grows, but the detail that was thrown away stays gone.
• An already well-compressed image: compressing it again can add bytes. The Image Compressor flags this so you can keep the original.

Re-saving JPGs: generation loss

Each time a JPG is opened, changed and saved as JPG again, it is compressed again and a little more detail goes. One or two saves at high quality are hard to notice; repeated rounds, especially with cropping, resizing or edits in between, build up blockiness and colour smears. This is called generation loss, and it’s one reason a picture forwarded through several apps can look worse each time.

To avoid it, keep an original, either the camera file or a PNG copy while you edit, make every change to that, and export a JPG once at the end. Bear in mind that each pass through a tool that outputs JPG is another save: FlexyPdf’s crop and resize tools save JPG at 92% quality, while PNG to JPG and the Image Compressor use the quality you set.

SVG for logos and icons

JPG, PNG and WebP are raster formats: a fixed grid of pixels that blurs or turns blocky when enlarged. SVG is a vector format. It describes shapes, lines and text as instructions, so it stays sharp at any size and is often tiny for simple graphics. That makes it the natural choice for logos, icons and diagrams, and a poor one for photos.

SVG files exported from design programs often carry editor data, comments and coordinates with more decimal places than anyone can see. The SVG Optimizer removes those, rounds path coordinates to a precision you choose and shows the original and optimized versions side by side so you can check nothing moved.

Not everywhere accepts SVG. Many upload forms and social networks take only raster images, and some sites refuse SVG uploads because an SVG file can contain scripts. For those, export a PNG at the size you need from your design program.