3 Replies Latest reply: Jul 13, 2012 12:55 PM by Denis T RSS

    Images for Retina display

    Chandresh
      I created @2x.png images for retina display. For example,

      logo_small_ps.png - 161px 34 px (326 dpi)
      logo_small_ps@2x.png - 322px 69px (326 dpi)

      And i have used "logo_small_ps.png" in image source under header facet of panel page. But when i run application in iPhone(Retina) simulator, it does not pick up the "logo_small_ps@2x.png" image. I confirmed that in Javascript debugger.

      I also tried to use logo_small_ps@2x.png directly as image source, but image showed up very large on screen.

      I realize that i created regular image also with higher dpi value, don't think that will cause any issues.

      Am i missing something?
        • 1. Re: Images for Retina display
          Joe Huang-Oracle
          Hi, Chandresh, there is no automatic switching of icons between regular iPhone vs. iPhone Retina, except in places where we explicitly support two sets of icons - for example in springboard or application icons. I assume you don't want to go with the smaller icon because the icon would look pixelated?

          You can either try to compose an EL for the source that would go to a particular image based on the screen width or height, or simply create two image components and then show/hide based on the screen size. You may run into a bug with parsing EL expression when you try to go with the first approach, though. Second approach maybe the easiest though not elegant.

          Thanks,

          Joe Huang
          • 2. Re: Images for Retina display
            Chandresh
            This will be very important to make images look crisp on Retina displays, it will be very nice if framework can do this automatically. May be Enhancement Request?
            • 3. Re: Images for Retina display
              Denis T
              We already spoke about this in a meeting but just to close on this for the sake of the forum....


              When using images, it is recommended to only use/package the highest resolution images and scale them down accordingly. Example: Your image should be 50x50 in pixels so you should be using a 100x100 image and setting the width/height of the image (using inlineStyle or styleClass) to 50x50. This way the image sizes perfectly and will look very crisp in both retina and standard.