Using x2 retina images in Edge Animate

  • Adobe Edge Animate - March 30, 2016

A simple hack to make the browser automatically select retina or non retina images in an AE project.


Adobe Edge doesnt natively let you use x2 retina display images, and the problem with using double size images is that they look great on a retina display, but will look blurry on non-retina screens, as a result you have to choose which you prefer.

Luckly this simple simple piece of code will allow you to use "retina display images" in your Edge Animate project.

First we need to place a small piece javascript in your HTML Header and then make a small edit to the published _edge.js file.

First we need to the browser to check for your display type. So once you have saved your EA project for the first time open up the HTML file and copy the following code above the line that says <!--Adobe Edge Runtime-->:

 

<script>  
function getDevicePixelRatio() {
  if(window.devicePixelRatio === undefined) return 1; // No pixel ratio available. Assume 1:1.
    return window.devicePixelRatio;
  }
  if(getDevicePixelRatio() > 1) {
    var im="imagesRetina/";
  } else {
    var im="images/";
  }
}
</script>


Now continue as you normally would when building your project placing all your images in the image folder.


Once you have completed your project, publish it and create a second folder in the published 'web' folder called imagesRetina and place all your retina x2 sized images in here keeping there names the same as the normal versions.
 
Now open up the yourfile_edge.js file from your published folder, find and delete the following piece of code:

var im='images/',

Save the file and test.

Comments