Per comments on the article, I wouldn't read much into it -- the benchmark is pretty flawed. It doesn't measure anything representative of typical usage. And of course, the whole reason to use inline styles is to avoid round-trips on non-cached cold start, which he explicitly didn't attempt to measure.

On 09/23/2013 06:11 PM, Brion Vibber wrote: Yeah. They inexplicably *only* used a single size, a 17.8kB PNG (18227 bytes). If you're not sure why that's a problem, check the size of some of the images MW embeds. Examples from a quick grep: resources/jquery/images/jquery.arrowSteps.head-ltr.png - 303 bytes resources/jquery.tipsy/images/tipsy.png - 133 bytes resources/jquery.ui/themes/vector/images/ui-icons_ffffff_256x240.png - 3702 bytes resources/mediawiki.action/images/green-checkmark.png - 681 bytes Why does it matter? The main reason to avoid requests for every single image is to minimize the time, latency, and bandwidth (bytes) used for HTTP request and responses. The smaller the image, the bigger the fraction (header size / image size) is, thus the more wasted header time. What he said about a 814 byte fixed header is also simply wrong. Some of our data URIs are less than 814 bytes *total*. E.g. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAAAAABtHw/QAAAAGElEQVQIW2P4wMTA9B8Fo5IIGl0EQQIxAEzaGCA3rKnhAAAAAElFTkSuQmCC is a real example from jquery.ui.dialog. We should keep this issue in mind (there is a penalty, particularly for large images), but that article draws a skewed picture. Matt _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design