How image re-sizing works
Localytics is responsible for triggering and rendering in-app creatives. Although, because devices differ in screen dimensions and aspect ratios, Localytics needs to rescale or crop images on some devices so they display without being stretched or leaving whitespace in the background. We provide some helpful information below. To put this into context, however, sizing images across devices is a general and well-documented design exercise independent of Localytics, so you should also consider consulting authoritative design resources throughout the web, like StackOverflow, Paintcode, iOSres.com, or official platform-specific documentation.
Example
As an example, suppose you upload a full-screen image to Localytics that reduces to a ratio of 16:9 and this image is to be displayed on a device with a ratio of 4:3. One of two things must happen to avoid stretching the original image.
-
We could rescale the image so it fits the full height, in which case it will fill an area of 4:2.75 (computed by dividing the original 16:9 ratio by 4), leaving blank space on the sides since the displaying device has a ratio of 4:3. That excess screen area could be filled with whitespace.
-
Alternatively, we could rescale the image so that it fits the full width, in which case it will fill an area of 5.33:3 (computed by dividing the original 16:9 ratio by 3), meaning the image will be taller than the available screen real estate since, again, the displaying device has a ratio of 4:3. This means the excess height will need to be cropped.
In order to avoid leaving whitespace, Localytics will take the second approach, filling as much screen as possible while cropping excess area. The implication is that your image may get cropped in order to ensure the best end user experience (a full-size image, without stretching). Therefore, if your image was only to be displayed on devices with dimensions that reduce to 16:9 or 4:3, the "safe area" - i.e. the area that would always display and never be cropped on either device - would be 4:3 and in order to fill the taller screen, the full image should cover a ratio of 16:9. Knowing these ratios, we can make recommendations about how to size your images for optimal display.
Localytics recommendations
The good news is that you don't really need to figure out all the device sizes - you only need to consider devices at the extremes, which are covered in the example above. The 16:9 ratio is generally the tallest & skinniest and the 4:3 ratio is generally the shortest & widest so if your image can accommodate these extremes, it can also accommodate all devices in between.
With this in mind, we have produced illustrations below that show recommended full-screen image sizes with the "safe area" within that image. Again, this is not Localytics-specific so consult design literature if you wish to customize further or want to size your image to display in a particular way on a particular device. Note that the "safe area" (1180px) is slightly narrower than technically-available width (1280px) to account for devices like the Samsung Galaxy 6 Edge, which have curved screen edges. Importantly, to ensure images scale correctly, CSS containers should be percent-based and fluid. This design style allows a message to adapt to different form factors.
