Support HiDPI/retina raster images

[jsejcksn]

I have just learned after years that this package is the source of the npm badges I see on occasion. It's a nice idea and a great service.

However, they are always the blurriest badges amongst the others I see. Any thoughts on supporting HiDPI images?

Example:

[rvagg]

change the .jpg to .svg and you'll get one, it's quite how I want them to be, fonts in SVG suck and I haven't had time to add many of the options to the svg version but it works and it's what I stick on most of my projects.

[![NPM](https://nodei.co/npm/urban-dictionary.svg)](https://nodei.co/npm/urban-dictionary/)

[jsejcksn]

Sorry, I didn't include an important detail in the original post, which is a request for this change in raster images.

[rvagg]

afaik that's not something I can control. You'd need to be able to dictate that an image should be displayed at 1/2 the pixel size that's provided. That's why all the hidpi logos shown in your screenshot are SVG, if I give you a high-res png then you'll just get a double-sized banner and it'll look just as garbage on hidpi displays.

[jsejcksn]

I see what you mean. Is there a way to specify the resolution?

Unfortunately, there are still contexts where SVGs can't be displayed on the web (ilke in your comment above).

[rvagg]

yeah, well if you're not using GitHub markdown then you just size it different in HTML, do 1/2 the size it comes out as and it'll look higher quality. I guess we could spit out a double sized version with an option but the main use-case for nodei.co is GitHub markdown where this isn't useful.

[jsejcksn]

I guess we could spit out a double sized version with an option but the main use-case for nodei.co is GitHub markdown where this isn't useful.

Actually, I think it would be:

<img width="440" alt="Screen Shot 2020-03-22 at 19 14 32" src="https://user-images.githubusercontent.com/868251/77267756-a1360e00-6c71-11ea-87d4-949fd4cee7fd.png">

<img width="220" alt="Screen Shot 2020-03-22 at 19 14 32" src="https://user-images.githubusercontent.com/868251/77267756-a1360e00-6c71-11ea-87d4-949fd4cee7fd.png">

[rvagg]

hm, ok, so maybe a double-sized image and recommend using html rather than ghfmd image inserts would do it .. documentation will be the challenge because I can imagine people ending up with either massive badges or tiny tiny ones on their READMEs because they copied the wrong thing.

still needs the work being done though! you're welcome to dig through the code to add a double-size option. https://github.com/rvagg/nodei.co/blob/master/lib/draw-npm-badge.js is where most of the work is done.