From Shutter to Server: The Lifecycle of an Image in Your Forms

From Shutter to Server: The Lifecycle of an Image in Your Forms

When a user captures or uploads a photo within a form, that image undergoes a calculated journey. It is resized, compressed, and optimized to balance sharp visual quality with fast performance and manageable server storage.

Here is a technical breakdown of exactly what happens to an image at every stage of its lifecycle—from the moment the user taps the shutter to its final rendering in your report templates.

The Core Image Journey

Stage 1: Device Capture & Selection

The journey begins when a user interacts with an image entry field in the app.

  • The Action: The user either takes a live photo using their device’s camera or selects an existing photo from their gallery.
  • The Behind-the-Scenes: Modern mobile devices capture photos at massive resolutions (often 12 to 48+ megapixels). Uploading these raw files directly would drain user data and slow down form submission times.

Stage 2: Client-Side Resizing (In-App)

Before the image ever reaches the network, the mobile app intercepts it and performs an initial optimization based on your Form’s Design Settings.

The app automatically maintains the image’s original aspect ratio during this process, so the picture never looks stretched or distorted.

  • The Action: If you have set a maximum image size in your form design (for example, 800 pixels), the app processes the image locally.
  • The Logic: The app identifies the longest dimension of the photo (width for landscape, height for portrait) and scales it down to match your setting (e.g., 800px).

Stage 3: Server Upload & Storage

Once optimized by the app, the file is transmitted over the network.

  • The Action: The resized image is uploaded to our cloud servers.
  • The Logic: The server stores the image exactly as it was received from the app in Stage 2. This becomes the “source image” for all future actions. It is never compressed or altered further on the server side during storage.

The Output & Template Journey

What happens when you generate a PDF report or template from that form entry? The final output resolution depends entirely on your template configurations.

Here is how the system handles the source image during document generation:

DPI and High-Res Settings

The baseline resolution of the image in your document template is determined by your template’s resolution toggle:

  • High-Res Images Enabled: The template renders the stored image at 150 DPI (Dots Per Inch), offering crisper quality for printing.
  • Standard Resolution (Disabled): The template renders the image at 96 DPI, which is optimized for fast digital viewing and smaller file sizes.

Note: Neither setting alters the original image stored on the server during Stage 3: Server Upload & Storage.

Layout Constraints (Tables & Page Space)

If no specific dimensions are defined, the system looks at the surrounding document layout to fit the image:

  • Inside a Table/Merged Cell: The table cell’s physical dimensions serve as a bounding box. The image is scaled down to fit within those exact cell boundaries.
  • On the Standard Page: The system uses the remaining available page margin space to determine how large the image can be displayed without breaking the layout.

Explicit Placeholder Dimensions

You can explicitly control an image’s size by passing dimensions directly into your template placeholders.

  • The Syntax: Using a format like {{image|500x500}} forces a specific constraint.
  • The Logic: The template engine will look at the placeholder, identify the maximum bounding box (500px), and resize the longest dimension of the stored image to 500px while preserving the aspect ratio.

Interactive Clickable Images

If you have enabled the Launch Images By Click/Tap feature within the form connector, the output document will include a hyperlink on the image.

  • The Action: When a viewer clicks the image in the generated report, it opens the image directly in their web browser.
  • The Result: Because this bypasses the document layout, the browser loads the original stored image from Stage 3 (e.g., the 800px version), allowing the viewer to inspect the photo without template layout restrictions.

    • Related Articles

    • Troubleshooting Missing Forms, Screens, or Docs

      If your forms or documents have disappeared from your device, it is usually due to Folder Access Restrictions or Form Visibility Settings. Quick Check Before diving into folder settings, check these three common “quick fixes”: Is the Form in “Test ...

    • How can I control the quality / size / megapixels of images in forms?

      By default, images captured by our media field will have a maximum width of 800px. This default ensures that captured images do not consume large amounts of the user’s mobile data during uploads while maintaining a reasonable quality standard for ...

    • Working Offline: Capabilities and Requirements

      Our native mobile apps are built from the ground up to support offline workflows, ensuring your field team can capture data uninterrupted—even in environments with zero network connectivity. Unlike standard web forms, our apps download and store ...

    • Configuring Proxies and Whitelisting for Offline Environments

      If your organization operates in a secure facility with limited or no direct internet connectivity, you can still use our platform to capture and sync data. By routing traffic through a secure proxy server, your tablets and devices can safely ...

    • App permissions

      When launching the eForms Mobile Client app for the first time or using certain functionality within a form, like capturing and accessing media, etc., on the device, the app will ask for permission to function properly. If you allow it when initially ...