PNG vs JPG for screenshots — which should you use?
Screenshots have sharp text and solid colours that behave differently from photos. Here's how to pick the right format.
Photos and screenshots are fundamentally different types of images, and the format you choose affects both quality and file size dramatically.
The short answer
- Screenshots with text: Use PNG (or lossless WebP)
- Screenshots of photos/videos in apps: Use JPG or WebP
- Screenshots for documentation: Use PNG
- Screenshots for social media: Use JPG (platforms re-compress anyway)
Why PNG wins for text
JPEG compression works by dividing the image into 8×8 pixel blocks and approximating the colour values within each block. This works brilliantly for photos where colours change gradually, but it creates visible artefacts around sharp edges — exactly what text has.
Look at any JPEG screenshot closely and you'll see fuzzy halos around letters, especially dark text on a light background. PNG doesn't have this problem because it uses lossless compression — every pixel is preserved exactly.
When JPG wins
Not all screenshots are text-heavy. If you're capturing:
- A video player showing a movie scene
- A photo editing app with an image on screen
- A game with complex graphics
- A map application
These screenshots behave more like photos and compress well with JPEG. The text artefacts are less noticeable because there's less text to corrupt, and the file size savings are significant (often 50–70% smaller than PNG).
The WebP middle ground
WebP with lossless compression produces files 25–30% smaller than PNG with no quality loss. If your target platform supports WebP (which is nearly everywhere in 2026), it's the best choice for screenshots.
WebP with lossy compression at quality 90+ also handles screenshots better than JPEG — the artefacts around text are less visible because WebP uses a more sophisticated compression algorithm.
File size comparison
A typical 1920 × 1080 screenshot of a code editor:
| Format | File size | Quality | | ------------- | --------- | -------------------- | | PNG | 380 KB | Perfect | | Lossless WebP | 270 KB | Perfect | | JPEG q90 | 180 KB | Slight text blur | | JPEG q75 | 95 KB | Noticeable text blur | | WebP q90 | 120 KB | Minimal text blur |
Retina screenshots
Modern displays produce screenshots at 2× resolution. A "1920 × 1080" screen captures a 3840 × 2160 image. These files are 4× larger than you might expect.
For web use, consider:
- Keep the retina resolution for crisp text on high-DPI screens
- Use CSS to display at half size:
<img width="1920" /> - Use lossless WebP to minimise file size without quality loss
The quick rule
If the screenshot has text you need people to read → PNG or lossless WebP.
If it's mostly visual content → JPEG or lossy WebP.
You can convert between formats instantly in your browser — try both and compare the results.