figure out Markdown story for Retina badges

[olivierlacan]

was: Push GitHub to support image width & height in Markdown

Just reading up on Multimarkdown I found this: https://github.com/fletcher/MultiMarkdown/wiki/MultiMarkdown-Syntax-Guide#anchor-and-image-attributes

Real bummer that there's nothing similar in either standard markdown or GFM. Could we push GitHub to support it so that people don't necessarily have to use HTML (in some places it's not possible, I'm sure) when they eventually want to use Retina badges? Maybe by making GFM support it ourselves?

[nathany]

Unfortunately GitHub's markdown engine doesn't appear to be open source any longer, so we can't just submit a pull request.

[nathany]

BitBucket uses Python Markdown and they use safe mode so as to not output HTML. Python Markdown does not appear to support image dimensions.

P.S. could we retitle this issue to emphasis that it's for Retina badges.

[chadwhitacre]

I updated the title. Feel free to retitle again, @olivierlacan. :-)

[nathany]

Fyi, what was sundown can now be found under https://github.com/hoedown - recently released v2.0. But I don't know if those changes make it into GitHub's implementation.

Even if Markdown could specify a height, do we really want the height specified on every single badge out there? It gives us Retina but we're stuck at that height forever.

[nathany]

Rather than specifying a fixed height, there is a new option in Safari/Chrome and coming to Firefox by the end of the year.

<img src="low-res.jpg" srcset="high-res.jpg 2x">

We still would need it in hoedown (and really, in the GitHub implementation) as well as Python Markdown (and BitBucket), and wherever else people use shields.

OR, people just add an HTML img tag directly into their markdown, so long as it isn't escaped.

On GitHub:

becomes

<p><a href="low-res.jpg" target="_blank"><img src="low-res.jpg" style="max-width:100%;"></a></p>

😢

Reference: At long last, browser makers adapt to Retina-quality images

[olivierlacan]

@nathany Good thing srcset is finally starting to be supported because I have a hunch double resolution isn't going to play well with a lot of browsers (at least a lot more than the number of machines currently able to display Retina-level graphics): rubygems/bundler#2785 (comment)

[nathany]

I think we figured out the Markdown story, and it's not a great one, but luckily #80 Inline SVG should work nicely.

[nathany]

Maybe we should keep this open for now. In particular, more experimentation with srcset may be useful.

[nathany]

I've played with srcset a little. Even though we only need support for it on Retina screens, it may still be too new to adopt. (SVG is more widespread).

With the height= approach, how legible are pixel doubled (or tripled) images on non-Retina displays (across browsers)?

[olivierlacan]

Hey! This has been solved! Woo!