Image atom

The image atom is exclusively a bitmap image. For the ratios used throughout the Templates you can refer to the Foundation Images Aspect Ratios section.

Bitmap image

Bitmap image

JSON

Here’s the JSON format of this object :

{

"imageUrl": URL, // Url to download the image (x2 scale)

"otherImagesUrl": {

  "iphone6plus": URL, // Url to download the image (x3 scale)

  "iphone6": URL, // Url to download the image (x2 scale, iPhone6 devices family),

  "iphoneX": URL, // Url to download the image (x3 scale, iPhoneX devices family),

  "iphoneXR": URL, // Url to download the image (x2 scale, iPhoneXR devices family),

  "iphoneXSMax": URL, // Url to download the image (x2 scale, iPhoneXSMax devices family),

  "tablet": URL, // Url to download the image (x2 scale, Table devices)

  "4x": URL, // Url to download the image (x4 scale)

 }

}

The otherImagesUrl object is optional. The default value is the imageUrl property.

All URL of this object are preloaded by the compiler.

This JSON object contains information about an image. The "imageUrl" property specifies the URL where the image can be downloaded. The "otherImagesUrl" property is an object that contains URLs for different versions of the image optimized for different devices. These different versions of the image are at different scales, such as x2 or x3, and are intended for specific device families, such as iPhone6, iPhoneX, iPhoneXR, iPhoneXSMax, and tablet.

This structure is allowing to optimize the loading time of the images by loading the appropriate image size for the device, It also allows to take into account the different screen resolutions of different devices.