jquery - Adjust Image Path based on Device Retina Ratio -

i'm creating site photographer , i'm creating gallery @ moment. save me lot of code i've automated much, including file name, path, width, lightbox class, etc.

in html have write <a> title , jquery takes care of rest.

html

<a alt="all-my-loving"></a> 

jquery

$(function () {     $('.imagescontainer a').each(function () {         var $link = $(this),             title = $link.attr('alt'),             thumb = 'images/portfolio/thumbs/' + title + '.jpg';      $link.attr('data-target', 'flare');          // gallery plugin     $link.attr('data-flare-scale', 'fitmax');    // gallery plugin     $link.attr('data-flare-thumb', thumb);       // gallery plugin     $link.attr('data-flare-gallery', 'main');    // gallery plugin     $link.addclass('item');                      // isotope/packery/masonry     $link.attr('href', 'images/portfolio/full/' + title + '.jpg'); // link full image      $link.append($('<img>', {       src     : 'images/portfolio/thumbs/' + title + '.jpg'    // link thumbnail image in gallery     }));     }); }); 

the problem:
however, image path leads regular (@1x) images , want make site retina-proof path should lead @2x or @3x image when device has retina screen.

as far know, although haven't tried, retina.js not option since works inline-images, images src image path after above script executed.

one single must:
doesn't matter how achieve retina images instead of regular ones retina devices, long not single image downloaded twice (1x , 2x, simultaneously).

who got clue?

---

possible (theoretically) solution:
in addition above js script, have if statement

if (window.devicepixelratio > 1) {     $link.append($('<img>', {       src     : 'images/portfolio/thumbsretina/' + title + '.jpg'     })); } else {     $link.append($('<img>', {       src     : 'images/portfolio/thumbsregular/' + title + '.jpg'     })); } 

and apply if statement check if device retina each imagepath request.

---

update
i've applied above if statement , it's working. retinafolders empty , iphone 6 showing no images (as there none). i'm not sure if that's right way go. new script becomes:

$(function () {     $('.imagescontainer a').each(function () {         var $link = $(this),             title = $link.attr('alt'),             thumb = 'images/portfolio/thumbs/' + title + '.jpg';             retinathumb = 'images/portfolio/thumbs-retina/' + title + '.jpg';      // regular tags     $link.attr('data-target', 'flare');     $link.attr('data-flare-scale', 'fitmax');     $link.attr('data-flare-gallery', 'main');     $link.addclass('item');     $link.attr('href', 'images/portfolio/full/' + title + '.jpg');      // retina tags     if (window.devicepixelratio > 1) {                  // if device has retina graphics         $link.attr('data-flare-thumb', retinathumb);         $link.attr('href', 'images/portfolio/full-retina/' + title + '.jpg');         $link.append($('<img>', {           src     : 'images/portfolio/thumbs-retina/' + title + '.jpg'         }));     } else {                                            // if device not has retina graphics         $link.attr('data-flare-thumb', thumb);         $link.attr('href', 'images/portfolio/full/' + title + '.jpg');         $link.append($('<img>', {           src     : 'images/portfolio/thumbs/' + title + '.jpg'         }));     }      }); }); 

here's theoretical answer. have adapt needs.

add data-retina-src attribute each image (works in jquery):

<img src="image.jpg" data-retina-src="image2x.jpg" alt=""> 

use jquery media queries , switch image source data-retina-src source.

edit 1:

check these links jquery retina detection:

http://egorkhmelev.github.io/retina/

what best way detect retina support on device using javascript?

edit 2:

use script - http://imulus.github.io/retinajs/ - , check alternate images automatically:

for example, if have image on page looks this: <img src="/images/my_image.png" />

the script check server see if alternative image exists @ path: "/images/my_image@2x.png"