Images in CommCare

 

 

 

Image Best Practices

In terms of what kinds of images to use to communicate ideas to low-literate users, past research indicates a preference for life-like line drawings over pictures or super cartoonish things (though trade-offs include that photos, for example, may be easier to update.).

Images may have too much detail and be distracting, while cartoon-ish subjects may be baffling to audiences not familiar with the particular style of caricature. The use of colors and other illustrative effects to highlight the particular area of interest is also helpful (e.g. red on the dress of a black-and-white person to indicate bleeding).

When using illustrations, it is also important to maintain context (e.g. it is better to show a womb with torso, arms, and legs, rather than just a womb by itself.)

Image Sources

You can find some open-source images that you can use in your applications in these places:

  • OCHA Humanitarian Icons - some background on this image set is available here

  • ORB - library of resources developed for Frontline Workers

  • Noun Project - free library of stock images that can be downloaded in many colors

Image Format

Images in CommCare should be formatted as 32 bit PNG files. Transparency is supported on most phones.

PNG is the recommended file format.  You can use other image formats, if supported by your phone, but the file-paths that are automatically generated in the form builder will end in "png."  

If you want to use a different format, you will need to manually change the file-paths.

Image Sizes

The size at which your images will display in CommCare is dependent upon 2 things: 1) the original size of the image file you provide, and 2) the Android device model you are using. The 2nd criteria has to do with Android device specs, and is unimportant unless you are deploying your app on multiple Android device models. If so, refer to this page for guidance on sizing your images for use on multiple device models.

If you will only be deploying your app on 1 device type, the only thing you need to consider is the size of the image file you provide. It is important for images that will appear in a form to be sized appropriately so that the entire question and options fit on a single screen without scrolling. It is also important for images that will appear in case lists or be used as menu icons not to be too big or too small. The table below provides some suggested dimensions for different types of images on specific devices (file sizes are in the format width x height in pixels). These are meant only as a guideline, and are not exact.

If you do not see your device in this table yet, or just want to a reliable way to test out different image sizes, a new process to help you do so can be found here. If you determine image sizes that work well for a new phone model, feel free add information to the table.

On Android phones, there is also limited support for automatic resizing of images. Documentation for this feature can be found here.

Below are some free tools we have used in processing images.  No guarantee that they will work as they are third-party programs, but we have had good experiences with them.

Paint.net: Free software for editing images. Compatible on PC. 

IrfanView: Free software for re-sizing images and converting among file types.  Can also do re-sizing and conversion in bulk if you have lots of images to process at once. 

Greenshot: Free software for taking and editing screenshots.  Very useful if you want to capture images from documents, websites, or a phone emulator.

Some PDF to Word Converter: Can extract images from a PDF file.

Resize Your Image: can upload individual photos and resize them.