A raster image becomes visibly blocky when its source pixels are spread across too many display pixels. In the reported Ignition 8.1 project, the selected image was only 121 × 125 pixels and was enlarged substantially in an Image component. The number that matters is the scaling ratio between that source size and the component’s rendered size.
Source Pixels and Display Size
Each raster pixel stores one color sample. Enlarging a 121 × 125 image cannot create real edge, line, or text detail that was absent from those samples. The renderer can only decide how to distribute the existing pixels across the larger component.
Calculate the horizontal and vertical scale factors before changing component properties:
Horizontal scale = rendered width / 121Vertical scale = rendered height / 125
For example, a rendered width of 605 pixels would spread each source pixel across approximately five display pixels horizontally: 605 / 121 = 5. This is sampling density, not component logic. Nearest-neighbor scaling exposes square pixels; smoothing blends adjacent pixels but still cannot restore missing detail.
| Quantity or limit | Meaning | Where to read it |
|---|---|---|
121 × 125 pixels |
Known dimensions of the small source image | Image file dimensions or image-management view |
| Rendered width and height | Display area receiving the source pixels | Image component bounds and runtime layout |
| Scale factor | Amount of raster enlargement on each axis | Divide rendered dimensions by source dimensions |
| Aspect ratio | Width-to-height relationship | Compare source and component ratios |
| Scaling behavior | Pixel replication or interpolation used during enlargement | Observed edge appearance and the relevant component/runtime settings |
Available Image Approaches
Three approaches address different failure modes. Source replacement solves insufficient pixel density. Component resizing avoids enlargement. A vector graphic removes the fixed-pixel grid for artwork that can be represented as paths.
| Approach | Best fit | Image-quality effect | Constraint |
|---|---|---|---|
| Use the larger copy of the raster image | Photographs or existing artwork with a higher-resolution original | Preserves more detail at the required component size | The chosen asset must actually contain more pixels, not merely have a larger canvas |
| Render near the raster’s native size | Layouts where a small icon is acceptable | Prevents obvious upscaling artifacts | The image occupies less screen area |
| Use vector artwork | Logos, symbols, line art, and simple shapes | Edges can remain sharp across display sizes | The import and rendering path must accept the vector format |
The recommended first action is to select the larger of the two apparently duplicate images and confirm its pixel dimensions. That directly addresses the observed use of a thumbnail-sized 121 × 125 asset. If no higher-resolution original exists, reduce the component size or recreate suitable line artwork as a true vector graphic.
Version-Dependent Scaling Appearance
Ignition’s default upscaling behavior changed somewhere in the 8.0 line: earlier rendering used a smoothing algorithm, while the newer behavior uses nearest-neighbor scaling by default. Nearest neighbor favors deliberately pixelated assets, including built-in icons, because it keeps pixel boundaries hard. On a small photographic or antialiased image, those same hard boundaries make enlargement look coarse.
This explains why a comparable layout can appear smoother in 7.9.21 and visibly pixelated in 8.1. It does not mean the older renderer recovered additional source detail. Smoothing masks the pixel grid by interpolating colors; nearest neighbor makes the grid visible. At high enlargement ratios, both are limited by the original sample count.
A version comparison is meaningful only when the projects use the same binary asset, the same rendered dimensions, the same aspect-ratio behavior, and the same display scaling. Two thumbnails with similar content can point to different underlying files.
Source and Component Audit
- Open image management and identify every copy of the artwork. Record the pixel width and height of each file.
- Confirm which resource the Image component references. A matching thumbnail or name does not prove that the component uses the larger file.
- Read the component’s rendered width and height. Include layout expansion that may occur when the window or client changes size.
- Calculate both scale factors. Any value greater than
1means that axis is being enlarged. - Compare source and component aspect ratios. Unequal ratios indicate stretching or cropping in addition to upscaling.
- Inspect the original image at its native dimensions outside the component. If edges are already soft or text is already unreadable, scaling cannot correct the source.
Repeat the audit in 7.9.21 and 8.1 when diagnosing a version difference. Capture the actual source dimensions and component bounds rather than judging only from screenshots, since screenshot resizing adds another sampling step.
Recommended Replacement Procedure
- Choose the highest-resolution original that contains the required artwork. In this case, test the other apparent copy before editing scaling behavior.
- Replace the component’s current image reference with that resource.
- Set the component bounds to preserve the source aspect ratio. Use a fit behavior that avoids independent horizontal and vertical stretching.
- Render the image at or below its native pixel dimensions when practical. If the layout must enlarge it, use enough source pixels for the largest expected runtime size.
- For logos or simple symbols, obtain or recreate genuine vector artwork and test it through the project’s supported import path. Merely converting a low-resolution
.PNGinto a vector container does not reconstruct its missing edges. - Save the project and test the image in both Designer preview and the deployed client or session at the intended display size.
Changing interpolation can alter the character of the artifact, but it is secondary to selecting a suitable source. Use nearest neighbor for intentionally pixel-based artwork. Use smoothing, where the applicable rendering path exposes it, when blended enlargement is preferable to visible square pixels.
Verification and Recurring Pitfalls
Verify the fix with measurements and controlled visual checks. View the image at the intended runtime size and display scaling, then inspect diagonal edges, curves, thin lines, and embedded text. These features expose insufficient source density earlier than broad areas of color.
| Check | Pass condition | Failure direction |
|---|---|---|
| Resource identity | The component references the intended larger asset | Correct the image path or duplicate selection |
| Scale factor | The ratio is acceptable for the artwork and viewing distance | Increase source resolution or reduce rendered size |
| Aspect ratio | Source and display proportions match | Correct fit, crop, or component bounds |
| Designer versus runtime | Both render acceptably at equal dimensions | Record the view, layout, display scaling, and runtime context |
| Cross-version test | The same binary and bounds explain only an interpolation difference | Resolve asset or layout differences before blaming the version |
Common mistakes include selecting a thumbnail because its preview resembles the master image, enlarging an image through a responsive layout without checking its maximum size, and treating smoother interpolation as added resolution. Exporting an already pixelated raster at larger dimensions only increases the file dimensions; it does not add captured detail.
FAQ
Why does my Ignition 8.1 image look pixelated?
The Image component is enlarging a small raster source, and Ignition 8.1 uses nearest-neighbor upscaling by default in the reported case. A 121 × 125 source will show its pixel grid when rendered much larger.
Why does the same image look smoother in Ignition 7.9.21?
The default scaling behavior changed somewhere in the 8.0 line from smoothing to nearest neighbor. Confirm that both versions reference the identical binary image at identical rendered dimensions before comparing them.
Why does converting a PNG to vector not automatically sharpen it?
A container conversion can preserve the original raster pixels without tracing the underlying shapes. Sharp resizing requires genuine path-based artwork or a higher-resolution raster original.
When should I escalate an Ignition image-scaling problem?
Stop changing assets when the same binary image, identical component bounds, matching aspect ratio, and equal display scaling produce unexplained Designer-versus-runtime behavior. Record the Ignition version, image dimensions, component dimensions, project/view context, and comparison screenshots, then escalate through Inductive Automation’s official support channel.