https://phabricator.wikimedia.org/T118514

Tests without any change (Before)

Chrome
http://www.webpagetest.org/result/151209_DR_REX/
 http://www.webpagetest.org/video/compare.php?tests=151209_DR_REX-r:1-c:0 (median first view)

iPhone
http://www.webpagetest.org/result/151209_YH_RFJ/

Moto G
http://www.webpagetest.org/result/151209_AY_RJS/
 http://www.webpagetest.org/result/151209_AY_RJS/3/details/ (fastest first view)
 http://www.webpagetest.org/video/compare.php?tests=151209_AY_RJS-r:3-c:0

After removing data URIs

Chrome
http://www.webpagetest.org/result/151209_6R_SPT/
 http://www.webpagetest.org/video/compare.php?tests=151209_6R_SPT-r:3-c:0 (median first view)
 Mostly the same

iPhone 
http://www.webpagetest.org/result/151209_C6_SPZ/

Moto G 
http://www.webpagetest.org/result/151209_EC_SK7/
 http://www.webpagetest.org/result/151209_EC_SK7/4/details/ (fastest first view)
 http://www.webpagetest.org/video/compare.php?tests=151209_EC_SK7-r:4-c:0


Conclusions:
Saves bandwidth (12K > 8KB for main css request). Even with the extra image requests included (~0.5K), because many weren't used.
Longer tail of image requests. Requests start relatively late (CSS applies, indirection). Final paint regresses.
On mobile [confirmation needed] content images are requested and rendered earlier (inside the first paint even, previously first paint was without the infobox image). Saves a reflow as well.
At the cost of rendering interface icons later.
Maybe keep @embed for the handful of icons that are on every page view. And consider converting to something like @push (T???).


Bugs:
    * Mobile doesn't reserve image box width/height in infobox, causing reflow. Fine on desktop.