locked
Large Images pixelate in a small <Image> element RRS feed

  • 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

    Monday, November 11, 2013 10:38 AM

Answers

All replies

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

    Monday, November 11, 2013 8:18 PM
    Moderator
  • 100x50 was just a sample. Sorry for this confusion. The ratios are exactly the same.
    Tuesday, November 12, 2013 10:44 AM
  • 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.

    Tuesday, November 12, 2013 2:46 PM
    Moderator
  • 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>

    Wednesday, November 13, 2013 7:18 AM
  • 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.

    Wednesday, November 13, 2013 2:54 PM
    Moderator
  • Resizing an image can be done rapidly and with quality using WriteableBitmapEx.
    Wednesday, November 13, 2013 3:48 PM
  • That's what I feared. :/
    Wednesday, November 13, 2013 4:08 PM
  • Thank you for this link! I am going to try this package.
    Wednesday, November 13, 2013 4:10 PM
  • 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



    Sunday, November 17, 2013 12:25 AM
  • 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.

    Tuesday, November 19, 2013 3:59 PM
    Moderator