Skip to content

Instantly share code, notes, and snippets.

@yasuoza

yasuoza/dynamic.html

Created November 13, 2012 01:47
Show Gist options
  • Save yasuoza/4063368 to your computer and use it in GitHub Desktop.
Save yasuoza/4063368 to your computer and use it in GitHub Desktop.
Download ZIP
Web site with retina display
Raw
dynamic.html
<!DOCTYPE html>
<head>
<script src="js/dynamic_retina.js"></script>
</head>
<body>
<img src="img/google.png" style="width:138px;height:48">
</body>
</html>
Raw
dynamic_retina.coffee
RetinaImageConverter = {
resize_images: =>
return unless @devicePixelRatio? and @devicePixelRatio >= 1.5
images = document.getElementsByTagName("img")
for image in images
image.src = image.src.replace(/\.\w+$/, (match) -> "@2x#{match}")
}
@onload = RetinaImageConverter.resize_images
Raw
dynamic_retina.js
(function() {
var RetinaImageConverter = {
resize_images: function() {
if ((this.devicePixelRatio == null) || this.devicePixelRatio < 1.5) {
return;
}
var images = document.getElementsByTagName("img");
for (var i = 0, len = images.length; i < len; i++) {
images[i].src = images[i].src.replace(/\.\w+$/, function(match) { return "@2x" + match });
}
}
};
this.onload = RetinaImageConverter.resize_images;
}).call(this);
Raw
retinsjs.html
<!DOCTYPE html>
<head>
<!-- Using retina.js http://retinajs.com/ -->
<script src="js/retina.js"></script>
</head>
<body>
<img src="img/google.png" style="width:138px;height:48">
</body>
</html>
@yasuoza
Copy link
Author

yasuoza commented Nov 13, 2012

Support retina display

Candidate

  • Use apple.com like dynamic image src changing
  • Use retina.js library
  • Use cookie based server side converter(rails: clear_eyes)

Use dynamic image src changing

When document loaded, replace image src with @2x prefix.
apple.com based on this.

dynamic_retina.coffee:

RetinaImageConverter = {
  resize_images: =>
    return unless @devicePixelRatio? and @devicePixelRatio >= 1.5
    images = document.getElementsByTagName("img")
    for image in images
      image.src = image.src.replace(/\.\w+$/, (match) -> "@2x#{match}")
}

@onload = RetinaImageConverter.resize_images

dyanmic_retina.js:

(function() {
  var RetinaImageConverter = {
    resize_images: function() {
      var image, images, _i, _len, _results;
      if ((this.devicePixelRatio == null) || this.devicePixelRatio < 1.5) {
        return;
      }
      images = document.getElementsByTagName("img");
      for (var i = 0, len = images.length; i < len; i++) {
        images[i].src = images[i].src.replace(/\.\w+$/, function(match) { return "@2x" + match });
      }
    }
  };

  this.onload = RetinaImageConverter.resize_images;
}).call(this);

Merit

Fast @2x image loading

Demerit

You need to prepare all @2x image.
You cannot use images which there is not @2x version.

Use retina.js

Make XMLHttpRequest to server to verify there is @2x image.
When there is @2x image, replace image src with @2x prefix, otherwise not.

In your html file. Load retina.js

<script src="js/retina.js" type="text/javascript"></script>

Merit

You can use images which there is not @2x version.
So, you do not have to prepare all @2x images.

Demerit

times XMLHttpRequest occurs. It make page loading to be slow.

Use server side retina support(Rails)

Store client resolution to session, and use it.
In rails clear_eyes gem supplies retina image tag (a.k.a r_image_tag).

In your Gemfile:

gem 'clear_eyes'

In application.js

//= require clear_eyes

In your view file

= r_image_tag('my_awesome_image.jpg')

Merit

Do not dependent on client browser power.

Demerit

Use server power.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment