The "technique" shown here is to convert a jpg to a png. As you would expect, this does not work for all images.
1. use only smooth gradients for your background (LOL)
2. remove most of your pixels
3. assume that the browser will interpolate for you (Also LOL)
If this had been called "pictures of smooth gradients don't need to be high res if your viewer interpolates them sufficiently well" then it would be accurate and sound a lot less noobish.
about 3: most browsers have a good interpolation method for smooth images. It's a safe assumption if you have time to read all the documentation and you drop the support for IE6. (Perhaps IE6 can also interpolate correctly. I don't know and I'm not going to try to find the docs. IIRC I once had problems with the autostretching of the background image in IE6.)
- Simple horizontal, vertical, or radial gradients can rarely capture the "organic" look that most designers want (the gradients of real materials and scenes are highly uneven so perfect symmetry has a distinctly artificial appearance).
- I'm not sure if it's actually an aspect of the spec, but all implementations I've seen interpolate the colors in RGB or an RGB-like colorspace. This can have the effect of creating dramatic jumps or ridges. With a lot of trial and error (or color math) you can overcome this by using custom stop values, but it's much simpler and more in-line with a designer's toolset to be using colorspaces whose linear interpolations are more perceptually uniform.
Of course there's also the "standard drawback" of modern webdev too: it's often easier to just throw assets at the problem. :/
(Thoughts from a design-adjacent dev.)
Embedded gradient images for use in emails for clients without CSS gradient support, possibly.
In this specific case I can see why layered CSS gradients would be non-trivial to assemble, but it’s a trade off.
Example: https://stackoverflow.com/questions/14926189/creating-a-grad...
Which is great if you have an astoundingly blurry image, and useless if you don't.
In practice, I receive one of those from clients. Of course there are more options