EachScape

You're probably familiar with the concept of measurements in pixels. But as screens have varying pixel densities, we measure things in points. On an original iPhone, points and pixels were equivalent, leading to further confusion...
When you set the height of a block, it's specified in points if you just type a number. If you enter a number followed by a percent sign, like “27%” then that means the height is determined as a percentage of the overall device height.

Both techniques will be useful. We generally prefer to work in points, but occasionally something might work better when specified in percentages. There is no right answer. More on Pixel & Points

When selecting images from the Media Folder (and using some other tricks for images from feeds), it is possible to tell the app what to do when the image size and the image placement area differ in size. We offer 2 options

1. Scale to Fit: Image is scaled to fit its container, it will never be cropped. 
   If the image and the placement area are of different aspect ratios, then transparent bars will be used either on the sides or at the top and bottom to fill the rest of the placement area (the location of the bars depends on the relative aspect ratio of the two). If Background Fill color is set, the bars will have that color.
    
2. Scale to Fill: Image is scaled to fill its container, it may be cropped but no bars will appear. 
   If the image placement area and the image have the same aspect ratio, no cropping occurs. With this option you are guaranteed that the image will fill the entire space
    

To take advantage of higher screen resolution, you are encouraged to upload images with 2x or 3x pixel densities in the Media Folder. What that means is that if you want to have an image take up 100x100 points on the screen, your image would look best on higher density screens if you upload a 300x300 version of the image and tag it as having a 3x scale in the Media Folder.

Pixel Density

When you upload an image, the Media Folder will try to guess the image's correct pixel density.
If the filename of your image has "@2x" or "@3x" before the file extension (e.g., "image@2x.jpg" or “image@3x.png”) the Media folder will use that value to determine the pixel density. Otherwise, if both the width and the height are divisible by 3, the image will be marked as 3x. If the height and width are not divisible by 3 but are divisible by 2, the image is marked as 2x.

 If the Media Folder guesses the density incorrectly, you can change it, but you will only be able to select a scale that both the height and width are divisible by.

This is automatic, all you have to do is make sure the image is double the height and width or triple the height and width of its placement area, when measured in pixels.

EXAMPLE

In other words, if you have a placement area that is 320×40 points (WxH):

• If you upload a @2x image, it should be 640×80 pixels. Please note that @2x image's height and width must both be an even number of pixels.
• If you upload a @3x image, it should be 960x120

See graphic herein for corresponding image sizes and link POINTS to PIXEL.
 That will help you size your images.

”@2x” or "@3x" are recognized but as long as your image is divisible by 2 or 3 the 2x or 3x selections will be available.

In this example, the same image (training puppy) has 2 different sizes.

• The first one is only divisible by 2 
• The second image is divisible by 3

Troubleshooting tip: If you find that images look blurry in your app, it is likely that the images have their scale set incorrectly; in this case you should try selecting a lower scale such as 1x.

iPhoneResolutions
iPhone Resolutions

To better understand what are 1x,2x and 3x we find this graphic from Paintcodeapp very useful. It explains iPhone resolutions very well.

Another good article on screen sizes

Learn More
- Image Resizing In Cloud Collection
- Access to Camera