Skip to content

Tips and Rules for adding Images

This article contains helpful tips, rules and best practices associated to inserting images into Tips, Popups and Carousels.

Performance

Depending on the situation you may not want web fetch latency in mobile apps. The Contextual SDK's all fetch images at display-time and therefore size/speed considerations should be made. The options you have are:

  1. Use your own CDN and link the images in the Contextual dashboard when creating your tips, popups etc. This gives you greatest control over image performance.

  2. Local storage - in mobile Apps you may already have common graphical elements stored. You can use these by resource name and they should show in preview and user mode. CAVEAT: you will not be able to see the image in the dashboard because its on your device! (user preview mode to view)

  3. Upload images when creating tips/popups/carousels in the Contextual dashboard is fine. The images are hosted on the Filestack CDN and they have several posts on the performance of that.

  4. Using Contextual template images these images are generally stored in our CDN which should be fast, but if these are too slow, as per (1), please use your own images and CDN.

Design

  • As a general rule - It is is better to upload higher quality (higher resolution) images than required. It is better to scale down the size of the image to fit into the tip etc rather than try to stretch the image to fit the required size. CAVEAT: refer the performance notes above.

  • An Image’s height and width can not exceed the containers maximum height and width. A container is defined by the outer edge of any tip, popup or carousel.

  • If no height or width is set for the image then the image will attempt to be displayed at original size.

  • An image will always retain it’s aspect ratio unless you set both height and width to a ratio different to the Images natural ratio.

  • By default if you only set an images height or width, the image will maintain its aspect ratio and be sized to the H or W that you set.

  • If you wish to change the aspect ratio of the image you can do so by setting the DP for both the height and width of the image.

  • The easiest way to make an image full screen in the container is to set the container DP (through appearance Tab) and the image DP the same. This way the image will display full screen in both landscape and Portrait mode.

  • If using percentages the same effect can be achieved but when a user changes from portrait to landscape the image and tip may get distorted due to the differences in resolution from portrait to landscape mode on mobile devices.

  • If you set an image DP over the size of the container then image will scale to fit the container.

  • If the user wants an image to be bigger than the container (so that some of the image is cropped), it is better to edit the image in an image editor then re-upload the image through our Dashboard.

  • If you set a container to have a corner radius and the image has also been set to full width or height of the container, the corners of the image will be cropped. See image below.


Last update: 2024-01-12