Why does this image upscale from its original size? - wpf

Question

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:
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.

Answer 1

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)
HOWEVER save this copy pasted from clipboard and it should report as null DPI and have a size of 0.5644 x 0.5644 cm; 0.22 x 0.22 inches!!
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 !
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