A photograph saved as PNG is several times larger than it needs to be. A screenshot of text saved as JPEG comes back with grey fuzz around every letter. Both are the same mistake in opposite directions: the format was chosen without regard to what the image contains.
Photographs are made of gradual variation, and flat graphics are made of hard edges. Compressors are built for one or the other, and neither handles the wrong kind gracefully.
Which format for which content?
Four choices cover essentially everything.
| Content | Format |
|---|---|
| Photographs | JPEG or WebP |
| Screenshots, text, flat graphics | PNG or lossless WebP |
| Logos, icons, diagrams | SVG |
| Anything needing transparency | PNG, WebP or SVG |
The modern format does both jobs, which is why it has largely replaced the two older ones. It has a lossy mode for photographs and a lossless mode for graphics, it supports transparency in both, and it is typically a quarter to a third smaller than JPEG at comparable quality.
Newer formats compress smaller still at the cost of slower encoding. For most work the saving over the current one is not yet worth the complexity of serving both.
Why does text look bad in a JPEG?
Because the compression works on blocks and assumes gradual change within them. A hard black-to-white edge is the opposite of gradual, so the compressor approximates it with a ripple — which appears as grey haze around letters and along any sharp boundary.
The effect is worst on small text and on flat areas of a single colour, which is exactly what a screenshot is made of. Raising the quality setting reduces it and never removes it, and by the time it is acceptable the file is larger than a lossless one would have been.
The reverse case is milder but real. A photograph stored losslessly keeps detail nobody can see, so the file is large for no visible benefit.
When is a vector the right answer?
When the image is made of shapes rather than pixels. A logo, an icon or a diagram described as lines and curves is tiny, stays perfectly sharp at any size, and needs no separate versions for different screen densities.
It is also text-based, so it can be styled by the page — a vector icon can take its colour from the surrounding theme rather than needing a light and a dark copy. Nothing raster does that.
It is useless for photographs, because a photograph has no shapes to describe. Attempting to convert one produces either an enormous file or an illustration that no longer resembles the original.
What about transparency?
Two kinds, and the difference matters. The older animated format supports only fully transparent or fully opaque pixels, which produces the jagged halo familiar from badly cut-out logos.
Proper alpha transparency allows partial values, so edges blend smoothly onto whatever is behind them. That is what PNG and the modern format provide, and it is what a rounded or shaped image needs.
JPEG has no transparency at all. Saving a transparent image to it fills the transparent area with a colour you did not choose, which is usually white and occasionally black.
Does the format affect load time?
Considerably, and it is one of the easiest wins available. Images are usually the largest thing on a page, so converting photographs to a modern format typically removes a meaningful share of the page weight without touching anything else.
The resize-then-compress order matters more than the format choice, since serving a photograph at four times its displayed size wastes more than any codec can recover.
Doing both is the full answer: correct dimensions first, appropriate format second, quality tuned by eye rather than by a number.
What about the source file?
Keep it. Every format discussed here is an export, and re-exporting from an original costs nothing while re-exporting from a compressed copy compounds the loss.
That applies most to anything that will be reused at different sizes or in different places. A logo kept only as a small PNG has to be redrawn when someone wants it large; the same logo kept as a vector never does.
For photographs the equivalent is keeping whatever the camera produced. It is larger than any export and it is the only version that has not been through a compressor.
Questions people ask
Is a bigger quality number always better? Past a point the file grows and nothing visible improves. Compare two settings side by side at full size.
Does the file extension decide the format? No. The bytes do, and a renamed file confuses software rather than converting it.
Can one image serve every size? A vector can. A raster needs at least a large and a small version for dense screens.
Is WebP supported everywhere? In current browsers, yes. Very old software may still need a fallback.
Does converting JPEG to WebP restore quality? No. The detail lost in the first compression is gone, and the lossy article explains why.
Should I still use GIF? Only for compatibility. Modern formats do animation better and smaller.
What quality setting should I use? Judge by eye at actual size. The right number differs by image.
Convert to suit the content. JPG to WebP and PNG to WebP move photographs and graphics to the modern format, WebP to JPG and WebP to PNG go back where something needs the older one, and the WebP compressor tunes the quality once the format is right.