"There's a problem, especially in X space. Let's ignore X, only deal with the simplest methods, pretend that this is innovative, and give it a click-baity title."
About this post: I think it would have been better to use another title like "How to use browser interpolation to reduce smooth mage size by 93%". The current title is misleading.
There isn't any sort of spec to ask the browser to use specific scaling algorithms, right?
I think the general idea is safe enough -- images of gradients are probably going to look fine upscaled in any algo that would actually get shipped. But there's no guarantee that tomorrow Mozilla won't decide their new mission statement is to spread the gospel of nearest neighbor.
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.
I agree, but your comment would have been much better without the "LOL".
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.)
Are you familiar with any web browsers that would not do a "sufficiently well" job of interpolating? I wouldn't expect a browser to use anything less than bilinear, which is fine for the use case presented. The author freely admitted that the technique isn't universal for all images.
- 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. :/
That is part of the spec. CSS colour 4 allows colours to be defined in using different colourspaces, but the gradient spec continues to dictate linear interpolation of the RGB values.
Eh, I'm not fussed about that. The example images used are smooth but still rather complex. It would be hard for your average bear to codify them programatically.
Usually they would be. I’m sure there is a rare exception for why you would want to create it as a raster image, but for the usual cases I run across CSS is far more flexible.
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.
Png's works best for logo's and other computer drawn "images". JPG is the "best" format for photos. if i need to pick between png or jpg, that's what i do.
Not strictly true - JPG is best only if you need smaller images at the expense of image quality. I save photos as PNG all the time if I want to keep them losslessly.
While a certain amount of snark may be justified I’m pretty sure we can assume the author is aware their is more than one browser. Are you aware of browsers that don’t interpolate as described?
Why is this on the front page?
There is also a way to have a size reduction for somewhat intricate backgrounds: background-repeat.
https://en.wikipedia.org/wiki/Wallpaper_group
Don't repost too much, read the part of the FAQ about reposts https://news.ycombinator.com/newsfaq.html
If you repost too much the mods may notice and ban your account, your site and other nasty stuff.
Also, try to stick to the original title https://news.ycombinator.com/newsguidelines.html
---
About this post: I think it would have been better to use another title like "How to use browser interpolation to reduce smooth mage size by 93%". The current title is misleading.
I think the general idea is safe enough -- images of gradients are probably going to look fine upscaled in any algo that would actually get shipped. But there's no guarantee that tomorrow Mozilla won't decide their new mission statement is to spread the gospel of nearest neighbor.
Mesh gradients were slotted for SVG 2.0 but the feature has since been removed from the roadmap.
http://libregraphicsworld.org/blog/entry/gradient-meshes-and...
That said: Sorry if you only found this out in 2019.
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.)
https://www.w3schools.com/css/css3_gradients.asp
- 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
This person also knows very little about web browsers. Warning: Do not follow their advice when making your website.
> When the small image is enlarged, the browser uses an interpolation algorithm to fill in the missing image data.
"the browser". Hah. As if there's just one.