Image interpolation

When displaying images in Avalonia, particularly when scaling them to sizes different from their native resolution, the quality of the rendering depends on the interpolation mode being used. This guide explains how to control image interpolation in your Avalonia applications.

Default behavior

As of Avalonia 11, the default interpolation mode is set to LowQuality. This setting prioritizes performance but may result in less smooth image rendering when scaling images, particularly when displaying them at sizes significantly smaller than their original dimensions.

Interpolation modes

Avalonia supports the following bitmap interpolation modes:

Mode	Description
None	No interpolation. Pixels are rendered without smoothing
LowQuality	Basic interpolation (default). Prioritizes performance
MediumQuality	Balanced interpolation between speed and quality
HighQuality	Smooth interpolation. Best for downsizing images

Setting the interpolation mode

Per-control setting

You can set the interpolation mode on individual controls using the RenderOptions.BitmapInterpolationMode attached property:

<Image Source="assets/myimage.png" 
       RenderOptions.BitmapInterpolationMode="HighQuality" />

This can also be applied to containers:

<Border RenderOptions.BitmapInterpolationMode="HighQuality">
    <Image Source="assets/myimage.png" />
</Border>

Common use cases

1. Icon Display: When displaying icons that are being scaled down, using HighQuality interpolation can prevent jagged edges:

<Button>
    <Image Source="assets/icon.png" 
           Width="16" 
           Height="16"
           RenderOptions.BitmapInterpolationMode="HighQuality" />
</Button>

2. Image Galleries: For image galleries where quality is important:

<ItemsControl RenderOptions.BitmapInterpolationMode="HighQuality">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding ImagePath}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Edge mode (antialiasing)

Avalonia applies antialiasing to images by default, producing smooth edges when an image is rotated, scaled, or positioned at sub-pixel offsets. This is controlled by the RenderOptions.EdgeMode attached property.

To force aliased (sharp, pixelated) edges on a specific control, set EdgeMode to Aliased:

<!-- Smooth edges (default) -->
<Image Source="assets/photo.png"
       RenderTransform="rotate(15)" />

<!-- Aliased edges (no antialiasing) -->
<Image Source="assets/sprite.png"
       RenderOptions.EdgeMode="Aliased"
       RenderTransform="rotate(15)" />

Mode	Description
Unspecified	The renderer uses its default behavior (antialiased).
Aliased	Disables antialiasing. Useful for pixel art or when you need crisp, non-smoothed edges.

EdgeMode also affects non-image rendering (shapes, borders). It can be set on a parent element to apply to all children:

<Border RenderOptions.EdgeMode="Aliased">
    <!-- All content inside renders without antialiasing -->
</Border>

Performance considerations

The interpolation mode is set per-control by design for performance reasons. Higher quality interpolation requires more computational resources, so consider these guidelines:

• Use HighQuality for:
  • Important UI elements like logos
  • Scaled-down images where quality is crucial
  • Photo galleries or image-focused interfaces
• Use default LowQuality for:
  • Background images
  • Decorative elements where quality is less critical
  • Performance-sensitive applications

Creating a global setting

While Avalonia doesn't provide a built-in way to set a global interpolation mode, you can create a custom attached property or behavior to manage this across your application. Here's an example approach:

public static class GlobalImageOptions
{
    public static readonly AttachedProperty<BitmapInterpolationMode> InterpolationModeProperty =
        AvaloniaProperty.RegisterAttached<Image, BitmapInterpolationMode>(
            "InterpolationMode",
            typeof(GlobalImageOptions),
            defaultValue: BitmapInterpolationMode.HighQuality);

    public static void SetInterpolationMode(Image image, BitmapInterpolationMode value)
    {
        image.SetValue(RenderOptions.BitmapInterpolationModeProperty, value);
    }
}

Then in your XAML:

<Style Selector="Image">
    <Setter Property="(local:GlobalImageOptions.InterpolationMode)"
            Value="HighQuality" />
</Style>

Tips for best results

1. Asset preparation:

   • Provide images at appropriate resolutions for their intended display size
   • Consider including multiple resolutions for important assets
   • Use vector formats (SVG) when possible for resolution-independent graphics

2. Layout considerations:

   • Be mindful of the original image dimensions versus display size
   • Use appropriate containers and layout panels to manage image scaling
   • Consider using UniformToFill or Uniform stretch modes with high-quality interpolation

3. Testing:

   • Test image rendering on different screen densities
   • Verify performance impact when using high-quality interpolation on many images
   • Check memory usage with different interpolation settings

See also

• Text Options: Text rendering quality options via TextOptions.