Search code examples
wpfimageimage-resizing

Why does this image upscale from its original size?

I am having an issue with an image scaling up slightly, seemingly without explanation. The image is a 16x16 png icon but seems to be scaling slightly larger to roughly 21x21. In my application there are a dozen or so buttons on a toolbar with 16x16 png icons in them but one of them scales up so said button ends up larger than all the rest. The image in question is CollapseAll_16x.png from the Visual Studio 2019 Image Library which can be downloaded from Microsoft's website. The rest of the images are all either from the library as well or custom 16x16 images I've designed. The CollapseAll image has not been altered in any way and is the only image that is affected by this.

Below is some simplified code that shows the issue I'm describing. All images are from the VS2019 Image Library. Borders and ActualWidth added for reference. The toolbar and button set up is irrelevant to the issue as it is still happening in this example stripped-down to just the images in a stackpanel.

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <StackPanel.Resources>
            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="Black"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
            </Style>
        </StackPanel.Resources>
        <Border>
            <Image x:Name="collapseAll" Source="Icons/CollapseAll_16x.png"/>
        </Border>
        <Border>
            <Image x:Name="zoomIn" Source="Icons/ZoomIn_16x.png"/>
        </Border>
        <Border>
            <Image x:Name="zoomOut" Source="Icons/ZoomOut_16x.png"/>
        </Border>
        <Border>
            <Image x:Name="popOut" Source="Icons/PopOut_16x.png"/>
        </Border>
        <Border>
            <Image x:Name="close" Source="Icons/Close_16x.png"/>
        </Border>
    </StackPanel>
    <TextBlock Text="{Binding ActualWidth, ElementName=collapseAll}"/>
    <TextBlock Text="{Binding ActualWidth, ElementName=zoomIn}"/>
    <TextBlock Text="{Binding ActualWidth, ElementName=zoomOut}"/>
    <TextBlock Text="{Binding ActualWidth, ElementName=popOut}"/>
    <TextBlock Text="{Binding ActualWidth, ElementName=close}"/>
</StackPanel>

This is the result:

scaling issue

I am able to prevent this unwanted scaling by adding MaxWidth=16 and/or MaxHeight=16 to the collapseAll image element. In that case all the images display the same.

So my question isn't so much how to fix this but, rather, why this particular image refuses to display at its original size.

Solution

  • PNG images are usually set to a default density of 96ppi to match traditional screen pixels per inch at nominal 96 DPI

    Most PNGs thus contain such flags for applications to recognise and use if they use a default value. So the "Zoomin" Etc have such a marker. (0.17 inches square)

    enter image description here

    HOWEVER save this copy pasted from clipboard enter image description here and it should report as null DPI and have a size of 0.5644 x 0.5644 cm; 0.22 x 0.22 inches!!
    enter image description here

    A common alternative is PDF or Jpeg default resolution of 72 pixels per inch which is 1.33% larger. And that CollapseAll icon has such a marker. (0.22 inches square) So it is "displaying" at its natural scale !

    enter image description here

    So unless ppi or DPI is defined one will be larger in the ratio of 3:4 pixels per inch. (75% or 133.3%)

    there are 29 such files

    AddPackage_16x.png             BackgroundWorker_16x.png
CallFrom_16x.png               Close_12x_16x.png
CloudDownload_16x.png          CloudUpload_16x.png
CollapseAll_16x.png            CPPMarkupXML_16x.png
DatabaseSchema_16x.png         DeleteAllRows_16x.png
ExpandAll_16x.png              ExtractConstant_16x.png
LayerMask_16x.png              LinesToFile_16x.png
OpenProject_16x.png            Output_16x.png
RFile_16x.png                  RInteractiveWindow_16x.png
R_16x.png                      R_ProjectSENode_16x.png
ShowCallersGraph_16x.png       SortAscending_16x.png
SortDescendingFilter_16x.png   StatusSuppressed_16x.png
StatusUpdate_16x.png           SyncArrow_inverse_16x.png
Synchronize_16x.png            Synchronize_grey_16x.png
ToggleButton_16x.png           
              29 File(s)         10,420 bytes