Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 

Pixilazation, distortion with clean properly sized image

I have an image that looks great on my computer but when I view it on Roku(Ultra and Roku 3) it looks pixilated. I have also observed the same thing a few different TVs. The image is used for a Button. The button size set in my Roku project is 75x75px. I have tried using an image that is the exact size, 1000x1000px and 3000x3000px. I have had the same results with all of these sizes. I have tried using png with an empty background, png with background and jpg, all have given me the same result. 

The pixilazation does not look even, it reminds me of tiny solar flares. 

Bellow, I have included my image and a screenshot of how it looks on screen.




This is my code for my button.
<Button
   id="searchButton"       
    iconUri= " "
    focusedIconUri=" "
    focusBitmapUri="pkg:/images/search2j.jpg"
    focusFootprintBitmapUri="pkg:/images/searchj.jpg"
    showFocusFootprint = "true"
   translation="[40, 40]"
   minWidth="75"
   height="75"
   visible = "false"
/>


Everything about the button is working fine. I would just like to get rid of the distortion. 

Thank you for taking the time to read this. Any help you could offer would be very appreciated.
0 Kudos
3 Replies
squirreltown
Level 8

Re: Pixilazation, distortion with clean properly sized image

I think that's what 75 pixels looks like. That's not many pixels.
Kinetics Screensavers
0 Kudos
Komag
Level 9

Re: Pixilazation, distortion with clean properly sized image

I too think it looks correct. If you really want to control the look of such a thing, I imagine it would help to make the exact right size graphic, 75x75 pixels, and control the foreground/background blending with some proper anti-aliasing
0 Kudos
cocotower
Level 9

Re: Pixilazation, distortion with clean properly sized image

Let Roku resize it:
Make sure the 1000p original image has at least 256 colors or is in JPEG format and I think the Roku should size it down without pixelation.

Resize it using your computer:
An image properly sized down from 1000p to 75p needs to retain the same or near color depth.  You cannot do anti-aliasing and edge smoothing in just 2 colors (black and white).  A resizing algorithm on a black and white image typically produces shades of gray where they are needed.  You then have to show the new image (75p) at the same size on the end device or it's going to be distorted in various ways.  Use paint.net or LView which should apply some good down-sizing algorithms.
0 Kudos