JPG, PNG or WebP: which to use and how to reduce file size
Published: · Last updated:
A submission form asks for “a JPG of 500 KB or less”, or a blog warns that your photo is too large. Changing the format seems like the fix, but picking the wrong one can make the file bigger. This post covers how JPG, PNG and WebP differ, how to choose a format for a given image, and the order to work in when you need to reach a target size.
The three formats differ in compression and transparency
| Format | Compression | Transparent background | Animation | Best for |
|---|---|---|---|---|
| JPG | Lossy | Not supported | Not supported | Photos |
| PNG | Lossless | Supported | Not supported in basic PNG | Screenshots, charts and logos with crisp lines and text |
| WebP | Both lossy and lossless | Supported | Supported | Both photos and graphics |
- Lossy compression shrinks a file by discarding detail the eye is less likely to notice. It works well on photos, but on text and lines with sharp edges it tends to blur the edges or leave smudges.
- Lossless compression stores the image so the original pixels can be restored exactly. Quality is unchanged, but files for complex images such as photos end up larger.
- WebP can use either method. Google reports that, at comparable quality, lossy WebP files are 25–34% smaller than JPG and lossless WebP files are 26% smaller than PNG. Results vary from image to image.
Choosing a format for the kind of image
- Photos: Use JPG or WebP. Saving a photo as PNG keeps the same quality but can make the file several times larger.
- Screenshots, charts and images with lots of text: PNG or lossless WebP is better. JPG blurs the area around text.
- Logos and signatures that need a transparent background: Use PNG or WebP. JPG can’t hold transparency, so transparent areas are filled with a solid color such as white.
- Icons, logos and charts made of simple shapes: Use SVG if you can. SVG is a vector format that records lines and shapes rather than pixels, so it stays sharp at any size and the file is very small. It isn’t suited to images with complex color, such as photos.
- When the recipient specifies a format: Follow it. Most recent browsers support WebP, but older software and some submission systems may not accept it.
For a real-world example, this site first used PNG for the explanatory images on its tool pages, then switched to WebP and SVG. The 61 images with many colors and gradients went from about 36 MB in total to about 2.7 MB as WebP, a reduction of about 92%. Some images that were over 1 MB each dropped to around 100 KB. The image-tool illustrations, drawn with simple shapes, were made as SVG: where the PNG of the same picture was 34 KB, the SVG was under 1 KB. Choosing the format that fits the content can cut the size sharply while the image looks almost the same on screen.
When changing the format doesn’t reduce the size
Converting a format re-compresses the image in the new format. It isn’t a size-reduction feature. In these cases the file gets bigger or the quality just gets worse.
- Converting a JPG photo to PNG usually makes it larger, because lossless compression can’t efficiently reduce the complex colors in a photo.
- Re-saving an already heavily compressed JPG as JPG adds another round of loss. The file may shrink a little, but quality drops below the original, and the discarded detail doesn’t come back.
- Converting a low-quality image to PNG doesn’t improve it. A format can’t restore information that is already gone.
If your goal is a smaller file, look at the two settings below before the format.
Two ways to reduce size: quality and pixel count
Quality sets how much detail lossy compression throws away. When a browser creates an image, quality is set as a value between 0 and 1, and it applies only to lossy formats such as JPG and WebP. PNG has no quality value. Lowering quality a little often cuts the size a lot with no visible difference, but going too low breaks up edges and leaves smudges.
Pixel count is the image’s width × height. Halving both width and height cuts the pixel count to a quarter, so the file shrinks a lot as well. For an image you’ll view on screen or put in a document, you rarely need the full resolution of a phone camera.
To reach a target size, this order usually works best.
- Pick the format that fits the image: JPG or WebP for photos, PNG for graphics.
- If the image has far more pixels than you’ll actually use, first reduce its width and height to the size you need.
- For JPG or WebP, lower the quality step by step and find the highest quality that stays under the target.
- If lowering quality still doesn’t reach the target, reduce the pixel count a bit more. PNG has no quality value, so this is the only option for it.
Check whether KB means 1,000 or 1,024 bytes
When a limit says “500 KB or less”, some systems count 1 KB as 1,000 bytes and others as 1,024 bytes. The difference is only 2.4%, but a file saved right at the limit can exceed it under one of the two definitions. If you don’t know which one the recipient uses, aim a little below the limit to be safe.
What to check after shrinking
- Keep the original separately. An image that has been shrunk or re-compressed can’t be restored to its original quality.
- Check the result at full size. It may look fine in a small preview but show blurred text or smudges when enlarged.
- If the image had transparent areas, check the format. Saving as JPG replaces a transparent background with a solid color.
- Photo information may be lost. When a browser redraws an image and saves it, metadata such as the date and location a photo was taken is usually not saved with it. That helps if you want to remove it, but if you need to keep it, use the original.