How to reduce the file size of large background images by over 93%

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

by labwire • 8 years ago

31 41 8 years ago

peterhrynkow.com

rinchik• 8 years ago

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

arielserafini• 8 years ago

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

deepsun• 8 years ago

Or SVG gradients I believe.

labwire8• 8 years ago

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

labwire8• 8 years ago

Layering CSS gradients doesn’t work, unfortunately: https://stackoverflow.com/questions/14926189/creating-a-grad...

amanzi2• 8 years ago

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

Dylan16807• 8 years ago

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

ebg133• 8 years ago

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• 8 years ago

I'm no web design expert, but I'm surprised gradients such as that aren't defined via CSS or some other programmatic means.

mark-r2• 8 years ago

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.

amanzi2• 8 years ago

Yeah, agree -- I over-simplified it.

gus_massa2• 8 years ago

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

NicoJuicy2• 8 years ago

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.

mark-r2• 8 years ago

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.

cronix• 8 years ago

Why are png's better for logos over SVG?

Adamantcheese• 8 years ago

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

corndoge• 8 years ago

Spoilers: make them smaller

ebg133• 8 years 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• 8 years ago

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?

vortico• 8 years ago

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

koboll• 8 years ago

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

labwire8• 8 years ago

That doesn’t work, unfortunately: https://stackoverflow.com/questions/14926189/creating-a-grad...

godelski• 8 years 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?

labwire8• 8 years ago

I point out the limitations of this method explicitly. How is that “ignoring X”?

chubbyrabbit• 8 years ago

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

XaspR8d2• 8 years ago

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.

hcs• 8 years ago

Not really, closest thing is https://developer.mozilla.org/en-US/docs/Web/CSS/image-rende...

labwire8• 8 years ago

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

devwastaken• 8 years ago

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

sunebeck• 8 years ago

Reminds me of this: https://jmperezperez.com/svg-placeholders/

martin_a• 8 years ago

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.

labwire8• 8 years ago

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

gus_massa2• 8 years ago

About https://news.ycombinator.com/item?id=18931957 and 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

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.

labwire8• 8 years ago

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

labwire8• 8 years ago

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

How to reduce the file size of large background images by over 93%

Related Stories