ilovejpg handles three output formats every day, and the question of JPG vs PNG vs WebP comes up more often than almost any other. Each format was designed to solve a different problem, so none of them is simply better. A photograph, a logo with a transparent background and a screenshot of a spreadsheet each favour a different choice, and picking the wrong one can make a file several times larger or visibly worse than it needs to be.
This guide explains the technical differences that matter in practice: lossy versus lossless compression, transparency, colour depth and animation, how each format behaves on photographs, graphics and screenshots, and how well each is supported. It also looks briefly at AVIF, sets out a detailed comparison table, warns about common conversion mistakes and finishes with recommendations for websites, email, print and archiving.
Lossy and lossless compression
Lossless compression reproduces every pixel exactly after decoding. It works by finding redundancy, such as repeated colours and predictable patterns, and describing it more compactly. Lossy compression goes further: it discards information the eye is unlikely to notice, accepting small differences from the original in exchange for much smaller files.
- JPG (JPEG) is lossy. Defined in ITU-T T.81 in 1992 and ISO/IEC 10918-1 in 1994, it converts colour to YCbCr, usually subsamples the colour channels, transforms 8 × 8 blocks with the discrete cosine transform, quantises the result and packs it with Huffman coding.
- PNG is lossless. Published as a W3C Recommendation in 1996 and later as ISO/IEC 15948, it applies a per-row prediction filter to each scanline and then compresses the result with DEFLATE, the same algorithm used in ZIP files.
- WebP, released by Google in 2010, offers both modes. Lossy WebP is based on the intra-frame coding of the VP8 video codec, using block prediction and transform coding; lossless WebP, added shortly afterwards, uses a separate design built around prediction, colour caching and entropy coding.
- AVIF, standardised by the Alliance for Open Media in 2019, stores images compressed with the AV1 video codec and supports both lossy and lossless coding.
A practical consequence follows from this. A lossy file saved again is decoded and quantised once more, so quality drops with every generation. A lossless file can be opened and saved repeatedly without any change to the pixels.
Transparency, colour depth and animation
Transparency
JPG has no alpha channel, so every pixel is fully opaque. PNG supports a full 8-bit or 16-bit alpha channel, allowing smooth anti-aliased edges and soft shadows over any background, as well as simpler single-colour transparency in palette images. WebP supports 8-bit alpha in both its lossy and lossless modes, which makes lossy images with transparency possible, something neither JPG nor PNG offers. AVIF also supports alpha.
Colour depth
Baseline JPG stores 8 bits per channel, giving about 16.7 million colours, which is ample for most photographs. PNG can store 8 or 16 bits per channel, or use an indexed palette of up to 256 colours for very compact graphics. WebP is limited to 8 bits per channel. AVIF can store 8, 10 or 12 bits per channel and supports high dynamic range, which is one of its main advantages.
Animation
Standard JPG has no animation. PNG gained animation through the APNG extension, which browsers have supported for some years and which the W3C has since incorporated into the PNG specification. WebP and AVIF both support animation and usually produce much smaller files than an equivalent animated GIF.
Browser canvas export, which many online tools including ilovejpg rely on, produces 8-bit PNG files. If you need a true 16-bit PNG for professional retouching, use desktop image software that supports high bit depth.
How each format behaves on photos, graphics and screenshots
Photographs
Photographs contain gradual tonal changes and fine random texture. Transform-based lossy coding handles this content extremely well, because most of the energy in each block sits in a few low-frequency coefficients. JPG at quality 80 to 85 typically produces a file a fraction of the size of a lossless PNG of the same photo with no difference most viewers could identify. Lossy WebP at matched visual quality is often smaller again, and AVIF frequently smaller still. PNG is a poor choice for photographs: files are commonly five to ten times larger than a good JPG.
Graphics, logos and illustrations
Flat colour areas and hard edges suit lossless compression. PNG, especially in palette mode, stores a logo with a handful of colours very compactly and keeps its edges perfectly crisp. JPG struggles here because quantising the sharp transitions produces ringing, the faint speckled halo often called mosquito noise, and colour subsampling can smear red or blue edges. Lossless WebP usually beats PNG on file size for the same graphic.
Screenshots
Screenshots combine sharp text, flat interface colours and sometimes embedded photos. Text is the decisive element: JPG blurs and fringes small lettering, particularly coloured text on coloured backgrounds. PNG or lossless WebP keeps every character sharp. If a screenshot is dominated by a large photograph, a high-quality JPG may be acceptable, but for documentation and bug reports a lossless format is the better default.
- Choose a lossy format when the image is photographic and file size matters.
- Choose a lossless format when the image contains text, line art, flat colour or anything that will be edited again.
- Choose a format with alpha when the image must sit over varied backgrounds.
- Test both when an image mixes photographic and graphic content, and compare file size against visible quality.
Browser and software support
Support is now broad for all four formats on the web, but it remains uneven elsewhere. JPG remains the universal format: every browser, operating system, printer driver, email client, word processor and camera handles it. PNG is almost as universal. WebP is supported by all current major browsers, with Safari adding it in version 14 in 2020, and by modern versions of Windows, macOS, Android and most image editors, although some older desktop software, office suites and online forms still reject it.
AVIF is supported by current versions of Chrome, Edge, Firefox and Safari, but support in operating system viewers, design software and upload forms is less consistent. Encoding AVIF is also considerably slower than encoding JPG or WebP, which matters for large batches. ilovejpg exports JPG, PNG and WebP; it does not create AVIF files, so for that format you would need a dedicated converter or image editor with AV1 support.
When a file will leave your control, for example as an email attachment or an upload to an official portal, support on the recipient's side matters more than compression efficiency. JPG and PNG are still the safest choices there.
Detailed comparison table
The table summarises the characteristics most likely to influence a decision. File size comparisons describe typical behaviour at similar visual quality and will vary with content and encoder settings.
| Feature | JPG | PNG | WebP | AVIF |
|---|---|---|---|---|
| Compression | Lossy | Lossless | Lossy or lossless | Lossy or lossless |
| Transparency | No | Yes, full alpha | Yes, full alpha | Yes, full alpha |
| Bits per channel | 8 (baseline) | 8 or 16; palette up to 256 colours | 8 | 8, 10 or 12 |
| Animation | No | Yes, via APNG | Yes | Yes |
| HDR and wide colour | Limited | Limited | No | Yes |
| Photographs | Very good, small files | Very large files | Smaller than JPG at similar quality | Often smallest |
| Logos and flat graphics | Halo artefacts around edges | Excellent, crisp | Excellent in lossless mode | Good, sometimes soft at low settings |
| Screenshots with text | Fringing around letters | Excellent | Excellent in lossless mode | Good in lossless mode |
| Repeated re-saving | Loses quality each time | No loss | No loss in lossless mode | No loss in lossless mode |
| Encoding speed | Fast | Moderate | Moderate | Slow |
| Web browser support | Universal | Universal | All current major browsers | All current major browsers |
| Email, office and forms | Universal | Almost universal | Inconsistent | Limited |
| Maximum dimensions | 65,535 pixels per side | Very large in practice | 16,383 pixels per side | Large images stored as tiles |
If a single row decides your choice, it is usually transparency or text. Anything with transparency rules out JPG, and anything with small text rules out low-quality lossy settings.
Conversion pitfalls to avoid
Converting JPG to PNG does not restore quality
This is the most common misunderstanding. Once a photograph has been saved as JPG, the information discarded during quantisation is gone. Converting the JPG to PNG stores the already-degraded pixels losslessly, including any blocking or mosquito noise, and the file becomes much larger. The conversion is only useful if you plan to edit the image repeatedly and want to avoid adding further generations of JPG loss, or if a destination demands PNG.
Transparent areas become a background colour in JPG
Because JPG has no alpha channel, every transparent pixel must be given a solid colour when a PNG or WebP with transparency is saved as JPG. Depending on the software, transparent areas usually become white or black, and semi-transparent edges are blended against that colour. A logo designed for a dark website may therefore end up with a white box around it or a faint grey fringe. Keep the original transparent file, and only export JPG for places where a solid background is acceptable.
Other traps
- Re-saving a JPG at high quality does not make it better than the source; it simply adds another generation of loss and often a larger file.
- Converting a lossy WebP to PNG to edit it, then back to WebP, compounds loss just as JPG does; edit from the best original available.
- Exporting through a browser canvas discards EXIF metadata and the embedded colour profile, which is helpful for privacy but can shift wide-gamut colours slightly.
- Animated WebP, APNG or AVIF files lose their animation when converted to a still format such as JPG; only one frame is kept.
- Uploading WebP to a system that expects JPG can lead to silent rejection or automatic recompression, so check the requirements of forms and print services.
Recommendations for websites, email, print and archiving
Websites
For photographs, serve WebP at a quality around 75 to 85, or AVIF where your publishing system supports it, with a JPG fallback only if you must serve very old browsers. Use PNG or lossless WebP for logos, icons and screenshots, and prefer SVG for simple vector logos where possible. Size images to the dimensions they will actually display; a 4000-pixel photograph scaled down by the browser wastes bandwidth regardless of format.
Use JPG for photographs and PNG for graphics. Many email clients and recipients' devices handle WebP poorly or not at all, and an image that cannot be opened is worse than one that is slightly larger. Resize photographs to around 1600 to 2000 pixels on the long side unless the recipient needs the full original.
Printers care about pixel dimensions relative to print size and about consistent colour. A high-quality JPG, at quality 90 or above, or a PNG is generally acceptable for home and photo-lab printing; many commercial print services prefer PDF or TIFF for finished artwork. Provide enough pixels for the print size: a 15 × 10 cm print at 300 DPI needs roughly 1772 × 1181 pixels. Avoid WebP and AVIF for print unless the service explicitly accepts them.
Archiving
Keep the original camera file, whether it is a JPG straight from the device or a raw file, and never overwrite it. For edited versions you may want to revisit, save a lossless master as PNG or TIFF and produce JPG or WebP copies for sharing. Prefer formats with long-standing, openly documented specifications and wide software support, because the archive must remain readable for decades.
Frequently Asked Questions
Is WebP better than JPG?
For web delivery of photographs, WebP usually produces smaller files than JPG at similar visual quality and also supports transparency and animation. JPG remains better for compatibility: email clients, office software, printers and official upload forms accept it universally, while WebP support outside browsers is still inconsistent. Use WebP on your own website and JPG when files are sent to other people or systems.
When should I use PNG instead of JPG?
Use PNG for logos, icons, illustrations, screenshots and any image containing small text, sharp edges or transparency. PNG is lossless, so edges stay crisp and the file can be edited and re-saved without degradation. For photographs, PNG files are usually several times larger than a good JPG with no visible benefit, so JPG or WebP is the better choice there.
Does converting a JPG to PNG improve quality?
No. The detail removed when the JPG was created cannot be recovered. Converting to PNG simply stores the existing pixels, including any compression artefacts, in a lossless container, so the file grows while the image looks the same. The conversion is only worthwhile if you intend to edit the image repeatedly and want to avoid adding further rounds of JPG compression.
What happens to transparency when I save a PNG as JPG?
JPG cannot store transparency, so every transparent pixel is filled with a solid colour, usually white or black depending on the software. Semi-transparent edges are blended against that colour, which can leave a visible fringe. If the image must sit over different backgrounds, keep it as PNG or WebP and only export JPG where a solid background is acceptable.
Should I use AVIF for my website?
AVIF often gives the smallest files for photographs and supports high dynamic range, transparency and animation, and all current major browsers can display it. Encoding is slower, however, and support in some content systems and editing tools is still patchy. A sensible approach is to serve AVIF where your publishing system handles it automatically, with WebP or JPG available as a fallback.
Which format is best for screenshots?
PNG or lossless WebP is best for screenshots because both reproduce text and interface edges exactly. JPG compression tends to blur small lettering and add speckled halos around it, especially with coloured text. If a screenshot consists mostly of a large photograph and file size matters, a high-quality JPG can be acceptable, but lossless formats are the safer default.
Conclusion
The JPG vs PNG vs WebP decision becomes straightforward once you match the format to the content and the destination. Photographs suit lossy compression, so JPG or WebP is the natural choice. Graphics, screenshots and anything with transparency suit lossless coding, so PNG or lossless WebP wins. AVIF offers impressive efficiency for the web where your tools support it.
Compatibility deserves as much weight as compression. Files that travel by email, to print services or into official forms are safest as JPG or PNG. Keep originals untouched, avoid repeated lossy re-saves, remember that converting to a lossless format cannot restore lost detail, and choose deliberately each time rather than out of habit.