Yup.  As the saying goes, size definitely matters, but in this case, small is better.  Tiny is even better 🙂

Note: I’m not suggesting that photos are evil when it comes to attaching them to field forms.  On the contrary, photos are amazing and super powerful story tellers.  However, you need to be careful with photos…I generally advocate taking the minimum number of photos that will tell the story you are trying to tell.  In other words, don’t take 20 pictures of the same thing, from different angles, etc.  That’s just a waste.  Think of the end user trying to sift through all those similar pictures.  Not fun.

And with today’s modern phones, a normal-sized photo will be somewhere in the range of 2-4 Mb in file size.  Now let’s do some basic math:

• Assumption: Each photo is 2.5 Mb from your iPhone 13
• You take 10 photos and attach those 10 photos to one form
• That’s (2.5 Mb x 10) = 25 Mb just in the photos
• You fill out some data and sign the form.  That’s another 0.5 Mb in data

In the above example, you will end up having to sync 25.5 Mb from your phone on your shitty 2 bars of 4G T-Mobile network. That’s going to take a while.  And if there’s an interruption during sync, that might result in lost/corrupted photos.

On the downstream end, each time you want to load the photos in the photo viewer of the dashboard, when you click on the camera icon, it will have to load 25Mb of data to display your photos.  And when you click on the PDF icon, the PDF will have to also load 25Mb of photos to render the PDF version of the form.

Keep bloat from happening, automatically

You can keep bloat from happening very easily with 2 controls:

• Set up photos to be automatically reduced at the point of taking the photos
• Limit the photo control to a specific # of photos, so that the field tech cannot take a ridiculous number of photos per form submission

File sizes explained

Take a look at the screenshot below, which illustrates 4 different filesizes of an image.  The leftmost image is the original picture, taken with an iPhone 13.  That file is 2.3Mb and is 3,024 pixels width by 4,032 pixels height.  It’s huge, basically.  When I reduce the file to 1,080 pixel width, the file size is reduced from 2.3Mb to 201Kb, which is basically about 10% of the file size of the original.  And if I shrink it even more, to 540 pizel width, the file size is reduced to 76Kb, about 97% smaller than the original.

Now lets do some more math, using the same example above:

• Assumption: Each photo is now automatically downsized to 201Kb
• You take 10 photos and attach those 10 photos to one form
• That’s (201Mb x 10) = 2 Mb just in the photos
• You fill out some data and sign the form.  That’s another 0.5Mb in data.

So now, instead of syncing 25.5 Mb, you are only syncing 2.5 Mb, which is a humongous difference.  You still get 10 pictures, but the bloat is gone.  And if you go a step further and downsample the photos to 540 pxel width, you end up with (76 Kb/picture x 10 pictures) = 760 Kb to sync back to the server.

Does the image quality suffer if you auto-reduce the photo size?

Yes, a little bit, but for purposes of field forms, not enough to make any difference whatsoever.  Unless you are doing some crazy super high resolution stuff like the folks at Imago do (taking high resolution images of rock core), it makes absolutely no difference.

To prove this, take a look at the images below.  The first screenshot is of my SketchApp canvas at 25% of actual size.  Here you will see 4 different image resolutions of a bottle of wine.  The leftmost image is the original 2.3 Mb image that I took with my iPhone 13 Mini.  The 2nd image from the left is the same image downsized to 1,080 pixel width, and the far right is the same image downsized to 540 pixel width.  Notice the different file sizes and dimensions.  I’ll make it easy and put that info in a table below.

Now take a look at the SketchApp canvas at actual size.  Because my 27 inch monitor isn’t large enough to show the whole SketchApp canvas, only the 720 pixelx width and 540 pixel width images are visible below.  Can you tell any different in image quality?  I can’t.  And neither will anyone looking at the image on an online photo viewer gallery or even on a printed PDF document.

Now lets zoom in at 400% at look at the details.

Yea sure, there’s a difference, but only if you are looking at the image zoomed in and looking at the pixelation.  But…and here’s the important part…

when was the last time you needed to zoom into a field photo up close like that??

Probably never.

You get the most bang for your (image resolution) buck at 1,080 pixel width

If you look at the table above, it’s evident that the biggest reduction in image file size benefit occurs when you downsize an original image to 1,080 pixel width.  That’s a reduction of 91% of the file size.  And if you are going to be taking a lot of pictures for a particular form type, you can always go to 540 pixel width to reduce the file size another 6%.

 Available controls in the XForms Designer to customize the image field

In the XForms Designer, you can set the image quality to whatever width you want.  And you can also control a few other things. Here’s a list of the available controls with the Image field:

• Minimum # of photos (defaults to 0. If you want to force a field user to take at least one picture, set this field to “1”).
• Maximum # of photos (defaults to 5. If you want to allow a user to take more than 5 pictures per form submission, change this to a larger number)
• Maximum image size (defaults to 1,080 pixel width. If you plan on taking a lot of photos, lower this to 540 pixels.  If you want to take super high resolution images, increase this value, but be careful as the file size grows exponentially…see above explanation)
• Save photos to gallery (if you want to copy the photos to a device’s gallery, flip this switch to “on”.  Be careful about this if your field staff is going to sensitive/classified areas…you don’t want to be saving sensitive pictures to a user’s personal phone)

Here’s a screenshot of the image control in the Designer.

 Want to take a closer look at XForms, and what it can do for your team?

Click/tap the button below.