Large Images pixelate in a small <Image> element

Question

Hello,

when I use a high quality image (lets say 1920x1080) as a source in a relatively small <Image> element (100x50) where Stretch="UniformToFill", the image kind of pixelates.

How can i avoid this issue? Let me add that the Image source is sometimes a local file and sometimes a URL. I've tried scaling the image, but I couldn't find a solution.

Johann

Answer 1

1920x1080 has a 1.83 ratio
100 x 50 has a 2 ratio.

If you match the ratios up I bet it will look a lot better.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

100x50 was just a sample. Sorry for this confusion. The ratios are exactly the same.

Answer 3

What are you doing to scale the photo?

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 4

I've tried something like this, but this is just making the image smaller. I am currently not using the Image.RenderTransform.

<Image Source="{Binding ImageUri}" Width="100" Stretch="Uniform">
	<Image.RenderTransform>
		<ScaleTransform ScaleX="0.3" ScaleY="0.3"></ScaleTransform>
	</Image.RenderTransform>
</Image>

Answer 5

I think you're going to need to find code that does an actual resize of the photo for display.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 6

Resizing an image can be done rapidly and with quality using WriteableBitmapEx.

Answer 7

That's what I feared. :/

Answer 8

Thank you for this link! I am going to try this package.

Answer 9

Found a perfect solution for me:

<Image Width="100" Height="100" Stretch="UniformToFill">
   <Image.Source>
      <BitmapImage DecodePixelWidth="100" UriSource="{Binding ImagePath}" />
   </Image.Source>
</Image>

Credit: http://www.geekchamp.com/forums/windows-8-development/resizing-an-image-without-losing-any-quality-in-windows-store-app#forum-post-386827 

The golden keyword is DecodePixelHeight

Answer 10

I'm glad to see you got a good solution. :-)

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.