<p><a href="http://caniuse.com/#feat=picture">picture</a> is a "new" containment element from html5 much like video or audio element. It can contain many sources and the first one will be used.<br>
The nice thing is that an old browser ignores this unknown element and interprets only the plain old img tag.</p>

<p>The media attribute restrict the usage of the source to an browser with a high resolution screen. All other browsers are still using the old img.<br>
If the SVG is transfered gzipped the filesize is smaller than the current png and therefore could/should be used for all browsers (which understand svg in a picture element) and save bandwidth.</p>

<p>The optimization removes a lot of inkscape meta data. </p>

<p>I am no ruby expert thats why i am not able to change the asset pipeline. But yes, that would be the best.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br>Reply to this email directly or <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1054#issuecomment-139829070">view it on GitHub</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/ABWnLUwkOwKyqSbCzTwvmX4sF-egW5HOks5oxK9BgaJpZM4F8Td4.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
  <link itemprop="url" href="https://github.com/openstreetmap/openstreetmap-website/pull/1054#issuecomment-139829070"></link>
  <meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>