7 ms·
How to reduce the file size of large background images by over 93%
- rinchik 8y agoI got excited for a moment. There is also a way to have a size reduction for somewhat intricate backgrounds: background-repeat. https://en.wikipedia.org/wiki/Wallpaper_group https://en.wikipedia.org/wiki/Wallpaper_group
- arielserafini 8y agoyou could also achieve the same (or very close) result with CSS gradients alone.
- deepsun 8y agoOr SVG gradients I believe.
- labwire 8y agoTo achieve the same effect, you would need a “gradient mesh” which is not supported by the current version of SVG. 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-hatching-to-be-removed-from-svg-2-0 http://libregraphicsworld.org/blog/entry/gradient-meshes-and...
- labwire 8y agoLayering CSS gradients doesn’t work, unfortunately: https://stackoverflow.com/questions/14926189/creating-a-gradient-mesh-in-css-jquery https://stackoverflow.com/questions/14926189/creating-a-grad...
- amanzi 8y agoThe "technique" shown here is to convert a jpg to a png. As you would expect, this does not work for all images.
- Dylan16807 8y agojpg to png is a minor factor. The main one is "if your image is astoundingly blurry, make it much much smaller". Which is great if you have an astoundingly blurry image, and useless if you don't.
- ebg13 8y agoNo, the "technique" is to 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.
- danbolt 8y agoI'm no web design expert, but I'm surprised gradients such as that aren't defined via CSS or some other programmatic means.
- ebg13 8y agoEh, 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.
- devonkim 8y agoCSS definitely supports gradients in theory but perhaps the way they work is not to the liking of designers / their audience / their clients https://www.w3schools.com/css/css3_gradients.asp https://www.w3schools.com/css/css3_gradients.asp
- XaspR8d 8y agoCSS gradients have 2 notable annoyances: - 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.)
- Adamantcheese 8y agoAnother method that I've personally used I explained over a year ago; you can see my explanation here https://news.ycombinator.com/item?id=15704879 https://news.ycombinator.com/item?id=15704879
- corndoge 8y agoSpoilers: make them smaller
- ebg13 8y ago> Disclaimer: I know very little about image scaling 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.
- kevsim 8y agoWhile 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?
- vortico 8y agoWhy would any website have a background image where this would work? Just use a solid color if you want to use gradients.
- godelski 8y ago"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." Why is this on the front page?
- labwire 8y agoI point out the limitations of this method explicitly. How is that “ignoring X”?
- chubbyrabbit 8y agoA very specific use case but a good thing to know. Click-bait title makes people here unhappy though.
- XaspR8d 8y agoThere 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.
- devwastaken 8y agoIf you have flatter colors, no complex gradients, using PNG-8 can significantly reduce size. Photoshop can do this.
- sunebeck 8y agoReminds me of this: https://jmperezperez.com/svg-placeholders/ https://jmperezperez.com/svg-placeholders/
- martin_a 8y agoReminds me of the early 2000 years when I, as a teen, was fiddling around with 16x16 images for striped backgrounds etc. That said: Sorry if you only found this out in 2019.
- labwire 8y agoI’ve added another example to demonstrate how the technique can be used on blurry photographic backgrounds as well: https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html https://peterhrynkow.com/performance/2019/01/13/blowing-up-i...
- gus_massa 8y agoAbout https://news.ycombinator.com/item?id=18931957 https://news.ycombinator.com/item?id=18931957 and https://news.ycombinator.com/item?id=18932740 https://news.ycombinator.com/item?id=18932740 Don't repost too much, read the part of the FAQ about reposts https://news.ycombinator.com/newsfaq.html 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 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.
- deleted 8y ago[deleted]
- labwire 8y agoThanks for letting me know about the rules. I’ve updated the blog post title as you suggested.
- labwire 8y agoThanks for all the comments. I’ve updated the title and some of the wording to address the feedback given here.