Configuring Ignition Perspective to Serve WebP Images

Stefan Weidner8 min read
HMI ProgrammingOther ManufacturerTroubleshooting
Licensed PE Working through this on a live machine? A Maine-licensed engineer can take it from here — included with IMD hardware, by the hour for everything else. Book an engineer

Follow the packet. A Perspective session does not render an image because the project contains an Image component; it renders after the browser obtains the referenced bytes from a reachable resource endpoint and decodes the format. The built-in Image Management tool is the blocking point for WebP in the documented configuration. The Image component itself places no arbitrary file-type restriction on the asset: once another hosting path serves the file, the browser decides whether it can display it.

Where does the WebP request travel?

The data path starts at the browser running the Perspective session. The rendered view supplies an image reference, the browser resolves that reference, and the network carries the resulting request to the resource host. That host must map the requested path to the WebP file and return the file intact. The browser then decodes the response and composites the image into the page.

Path element Reading to take Pass condition Failure meaning
Image reference Resolved resource address shown by browser diagnostics The address points to the intended host and file The component, binding, or project path is wrong
Name and route Resolved host and network reachability The browser reaches the resource host Investigate name resolution, routing, proxying, or firewall policy
Connection Protocol and deployment-assigned port The connection opens without transport failure The endpoint is unavailable or blocked before file handling begins
Resource mapping Requested path and returned object The response contains the intended WebP bytes The hosting mechanism does not expose the file at that path
Browser decode Image visibility and browser decoding diagnostics The browser displays the image The response is corrupt, mislabeled, transformed, or unsupported by that user agent

No fixed address, port, or response timing applies to every deployment. Read all three from the browser session being tested. This separates an incorrect project reference from a transport failure and separates both from a format-decoding problem.

Does the physical and transport path work?

Layer one first. If other Perspective resources from the same host also fail or stall, WebP is not yet the useful diagnostic target. Check the client link, wireless quality where applicable, interface state, name resolution, route, proxy path, and the connection to the deployment-assigned port. A browser cannot test image-format support until it receives the complete resource.

Observation Likely fault domain Next check
Multiple page resources fail Physical link, network path, proxy, or server availability Restore general resource delivery before testing WebP
Only the WebP address fails before a response Incorrect host, port, route, or path Compare its resolved address with a working page asset
The request completes but returns another object Resource mapping, authentication redirect, or fallback document Inspect the response identity and requested path
The intended bytes arrive but no image appears Browser decoding, response metadata, or file integrity Open the same resource address directly in the same browser

Record transfer duration rather than guessing a threshold. Compare the WebP request with the JPEG or PNG it replaces under the same client, route, cache state, and page state. That comparison exposes whether byte reduction changes the user-visible load path.

Where does built-in Image Management stop the request?

Built-in Image Management accepts a limited set of image files and does not provide the requested WebP support in the stated product configuration. The failure therefore occurs at resource ingestion or project resource exposure, before the Perspective Image component and browser get a useful chance to decode the file.

Hosting choice WebP decision point Maintenance effect
Built-in Image Management The management tool limits accepted file types Uses the normal managed-image workflow but blocks WebP in the described state
Blob-server module The module exposes the arbitrary file; the browser decodes it Adds a separate module and resource path to maintain
webdev The project serves the file through another endpoint; the browser decodes it Adds endpoint configuration, access control, and lifecycle work
Planned arbitrary project-file hosting The proposed resource mechanism would accept arbitrary formats No implementation version or delivery date is stated

A request later targeted version 8.3, but no confirmed 8.3 behavior accompanies it. Test the installed build's Image Management import path before treating version 8.3 as a resolving branch. Planned arbitrary-file hosting is architectural direction, not a deployable procedure until it exists in the installed release.

Can the Perspective Image component render the file?

The Image component passes the resource reference into the browser environment. It does not impose an arbitrary format whitelist of its own. Browser support is therefore the final format gate after hosting and transport succeed.

WebP can encode lossy or lossless images and can retain alpha transparency. That makes it a candidate for assets that would otherwise force a choice between JPEG compression and PNG transparency; standard JPEG does not provide an alpha channel. A cited adoption snapshot placed WebP-capable browsers at 96% market share in November 2021, but fleet validation matters more than a historical market percentage. Test every managed browser family and version used by the deployment.

  1. Copy the resolved WebP address from the Perspective session.
  2. Open that address directly in the same browser and client context.
  3. If it does not open, inspect the returned object, file integrity, and browser diagnostics.
  4. If it opens directly but not in the component, compare the component's resolved reference with the direct address and inspect bindings that rewrite the path.
  5. Repeat on each supported client browser; one successful desktop test does not qualify the full fleet.

