
How to reduce the file size of large background images by over 93% - labwire
https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html
======
godelski
"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
I point out the limitations of this method explicitly. How is that “ignoring
X”?

------
rinchik
I 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)

------
devwastaken
If you have flatter colors, no complex gradients, using PNG-8 can
significantly reduce size. Photoshop can do this.

------
chubbyrabbit
A very specific use case but a good thing to know. Click-bait title makes
people here unhappy though.

------
gus_massa
About
[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.

~~~
labwire
Thanks for letting me know about the rules. I’ve updated the blog post title
as you suggested.

------
labwire
I’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-i...](https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-
make-them-small.html)

------
XaspR8d
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.

~~~
labwire
I think bicubic is here to stay since so many responsive websites depend on
the browser to scale images smoothly.

------
corndoge
Spoilers: make them smaller

------
arielserafini
you could also achieve the same (or very close) result with CSS gradients
alone.

~~~
deepsun
Or SVG gradients I believe.

~~~
labwire
To 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...](http://libregraphicsworld.org/blog/entry/gradient-meshes-and-hatching-
to-be-removed-from-svg-2-0)

------
sunebeck
Reminds me of this: [https://jmperezperez.com/svg-
placeholders/](https://jmperezperez.com/svg-placeholders/)

------
martin_a
Reminds 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.

------
vortico
Why would any website have a background image where this would work? Just use
a solid color if you want to use gradients.

~~~
koboll
Or layer CSS gradients. Images of any kind are unnecessary.

~~~
labwire
That doesn’t work, unfortunately:
[https://stackoverflow.com/questions/14926189/creating-a-
grad...](https://stackoverflow.com/questions/14926189/creating-a-gradient-
mesh-in-css-jquery)

------
Adamantcheese
Another 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)

------
labwire
Thanks for all the comments. I’ve updated the title and some of the wording to
address the feedback given here.

------
amanzi
The "technique" shown here is to convert a jpg to a png. As you would expect,
this does not work for all images.

~~~
ebg13
No, 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
I'm no web design expert, but I'm surprised gradients such as that aren't
defined via CSS or some other programmatic means.

~~~
devonkim
CSS 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
CSS 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.)

~~~
systoll
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.

------
ebg13
> _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
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?

