Welcome, Guest Login

Support Center

What image size should be used?

Last Updated: Oct 10, 2016 12:56PM EDT
This article has been retired.
Please go to 'Working with Images'



EachScape resizes images to make sure your apps look great on all devices.



Introduction
Working with images is always bit challenging. In this tutorial we will do our best to explain and share as much resources are can. But without a good understanding of DPI, Screen Ratio as well as 1x versus 2x or 3x it's a bit challenging to fully grasp what is what.

In this tutorial we give you screen sizes and recommendation on what image size to use for EachScape components. 
For specific images - like icons, splash screens, etc - you have to strictly follow Apple or Android recommendations.

The best rule of thumb is:
Always try to use the biggest size image.

Icons references
Splash Screens


For EachScape Blocks
 
IMAGE Block Android iOS
Asset location:    
Media Folder Exact image sizes you want to display and mark as access by name. When possible use a 3x image. Make sure you mark it as 3x image in the Media Folder.
RSS, XML    
 
HTML
Block
Android iOS
Asset location:    
Media Folder Exact image sizes you want to display and mark as access by name.  When possible use a 3x image. Make sure you mark it as 3x image in the Media Folder.
Data Source    



Example
Let's consider developing for iPhone.

We want the app to look good in iPhone6, 6+ and of course older iPhone like iPhone 5 and 4.

For an Image that is full screen:
     Html block: Image should be 480x800
     
    Image block
      Image in  
          Media folder image: 2x image should be 640x1066, 1x image should be 320x533. it is recommended to upload 2x image.
          Expansion file image: image should be 480x800. No scaling will be done

Hard coded Height/widths in EachScape are designed in 1x.
Should be based off a 320x533 1x screen size
Sys device heights/widths values are in 1x, should be 320x533
The device autoscales hardcoded 1x dimensions to 1.5x

If you use an Image Block and the image isn't marked as 2x, then this will increase the image size by a large factor and thus use more memory.

iPhone Resolutions
Here is one of the most useful graphic we found on the web. It explains iPhone resolutions very well. It's coming from Paintcodeapp.



Learn More
- Image Resizing In Cloud Collection

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets2.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete