Why is my PNG gradient eight megabytes?

Because it is dithered, and dither is the enemy of lossless compression. PNG works by predicting each pixel from its neighbours and storing the difference, and a run of identical pixels costs almost nothing. Add about one level of noise to every pixel and the predictor is wrong every time, so nearly every pixel costs real bytes. Switching the dither off will shrink the file dramatically and put the banding back.

Is WebP always smaller?

On this kind of image, nearly always, and often by a lot — a dithered ramp that is eight megabytes as a PNG is commonly a few hundred kilobytes as a lossy WebP at ninety. The costs are that it is lossy at that setting, and that a few older programs still will not open it. The tool checks whether your browser can genuinely write the format before offering it, because a browser asked for WebP that quietly returns a PNG is worse than one that refuses.

Does JPG quality 100 mean lossless?

No. It means the quantisation tables are set as gently as that encoder allows, which still discards information and still works in eight by eight blocks. On a smooth ramp the result is usually indistinguishable and enormous; on a grain field it is neither. If a file has to be exact, the format has to be PNG.

Can I have the background as an SVG?

Not as a file from this build. A gradient is genuinely vector — it is a handful of numbers and it scales to any size without a pixel in it — and the copy control here gives you exactly those numbers as a CSS declaration, which covers the case a web page cares about. A downloadable SVG is a separate output that this version does not write, and a noise field could not be written into one anyway; noise is pixels by definition.

Which format to save a background in

A generated background is an unusual image: enormous areas of near-identical colour, no edges, no detail, and — if it is dithered — noise in every single pixel. That combination pushes each format somewhere different from where a photograph would.

What each format does with a ramp

PNG

Lossless, and it compresses by predicting each pixel from the ones above and to the left. On an undithered ramp that prediction is nearly perfect and the file is tiny. Add dither and the prediction fails on every pixel, which is why the same picture can be four hundred kilobytes or eight megabytes depending on one checkbox. PNG is the right answer for flat colour, for anything that has to be exact, and for a design going into a pipeline that will re-encode it later.

JPG

Lossy, working in eight by eight blocks with a frequency transform. A smooth ramp is the easiest thing in the world for it: almost no high-frequency content, so it throws away almost nothing and the file is small. Its weaknesses show up elsewhere — ringing around hard edges, and colour subsampling that softens a saturated hue boundary. It also cannot hold grain honestly: dither and JPG fight each other, because one adds high-frequency noise and the other exists to remove it.

WebP

Lossy or lossless, and on this material it is usually the smallest of the three by a wide margin. The reason to hesitate is compatibility rather than quality: some desktop software and some older print workflows still will not open one. Where you control what opens the file, it is the efficient choice.

Where the weight actually goes

The figure beside the download control on every generator page is measured rather than asserted: a small copy of the design you are looking at is encoded for real in the format you have chosen, and the result is scaled by the ratio of pixel counts. It is an estimate, and it says “about” for that reason, but it moves when your design moves and it is never a lookup table pretending to be a measurement.

A 3840 × 2160 two-stop ramp, dither on
Format	Order of magnitude	Against PNG
PNG	around 8 MB	the baseline
WebP at 90	a few hundred KB	roughly a twentieth
JPG at 90	under a megabyte	roughly a tenth

Two things move those numbers more than the format does. The first is dither: switching it off can take an order of magnitude off a PNG. The second is a noise layer, which adds weight to every format at once and cannot be compressed away by any of them, because random data is exactly what compression has no purchase on.

When the answer is not a file

For a web page, a gradient background is usually better as a declaration than as an image. It scales to every viewport, weighs nothing over the stylesheet, changes without a deploy, and never arrives after the text does. The copy control on the generator pages hands over the whole block — stops, angle, interpolation space and blend modes — and it is switched off when the design contains noise, because a declaration that silently dropped a layer would not be the design you approved.

A file wins in three cases. When the background has grain in it. When the surface receiving it takes an image and nothing else, which covers slides, video, print and most desktop software. And when the ramp is long enough to band, because a browser draws its own gradients with no dither at all and will stripe where the file does not.

Questions about formats

Why is my PNG gradient eight megabytes?: Because it is dithered, and dither is the enemy of lossless compression. PNG works by predicting each pixel from its neighbours and storing the difference, and a run of identical pixels costs almost nothing. Add about one level of noise to every pixel and the predictor is wrong every time, so nearly every pixel costs real bytes. Switching the dither off will shrink the file dramatically and put the banding back.
Is WebP always smaller?: On this kind of image, nearly always, and often by a lot — a dithered ramp that is eight megabytes as a PNG is commonly a few hundred kilobytes as a lossy WebP at ninety. The costs are that it is lossy at that setting, and that a few older programs still will not open it. The tool checks whether your browser can genuinely write the format before offering it, because a browser asked for WebP that quietly returns a PNG is worse than one that refuses.
Does JPG quality 100 mean lossless?: No. It means the quantisation tables are set as gently as that encoder allows, which still discards information and still works in eight by eight blocks. On a smooth ramp the result is usually indistinguishable and enormous; on a grain field it is neither. If a file has to be exact, the format has to be PNG.
Can I have the background as an SVG?: Not as a file from this build. A gradient is genuinely vector — it is a handful of numbers and it scales to any size without a pixel in it — and the copy control here gives you exactly those numbers as a CSS declaration, which covers the case a web page cares about. A downloadable SVG is a separate output that this version does not write, and a noise field could not be written into one anyway; noise is pixels by definition.

Back to the canvas

Nothing here is sent anywhere. The file is drawn by your browser and written to your disk.