Convopage
See the entire conversation
omg
whatsapp's webapp has a 4k sprite sheet because it's laid out diagonally
140 replies and sub-replies as of Sep 19 2017
But why...
we've been trying to guess reasons for like 15 minutes. It's trashing firefox b/c we "cache" svg to raster...
I'm going to guess this originates with this "illuminating" blog post. aaronbarker.net/2010/07/diagon…
Worst. advice. ever. -_-
How else would you create a PNG sprite without creating extra HTML nodes in browsers that barely support CSS 2.1?
It seems pretty straightforward that instead of refactoring their use of sprites, they just switched from PNG to SVG.
Those extra nodes are well worth it, trust me.
Those extra nodes are well worth it, trust me
"I didn’t know if that meant this was a new idea, or a bad one that no one was willing to publish. I’m hoping it’s the former." Bad news guy
"Diagonal is the only layout where all browsers behaved the same" (Safari issues, etc)
Creating SVG Sprites using Gulp and Sass
Following on from the previous blog post, we walk through the process we have for creating and maintaining our SVG sprites with Gulp and Sass by using custom mixins and functions
liquidlight.co.uk
Laziness? Only need 2-3 variables instead of 3-4 to access the sprite?
you'd need even fewer if it was 1D!
Hahaha, I didn't think of that. Next step: save each sprite as a frame in a gif, and write a js lib to split them apart.
i wanna cry
I guess... it saves you having to store... two UVs??? yeah i don't know
"easier" than interrogating each sprite for height/width in order to properly organize. gross. don't let your SNES carts see this.
(rhetorical)
ｗｈｙ
There has to be more to this than just "oopsie".
Is there any practical reason for this?
uhm… to avoid having to save/use x AND y? With just one point value you can get the image position
Since the icons are variable width and height, wouldn't you need the U/V coordinates, anyways?
I was thinking… If you have an array with all the points, you could get the image position with n and it’s size with n+1
You're right, that would not require x/y. Somehow I read your last comment as "without x/y and width/height" and was like "wait, how...". 😅
an extra integer variable vs a significantly bigger image seems like a weird tradeoff to me
It super matters if you think about how svgs make it to your screen
It's not optimal, but I would assume browsers are culling svgs nowadays? But I'm just guessing here, so I'll shut up ;)
From a file size standpoint, it doesn't matter.
From a "this will end up formatted as bitmap in your GPU's memory" standpoint, though... ow.
oh, sorry, hadn't thought about GPU rendering. I'll take it all back, sorry.
I wanna believe this is some weird copy paste error in an automatic tooling for the sprite sheet.
Well, it’s an svg, and that’s how your browser renders it. You use separate glyphs from it, so there’s no issue web.whatsapp.com/img/30c5efbd3b…
that doesn't answer the question "why"
Someone else suggested this...
:(
aaronbarker.net/2010/07/diagon…
also I see that the issue is that at least Firefox is caching the rasterized version...
In fact, svg makes this 10x worse because rendering one icon at 100% scale and another at 200% creaters two rasters of the whole thing
can you cache the viewport of the sprite ?
That's not SVG making it worse though, TBF. That's Firefox making it worse. Although ironically our open-source lib has same problem LOL :)
if multiple popular, widely used implementations of a format have a problem you can't really separate the problem from the format
Yes, yes you can. So our lib by default DOES NOT do this, because it's a terrible implementation. By default it renders only visible subset
...on demand. And it caches the set of render-instructions-as-clipped-raster - not the WHOLE DAMN DOCUMENT :). But in raster mode, it works
...same as described here. Assumption: if you really REALLY want to raster the whole document (dev has to actively tell API this), you can.
...unless you have a small doc that you're using as a single sprite, in which case it flips, and rasters by a special super-quick 1-liner.
So, now I've seen this problem, I'm thinking that I should REALLY add some detection for this - if anyone is subslicing the raster, I should
either provide a better, less lazy implementaiton (I wrote the current raster code, so happy to take blame: I was definitely being lazy!)
...or detect the slicing and throw an assertion/debug warning "Dude, don't do that! Use vector mode instead!".
But either way: to me it's v. interesting problem. SVG is not like other image formats, it's designed to be used more creatively (like this)
it really doesn't matter whether the fault is in implementation or format because you can't make your users switch implementations
This is one of those things which becomes a multi-line comment "// This special case is for <This One App> which does something stupid"
Thinking of how you would do this efficiently just cured my drowsiness on the bus commute in.
Right now we do the maximally inefficient thing. Oh this one icon was scaled or has a different subpixel offset? Time for another 4k render!
Ideas: Tiling. Compress tiles (most are single-color!). Deferred decode of individual tiles (heuristic). Re-compress image in tiled format.
Idea #1 is to beg them to stop :)
Idea #0: Inhibit its caching so the resulting data transfer bill makes them stop.
Or you could ask them why they're doing it? I know accessibility techniques that require diagonal sprites.
Obviously we need a new image format: block diagonal png.
The obvious solution is therefore for them to rotate the image 45 degrees, encode to png, and unrotate client-side every render.
If they were clever they would skew instead of rotate, but ...
could be more inefficient by placing some padding there.
The app isn't being stupid. I maintain an SVG lib. IMHO this is valid, reasonable, use of SVG. It has infinite canvases with non-zero origin
Works for me on my Infinity Browser.
oh no css sprites
oh no 😩
probably a (janky) solution to visual bugs with other icons peeking in above/below or next to the icon that’s supposed to be there
That would be solved with padding. This seems like a bug: both the x and y are bumped in the inner loop, instead having y in the outer loop.
What the... w-why?!?!!
ahahahahahah
What a waste of room
It’s possible someone is generating this by lazily incrementing x and y and just never thought about what that meant
ladies and gentlemen, web development
Maybe it's so they can index position with only one position index, controlling X and Y at the same time. Was this really worth it?
What is the point
I'd like to think some Graphical artist sent it in like that. The programmers were too unsocial to ask them to change.
(No comment)
Lol sprites
Lol what the hell?
It's a mysteryyyy lol. Idk why it bothered me so much but apparently I am not alone lol
Lol, no sparse matrix.
Sorry if this sounds stupid - but it’s SVG, how would that affect file size?
Png/jpg I can see how, but with SVG, surely it’s just a few bytes where co-ords are double instead of single didgets?
not at all; the issue is that it trashes all our (firefox) image caches because we rasterize the whole thing for every requested scale.
Interesting. I’ve always used diagonal SVG sprites not realising it had perf implications
Hillariously this would probably be better if it were a png
Is there a blog post or similar that you know of on this topic? Would be interested to learn more!
Not really. It was a perf issue that my coworkers were investigating today.
What are the advantages to having a diagonal layout?
You can have unlimited height or width of your pseudo element with nothing else sneaking in (should you need to)
We also do our sizing in ems, which can pixel round oddly and used to show an edge of the next icon on some browsers at some fonts sizes
That's an interesting choice. I guess made sense many years ago, and never got picked up on? Obvs today, knowing retina etc, wouldnt repeat?
*shrug* only so much time in the day to optimize stuff. works ok if the input isn't completely degenerate like this.
Only bit I dislike is the implied assumption that SVG is treated as a bitmap with a funny name ;). Vector should be handled differently IMHO
IME: people who choose a vector format do it precisely because stuff like this use-case is simple and VERY efficient. That's the point of it
eg early win of our lib was to render e.g. Wikipedia's *massive* earth-map fast on iPhone3+. Great use of vector: zoomable, but: efficient.
Seems like a fun problem for a topologist
TIL WhatsApp has a web app.
It's v useful, I use it at work with PushBullet so I can reply quicker and better without context switching to my phone
It's trying to solve 1 + 2 + 3 + 4 + 5 in swiftc
I've never done any UI work in my life but I feel like this is the wrong way
What would be the best way to go about this then? Just pack them one next to the other? Doesn't it not matter since it's SVG?
We ultimately need to rasterize svgs to render them, and there isn't any optimization in place to guard against this kind of svg
So png would be better?
Ultimately yes, because we wouldn't be forced to rasterize any scale variants
SVG has the viewBox property, which should be the size of single icon and shifted around before rasterizing.
How SVG Fragment Identifiers Work | CSS-Tricks
I've talked a good bit about SVG's around here and using it to build an icon system. The beauty of is that you can reference just a part of some SVG define
css-tricks.com
what the fuck
It's 2017 and I can't believe this keeps happening.
(Maybe for lazy scaling calculations on all icons at once? Not sure that's reasonable.)
Hmm, wait, SVG. Yeah, I've got no good guesses (but maybe the actual reason is something that would count as a bad guess...)
The running theory is it makes it maximally hard to "see" the other images if you badly mask/clip them
...I'd expect them to use a <symbol> dictionary in the SVG and have everything with a common origin point, or is that bad somehow too?
It's easier to request a certain index on the sprite sheet that way plus it's an svg so it doesn't effect size.
How much did facebook fucking pay for this shit?
offset_x = offset_y
WHY!? WHY WOULD YOU DO THAT!?
Someone explain this to me please
Ahhhh. XD
That's what I call saving performance
thanks god they are not game developers.
Reading the comments, it seem these are pretty common. Couldn't you try to detect them and edit the Y coords before rasterizing?
why he do that ?
what kind of fucking madman would do this