Image Formats Explained: JPG vs PNG vs WebP
The same photo saved as JPG weighs a few hundred kilobytes. Saved as PNG, it can balloon to several megabytes. That does not make PNG worse; the two formats just compress with different strategies. Understand lossy versus lossless compression, transparency, and browser support, and choosing a format stops being guesswork.
Bitmap Basics: Pixels and Color Depth
Photos and screenshots are bitmaps. The image is divided into a grid, and each cell, a pixel, records one color. Color is described with red, green, and blue channels at 8 bits each, which makes 24-bit true color. Add an 8-bit alpha channel for transparency and you get 32 bits. Resolution sets how many pixels exist; bit depth sets how many colors each pixel can express. A compression format has one job: describe the same pixels in fewer bytes. Every format debate is really about how to save those bytes.
JPG: Lossy Compression Built for Photos
JPG (strictly, JPEG) is lossy. The image is cut into 8×8 blocks and transformed with the Discrete Cosine Transform. High-frequency detail that the eye barely notices is thrown away, and chroma subsampling saves even more space. For photos full of smooth gradients this pipeline is very efficient. At quality 80 the loss is practically invisible. It has two built-in weaknesses. First, no transparency support: transparent areas get filled with white or black. Second, hard-edged content such as text, icons, and line art is chopped by the 8×8 blocks. That produces fuzzy edges and color bleeding known as ringing artifacts. JPG belongs to photographs, not to icons or screenshots.
PNG: Lossless Compression with Transparency
PNG takes the other road: lossless compression. It uses the DEFLATE algorithm, a cousin of ZIP, to collapse repeated data. The decompressed result is pixel-for-pixel identical to the original. That makes PNG the right choice for anything that must stay sharp: app screenshots, UI mockups, icons, QR codes. PNG also supports a full 8-bit alpha channel, which logos and overlay graphics need. Solid-color icons can shrink further with the indexed PNG-8 palette mode. The cost: its pattern-finding approach does little for noise-rich photographs. The same photo saved as PNG is often several times larger than as JPG.
WebP and AVIF: The New Generation
WebP came from Google in 2010 and offers both lossy and lossless modes. At the same visual quality it typically runs 25–35% smaller than JPG, with transparency and animation support on top. AVIF borrows intra-frame compression from the AV1 video codec and reaches even better ratios. Its drawbacks are slower encoding and still-growing software support. Every major browser has supported WebP since Safari 14 in 2020, so the web is a safe home for it. AVIF works in current browsers, but older systems and many desktop apps may fail to open it. A practical dividing line: use the new formats for images a browser will show. Use JPG for anything headed to a printer or a long-term archive.
Which One Should You Pick? A Decision Table
| Content type | Recommended format | Why |
|---|---|---|
| Photos, artwork | JPG / WebP | Lossy compression is most efficient on gradients. |
| Screenshots, app UI | PNG | Lossless keeps text and lines razor sharp. |
| Icons, logos (transparent) | PNG / WebP | They need the alpha channel. |
| Large web images, banners | WebP / AVIF | Smallest files; browser support is now universal. |
| QR codes, barcodes | PNG | Any compression artifact can break scanning. |
| Photos for printing | High-quality JPG | Print pipelines understand it everywhere. |
Compression Strategy and Common Mistakes
Good compression is mostly about workflow, not sliders.
- Resize first, then compress. If the display area is 800px wide, do not ship a 4000px original. Downscaling alone removes over 90% of the data. Use the Image Resize tool for dimensions and the Image Compressor for file size, in that order.
- Quality 70–85 is the sweet spot. Most JPG/WebP files in this range look identical to the original. Below about 60, blocky artifacts and banding start to appear, and it only gets worse from there.
- Save once, and save for good. Every time you re-save a JPG it goes through lossy quantization again. Quality drops a little more each time; this is called generation loss. Keep working files in a lossless format like PNG while editing, and export to JPG only for publishing.
A few common beliefs deserve a correction. Renaming a JPG to PNG does not make it lossless; the internal data decides the format, and renaming just causes confusion. Converting PNG to JPG permanently destroys transparency. An image that is already blurry never regains detail by being enlarged, because compression discards information that cannot be recovered. Choose the right format when you export with the Image Format Converter, rather than repairing afterwards.
Common mistakes and how to fix them
Image problems tend to surface only after the file has been sent. The failures below are the most expensive to redo, so check your export against them.
- Saving text-heavy screenshots as JPG. The mistake: 8×8 block compression cuts straight through hard edges. Fuzzy ringing artifacts appear around every glyph and thin line, and red-on-white screenshots bleed color into the letters. It looks fine as a thumbnail and falls apart when the recipient zooms in. The fix: keep screenshots, UI captures, and document snapshots in PNG so every pixel stays lossless. If size genuinely matters, use WebP lossless mode.
- Exporting a logo that needs transparency as JPG. The mistake: JPG has no alpha channel, so transparent areas get flattened onto a white box. The box shows up the moment the logo lands on a dark page, and cutting it out afterwards rarely recovers clean edges. The fix: go back to the design source file and re-export as PNG or WebP with the alpha channel. Do not try to salvage a white-background JPG.
- Saving a QR code as a heavily compressed JPG and shrinking it. The mistake: scanners depend on the exact geometry of the black-and-white modules. Compression artifacts and resampling blur adjacent module edges together. The printed code fails most scans, and you discover it only after the poster is on the wall. The fix: export QR codes as PNG at their native pixel size without rescaling. Test-scan on a couple of phones before printing.
- Forwarding images through chat apps without "send as original file". The mistake: messaging apps recompress images by default, lowering the resolution and running another lossy pass. What you receive is a second-hand image. Editing and re-exporting it compounds the loss, and the discarded detail never comes back. The fix: tick the original-image option or transfer the file directly. Keep working copies in PNG while editing, and convert to JPG or WebP only when publishing.
- Sending WebP or AVIF files to a print shop. The mistake: browsers adopted the new formats years ago, but the photo lab's retouching and layout software often cannot open them or shifts the colors. That costs you a day of back-and-forth. The fix: anything headed for someone else's printer or a long-term archive should be a high-quality JPG (quality 90+). Reserve the new formats for the web.
- Dropping a multi-megabyte PNG original straight onto a web page. The mistake: camera and design-tool PNGs commonly weigh 3–8MB. Mobile visitors wait for seconds, and bounce rates rise. "The original is sharp" is not a reason to ship it that big. The fix: resize to the displayed width first, with one extra step of margin for high-density screens. Then convert to WebP around quality 80; the file usually lands near two or three hundred kilobytes.