Show HN: Using SVG to Shrink Your PNGs

Re:Show HN: Using SVG to Shrink Your PNGs by nitrogen on Friday January 23, 2015 @02:24AM (#8933779)

The browser still has to store that uncompressed empty area though, so it would use more memory and probably take slightly longer to paint on a slow device.

[ Parent | on HN ]

Re:Show HN: Using SVG to Shrink Your PNGs by Drakim on Friday January 23, 2015 @06:07AM (#8934279)

I was under the impression that PNG is actually quite good at compressing areas of a singular solid color (or in this case solid transparency). It just fails at every-pixel-is-different cases, where JPG is better.

Furthermore, I'm pretty sure a slow device would take longer to paint four separate images due to the overhead of having four of them.

[ Parent | on HN ]

Re:Show HN: Using SVG to Shrink Your PNGs by panic on Sunday January 25, 2015 @04:24AM (#8942485)

In order to draw the PNG, the browser has to decode it, including the transparent pixels. I'm also pretty sure (though I haven't tested this) that the overhead of painting four smaller images is negligible in comparison to the cost of blending the entire center area.

Many sites are very bad about this, e.g. this sprite sheet from linkedin: https://static.licdn.com/scds/common/u/img/sprite/sprite_glo... which, when decoded, takes up ~9MB of almost entirely empty memory. Check out the "Optimizing Web Content in UIWebViews and Websites on iOS" talk on https://developer.apple.com/videos/wwdc/2012/ for more info about not wasting memory on mobile web sites.

[ Parent | on HN ]

Re:Show HN: Using SVG to Shrink Your PNGs by nitrogen on Friday January 23, 2015 @03:05PM (#8936931)

Furthermore, I'm pretty sure a slow device would take longer to paint four separate images due to the overhead of having four of them.

Back in the old days of 2D game development, some games would use a technique called "dirty rectangles" to repaint selected areas of the screen that had changed. Windowing systems like X did/do something similar with "damage" or "expose" events (can't remember the exact name).

It's because the logic to handle many separate small rectangles is less expensive than the loop and memory bandwidth to paint one big one.

[ Parent | on HN ]

Re:Show HN: Using SVG to Shrink Your PNGs by taejo on Friday January 23, 2015 @06:13AM (#8934297)

Nitrogen's point is that most (all?) browsers decompress the image in memory.

[ Parent | on HN ]