6 Replies Latest reply on Dec 27, 2013 10:37 AM by Jon Tara

    Image size with different screen formats

    Jochem Pouwels

      As my app is almost done, its time for the design.

      But I dont know how to support all the screen formats..

       

      There is iPhone with multiple displays: "normal" and "retina"

      and there is Android with "mdpi, xhdpi, hdpi" and more

       

      Do all those resolutions really need a different image?

      For example if my screen only have 1 image in the center of the screen, and that center must be about the same size on every device.

      Do I need a 120x120 image for iPhone retina and a 60x60 image for iPhone regular screen?

      and how about android?

       

      Hoping to hear from you guys!

       

      Thx

        • Re: Image size with different screen formats
          Jon Tara

          If you are using bitmap images, then of course you always need a different image for each resolution for best results, as you will always lose some clarity when scaling images. Images should be resized from whatever their original form was. So, if the original image was 10mbit, always scale-down in Photoshop or some other good tool to each size from the original. If the original was in a RAW format, do not first convert it to JPG and then resize the JPG - instead, resize from the RAW. (Or some other format that does not do destructive compression.) If your original was vector artwork, again, use the appropriate tool to create a bitmap in each resolution from the original vector artwork.

           

          This can be a lot of work, though.

           

          Alternatives include using vector artwork directly (all current browsers accept svg format), or using a high-resolution image. Using a high-resolution image will allow the browser to do the best it can to scale it down (typically though, not the same optimal results as using a good resizing algorithm in Photoshop) at the expense of requiring the user to download a larger-than-needed image.

           

          These are just general rules for use in any web project, certainly nothing specific to mobile or Rhodes.