Will WebP reduce the measured page-load path?

Smaller images reduce transferred bytes, but image transfer is only one part of a Perspective page load. Script, style, application initialization, resource scheduling, latency, server processing, and cache behavior can dominate. Follow the packet timing to determine whether images are on the critical path.

Symptom Reading Decision
Image transfer occupies a large part of the visible load interval Transfer size and completion time for the image requests WebP conversion is a strong candidate
Images are small or complete after another blocking resource Request waterfall and render timing Optimize the blocking resource first
Repeat loads are fast but first loads are slow Cold-cache versus warm-cache results Evaluate transferred bytes and cache policy separately
WebP is smaller but renders no faster Comparable uncached request and visible-render timings Network transfer is not the dominant delay

A reduction of about 30% against an equivalent JPEG was the working expectation stated for many images, not a fixed conversion result. Measure each exported asset at an acceptable visual quality. Do not compare a low-quality WebP with a high-quality JPEG and attribute the entire difference to format efficiency.

Which branch fits the maintenance requirement?

If avoiding workarounds is the primary constraint, retain a format accepted by Image Management and optimize the source dimensions, quality, and compression. This keeps the asset inside the normal project workflow. It does not deliver WebP's combined compression and alpha capabilities, but it avoids a parallel hosting dependency.

If transfer reduction outweighs the added maintenance surface, host WebP through a blob-server module or webdev. Document the owner, resource location, backup method, deployment dependency, permissions, and component reference. The browser must be able to reach that endpoint through the same operational network path as the Perspective session.

Choose with two readings: measured transfer benefit and operational ownership. A smaller file does not justify an endpoint that cannot be backed up, migrated, secured, or restored with the project. Conversely, rejecting external hosting without measuring the image contribution can leave a meaningful first-load delay unresolved.

How do you implement the resolving branch?

  1. Export the source image as WebP, preserving alpha where the asset requires transparency. Retain the JPEG or PNG baseline for size and visual comparison.
  2. Place the WebP file in the selected blob-server or webdev hosting path. Do not attempt to prove browser support through Image Management when that tool is the file-type gate.
  3. Open the hosted resource address directly from a target client. Confirm that the returned object is the intended file and that the browser renders it.
  4. Configure the Perspective Image component to use that reachable resource reference. Check any expression or binding that constructs the host or path.
  5. Load the view with browser caching disabled or cleared for the comparison. Record the request address, transferred size, start time, completion time, and visible result.
  6. Run the same test with the baseline JPEG or PNG under the same route and cache state. Select WebP only when the measured reduction and displayed quality satisfy the application requirement.
  7. Repeat the cold-load and direct-address tests on every supported browser class, then verify the resource survives project backup, deployment, and endpoint restart.

How do you verify the entire path?

Verification must prove hosting, transport, decoding, rendering, and lifecycle behavior. A visible image from cache proves only that the browser already possessed a usable copy.

  1. Start with a cold browser cache and open the Perspective view from the normal client network.
  2. Confirm that the component resolves to the intended host, deployment-assigned port, and resource path.
  3. Confirm that the request completes and returns the intended WebP file rather than a login page, fallback document, or missing-resource response.
  4. Confirm that the browser decodes the asset and displays alpha transparency correctly where used.
  5. Compare transferred size and completion timing against the equivalent JPEG or PNG.
  6. Restart or redeploy the resource-hosting path, repeat the cold load, and confirm that the component still resolves and renders the same file.

FAQ

Why does Ignition Perspective reject my WebP upload?

The built-in Image Management tool is the file-type gate and does not accept WebP in the described configuration. Use an accepted managed-image format, or expose the WebP through a blob-server module or webdev.

Why does WebP open directly but not appear in the Image component?

Compare the direct address with the component's resolved reference. A binding, relative path, host, or deployment-assigned port difference can send the component request to another resource even though the browser can decode the file.

Why does a smaller WebP file not make the page load faster?

Inspect the request waterfall: scripts, styles, initialization, latency, or another resource may control visible load time. Compare cold-cache WebP and JPEG or PNG requests on the same client and route.

Why does WebP work once and fail after deployment or restart?

The alternate hosting endpoint may not share the project's deployment and backup lifecycle. Restart the hosting path, clear the browser cache, reload the normal Perspective view, and verify the final request resolves to the intended WebP file and renders successfully.

Back to blog