Captcha images for higher resolution displays

[thomasbilk]

Added the posibility to get an image in double size for higher resolution displays. Only works with ttf fonts.

[mbi]

Thanks for this. Quick question, what is the use-case of this? Is the same captcha rendered twice, once in single resolution and once in double resolution, and the browser picks the most "fitting", … or will all images be rendered only once in double resolution and scaled down in CSS?

Thanks.

[thomasbilk]

I am currently working on a mobile page where I use your fabulous app, noticed the low resolution of the captcha image, added this option and thought I could share it.

Currently the low resolution image is loaded and then replaced by the higher resolution image with this javascript code:

if (window.devicePixelRatio >= 1.5) {
  doc.find("img.captcha").each(function() {
    var img = $(this),
        url = this.src;
    img.on("load", function() {
      this.width /= 2;
      this.height /= 2;
    }).prop("src", url + "?retina");      
  });
}

An alternative would be to leave the image source empty, put the url in a data attribute and then let javascript set the correct source. This way only one image is generated and sent over the wire/air.

[mbi]

Thanks, I think this makes sense. I'd rather do it via a data-attribute and have a proper "retina" URL, instead of passing a GET parameter.

I'll take a look around to see if there is any standard way of serving high-res images.

[mbi]

Sorry for the delay, I'm trying to bake in support for double res images (in 126ca75), this will probably need some more thought…