Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

How to show high res images on iphone4


I read something about the iPhone 4 having a high-res display (retina). I just created this app which loads several feeds. The most items in these feeds have images. But they look terrible on the iPhone 4. I need my app to be running nice on iPhone(s) and Android. My question:

What is the best way to build in support for high-res remote images on iPhone 4 while i keep supporting other platforms?

— asked November 18th 2010 by Jeroen van Gijzel
  • @2x
  • feed
  • high-res
  • images
  • xhr

3 Answers

  • Accepted Answer

    I read a cool tip on another post to use webviews to display an image as high res. Let's say your image from the feed is 100x100. To look good on an iPhone 4, you need to display it as 50x50. Here's how you do that with a webView.

    var wv = Ti.UI.createWebView({
        html:'<body topmargin=0 leftmargin=0><img src="' + your_100x100_image_url + '" width=50 height=50></body>',
        left:10, top:6, width:50, height:50, borderRadius:8

    Now just add that to whatever window or view you want it to show up in.

    This technique works great and looks real nice on the iPhone 4.

    Hope that helps.


    — answered November 26th 2010 by David Knell
    1 Comment
    • Dave… Thank you!!!!

      This did the trick for us, i really appreciate your input.

      — commented November 26th 2010 by Jeroen van Gijzel
  • Maybe you could do this:

    // Check the width of the display
    if ( Ti.Platform.displayCaps.platformWidth .... )
    // Set a variable width the correct image url from the feed depending on res..
    var feedImage = ....
    // Then
    var view = Titanium.UI.createView({
    — answered November 18th 2010 by Fredrik Nordlund
    • Hi Fredrik,
      thanks for your answers. I now have it solved server-sided, with the $_SERVER['HTTP_USER_AGENT'] variable (php) i can determine which iphone version the client is using, if the version >= 4 then a bigger image will be returned to the client.

      This image i am returning has the double size of the smaller version. But when i show this picture it doesn't show a sharp image on the iPhone, when i open this image normally with a browser or something like that it is sharp.

      The image is being shown in a ImageView, with a fixed width & height should i use width&height auto? Because i would like to show the image in a specified size.

      — commented November 18th 2010 by Jeroen van Gijzel
    • Are you sure you are setting the right width / height ratio when displaying the image? Maybe you could use a fixed width and auto for height or something like that? I havent really looked into something like this myself yet so i dont have much more of an answear right now.

      Btw, be sure that you grab the iPhone version and not the iOS version since an old iPhone 3 also can have iOS 4.x installed..

      — commented November 18th 2010 by Fredrik Nordlund
  • if the remote images are low quality it;s out of your hands. But if you want to use high res local images just put @2x behind your high res image name. the iPhone4 will automatically use this image instead of the normal 'low-res' image.


    var view = Titanium.UI.createView({

    make sure you have a low-res image called image.jpg and the same image in high-res called image@2x.jpg

    — answered November 18th 2010 by Glenn Tillemans
    • Hi, thanks for your answer. But i need to load the images of this feed. The feed can offer a image in different qualities if nescessary. I only need to know how to implement this. Or do i need to check for iphone version in my script? someting like:

      if(iphoneversion == 4) {
      var imageSource = feed.image_high_res;
      } else {
      var imageSource = feed.image_low_res;

      I thought maybe there is an easier way to do this?

      — commented November 18th 2010 by Jeroen van Gijzel
    • I think you should be able to use: if ( Ti.Platform.displayCaps.platformWidth …. ) to detect the width of display and by so you know if the app is running on iPhone 3G or iPhone 4. Hope that helps..

      — commented November 18th 2010 by Fredrik Nordlund
    • Are you sure about that? I dont think it automatically does that in-app, you have to programatically check the iOS version. The @2x only works for the icon and splash screen..

      — commented November 18th 2010 by Josh Lewis
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.