var viewOnSite = Ti.UI.createImageView({ 
    image:'../images/about.png', 
    top:0
});

10 Answers

• Okay, got feedback from the staff:

  " Hires images only work when local for now. That may change in the future though. "

  Hmmm :-(

• Thanks Adam, I can confirm the same behavior. When using the image property on ImageView, I get the pixelated view of my 2x image. When using the backgroundImage property instead, the ImageView works as expected.

  (Ti Mobile SDK 1.5.1, iPhone SDK 4.2, iPhone Retina Simulator)

• Are you certain you are running the iPhone 4 simulator (the one that puts a giant phone on your screen) and have Titanium 1.4 Mobile SDK installed?

  Try it with a smaller image. Maybe the fact that your high-res image is 1000 pixels tall has something to do with it (that's taller than the 960 available pixels on the iPhone 4).

• Ok, figured it out. Not sure why, but here's whats up:

  When I use this code and add it into a scrollview it shows a pixelated version of the @2x image (def the 2x one because I have a big red "2X" in the corner for troubleshooting =):

  var viewOnSite = Ti.UI.createImageView({ 
      image:'../images/about.png', 
      top:0,
      width:320,
      height:561
  });
  

  Here's a screen grab: http://bit.ly/bKHffg

  When I change the image and make it the background image, it works. Here's the updated code:

  var viewOnSite = Ti.UI.createImageView({ 
      backgroundImage:'../images/about.png',
      top:0,
      width:320,
      height:561
  });
  

  Here's the screen grab: http://bit.ly/cvo9Ov

  So, it's working… kinda. All my other images, I'm using the standard 'Image" tabe, but for this particular one, it's messing up. Thankfully there's a workaround.

  Just wanted to post this in case anyone else is going nuts over this =)

  Thanks again for the awesome API!

  .: Adam

• We're having a similar problem but are unable to resolve it by changing the image call per the above.

  When set as a tab group icon or in windows title via SetTitleImage, our @2x images are displaying. When set via ImageView, our @2x images aren't displaying.

  Any ideas?

  We've tested it both on the device and in the simulator and are getting consistent results between the two regarding this issue.

• Doesn't work with images via remote url :-(

• set your width and height to "auto" your screen res is still technically 320x640 in Titanium. Make sure you also have a non @2x so it renders properly on the 3GS devices. Also background images don't need a specification of width and height or the @2x. You can develop them at full resolution and they will naturally scale. I have a photoshop action and an automator script to resize all @2x images and rename them without the @2x for an easy way to process your alternate images. Let me know if you want the script.

• Thx Conrad, but this doesnt work.

  My image on the server is 600x190pixels.

  When i set width/height to auto my images are overlapping (The @2x images on iPhone4 simulator).
  It looks like the imageview renders not as hi-res, only the real size at 600x190 and then overlapping :-(

  var img = Ti.UI.createImageView({
  image:'http://foo.com/image@2x.jpg',
  left:10,
  top:35,
  height:95,
  width:300
  });
  

• What about hires images for the dashboard view?

  I was thinking of just checking the screen res and then setting them manually, but the regular iPhone simulator and the iPhone 4 simulator give the same data for display width, height, density and dpi, so I'm not sure how to distinguish.

  Anyone know?

• The workaround is to always provide a 2x image and set the hires:true option for the imageview. See http://developer.appcelerator.com/question/51281