Last modified: 2014-09-24 21:44:54 UTC
See https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FGettingStarted.git/5f5c2f1c9522765d631f9f9fc05ca21a76ae3486/resources%2Flightbulb%2Flightbulb.flyout.less#L212 It looks like the idea is to use the higher-resolution GIF on browsers that support SVG. However, there's no absolute correlation between screen pixel density and browser support for SVG backgrounds. Alternatives are: * Media queries (which would keep it a background image). See example section at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio . This is probably simplest, since it doesn't require changing the markup. * <img srcset> (which requires converting it to an <img>). There is also a module jQuery.hidpi, which can be used to polyfill this.
