Find the best PNG + Retina solution

[feross]

I want to use svg images, but due to issue #112, that's no longer an option that GitHub supports. What would it take to make the typeface in the png images look as nice as it does in the svg images?

PNG vs SVG (can't embed it due to issue #112, lol)

[espadrine]

What would be really helpful is a screenshot comparison in the browsers you use most often, on your machine.

(Note, use PNG, and embed them in a comment; GitHub still authorizes that!)

[feross]

Chrome, OS X:

[espadrine]

Is this a retina screen? Is the zoom at 100%?

[feross]

Yes, retina screen. Nothing has been zoomed. Screenshots just appear 2x size because of the retina screen.

I think there might be two issues here. First, the png is not @2x. Second, the antialiasing makes the text a bit blurry and dark.

[espadrine]

Unfortunately, making the image 2x is a third of the issue. Chrome (and other browsers) will render the image just as blurry; it's simply going to be twice as big. There are a few ways to tell the browser how to render it well, but those are not yet standard. Besides, some 3x screens are already coming to the market.

We can make this issue a follow-up to #102 focused on finding the best way to have PNG images on retina.

[feross]

If you offered @2x images, one option would be to just specify a "height" inline in the HTML. It is perfectly valid to include html within a markdown document.

For example, with the following html:

<img src="image@2x.png" height="313">

I can render the retina screenshot from above at the perfect size.

The width automatically scales with the explicit height that we set. This is perfect since badges have a consistent height, but variable width. Just don't specify a width and the browser will scale it proportionally.

[feross]

^ I think this would solve the retina problem for PNG images.

[espadrine]

@feross I'll try to implement @2x next week. I recommend using SVG however, because it is super-fast to generate, super-small to send down the wire, and while GitHub has been slow to support it, they have improved quite a lot in a year. Also, 3x, an even bigger image.

[feross]

Yep, I agree that svg is preferable. Too bad it's currently not an option due to #112. When/if that's resolved, I'll happily switch back to svg! Also, thanks for being so responsive :)

[chadwhitacre]

#112 is resolved. I'm closing this as a duplicate of #97.