Easy 2x retina images with jQuery

Apple first coined the term “retina” as a marketing device for their revolutionary 2x high-resolution displays that came with the release of the iPhone 4. The retina display soon came to iPad and MacBook Pro, allowing millions of users around the word to enjoy crisp, high-resolution content.

Unfortunately, for us developers it means that when someone visits our websites, we have to determine the size of their display and then send appropriately sized images for the web page they’re about to view. Often, developers end up with lots of different image sizes needing to be created, which simply just adds unnecessary time to projects.

Here at Morris we developed a fairly simple jQuery and PHP plugin that deals with all of this hassle for us, and we want to share it with the world.

If you visit the demo on a non-2x device, a standard 400×300 image will be served.
However, if you view on a 2x device, an 800×600 image will be served.

Just point your <img> tag towards a high-res image, set a width and height, and there you have it.
Super simple, super easy. Feel free to use this in any commercial projects.

 

View the demo page Download ZIP of demo files
The HTML
<div>
    <img src="/downloads/retina-images/timthumb.php?src=image-one.jpg&w=400&h=300&q=90" width="400" height="300"> 
</div>

<div>
    <img src="/downloads/retina-images/timthumb.php?src=image-two.jpg&w=400&h=300&q=90" width="400" height="300"> 
</div>
The JavaScript
$(document).ready(function(){
    retinafyImages(); 
});

function retinafyImages(){
    if(window.devicePixelRatio > 1){
         $('img').each(function(){
            thisImg = $(this).attr('src');
            if(thisImg) {
                if(thisImg.indexOf("timthumb.php") !=-1){
                    thisClass = $(this).attr('class')+' ';
                    if(thisClass.indexOf("retinafied") !=-1){ } else {
                    
                        thisImg.replace('amp;','');
                        thisImg = thisImg.split('=');
                        imgUrl = thisImg[1].replace('&w','');
                        imgWidth = parseInt(thisImg[2].replace('&h',''))*2;
                        imgHeight = parseInt(thisImg[3].replace('&q',''))*2;
                        if(thisImg[5]){ 
                            cropPos = '&a='+thisImg[5]; 
                        } else { 
                            cropPos = ''; 
                        }
                        newString = '/downloads/retina-images/timthumb.php?src='+
                        imgUrl+'&w='+imgWidth+'&h='+imgHeight+'&q=70'+cropPos;
                        $(this).attr('src',newString).addClass('retinafied');
                    }
                }
            }
        });
    }
}

Remember, if you download the demo files you will need to install the demo on an actual web server as the solution makes use of a PHP script called timthumb.

A free, fully coded HTML5 & CSS3 UI kit


Download the Freebie

High performance 60 FPS Parallax


Read the Investigation

Loading