<p><a href="https://i.sstatic.net/bE0In.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/bE0In.png" alt="source: wikipedia"></a></p>

<p>download: <a href="https://upload.wikimedia.org/wikipedia/commons/5/57/Subpixel-rendering-RGB.png" rel="nofollow noreferrer">https://upload.wikimedia.org/wikipedia/commons/5/57/Subpixel-rendering-RGB.png</a></p>

<p>The  above picture is an example for sub pixel rendering. I tried resizing the image to very small size in editor by saving it onto my local machine. As I resize the image, group of pixels (sometimes all of them) turn either into Red, Green or Blue.</p>

<p>When all 3 diodes(RGB) in a single pixel emits light, to human visual perception it produces White(1,1,1). What happens when i try to reduce the image size? How does one of the RGB color becomes dominant over the other, emitting colors other than white?</p>

<p><a href="https://i.sstatic.net/2oQfu.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/2oQfu.jpg" alt="enter image description here"></a></p>

<p>Device used: Macbook Pro 15" 2018</p>

<p>My assumption on this is considering single pixel block which has three RGB sub pixels. 
<a href="https://i.sstatic.net/0JU2p.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/0JU2p.jpg" alt="enter image description here"></a></p>

<p>While resizing(upto its limit) the above pixel block(1x1) sits onto either one of the three sub pixel in my physical device screen(3x3 since image size is reduced) which could emit only one color. Thus any of the 3 colors become prevalent based on where the one pixel block in the image above is placed on one of the 3 subpixels of one pixel block in my physical machine.</p>

<p>I am a newbie to computer graphics. Any clarification or brief explanation on why this happens is much appreciated.</p>

<p>Update: @Olivier I resized the image using mousepad(Zoom out using two finger pinch) on Preview app in mac</p>

CC BY-SA 4.0
2019-06-18T08:33:36.007Z
Are you saying that you simply took an 'instructional' image which portrays a highly magnified view of an LCD screen showing text when subpixel rendering is is used, and then simply downsized that 'instructional image' in an image editor?  That's unlikely to achieve anything useful.  Unfortunately, I don't have time at the moment to give an explanation but, if no one else answers, I'll try to add a reply later today or early tomorrow.
Simon F
CC BY-SA 4.0
2019-06-18T13:43:00.960Z
What did you do use to resize the image? You will get very different results depending on the tool (algorithm) used. It looks like there is a slight rotation too. Which would account for the various colors, most likely generated by aliasing.
Olivier
CC BY-SA 4.0
2019-06-21T04:16:16.787Z
Sub pixel images like these only work at one scale so they are 1:1 aligned with the RGB elements of your display. If you want to rescale them you will need to convert the image back to greyscale, scale it, and then convert back to RGB subpixels.
PaulHK
<color><pixel-graphics><pixel-shader><pixels><subpixel-rendering>
Sub pixel rendered white text on black background changes color when resized to a very small size
Mohamed Sharbudeen
# Sub pixel rendered white text on black background changes color when resized to a very small size

(Asked by: username_0 on 2019-06-17)

[![source: wikipedia](https://i.sstatic.net/bE0In.png)](https://i.sstatic.net/bE0In.png)

download: <https://upload.wikimedia.org/wikipedia/commons/5/57/Subpixel-rendering-RGB.png>

The above picture is an example for sub pixel rendering. I tried resizing the image to very small size in editor by saving it onto my local machine. As I resize the image, group of pixels (sometimes all of them) turn either into Red, Green or Blue.

When all 3 diodes(RGB) in a single pixel emits light, to human visual perception it produces White(1,1,1). What happens when i try to reduce the image size? How does one of the RGB color becomes dominant over the other, emitting colors other than white?

[![enter image description here](https://i.sstatic.net/2oQfu.jpg)](https://i.sstatic.net/2oQfu.jpg)

Device used: Macbook Pro 15" 2018

My assumption on this is considering single pixel block which has three RGB sub pixels.
[![enter image description here](https://i.sstatic.net/0JU2p.jpg)](https://i.sstatic.net/0JU2p.jpg)

While resizing(upto its limit) the above pixel block(1x1) sits onto either one of the three sub pixel in my physical device screen(3x3 since image size is reduced) which could emit only one color. Thus any of the 3 colors become prevalent based on where the one pixel block in the image above is placed on one of the 3 subpixels of one pixel block in my physical machine.

I am a newbie to computer graphics. Any clarification or brief explanation on why this happens is much appreciated.

Update: @username_2 I resized the image using mousepad(Zoom out using two finger pinch) on Preview app in mac

**Tags:** color, pixel-graphics, pixel-shader, pixels, subpixel-rendering

> **Comments:**
> **username_1**: Are you saying that you simply took an 'instructional' image which portrays a highly magnified view of an LCD screen showing text when subpixel rendering is is used, and then simply downsized that 'instructional image' in an image editor?  That's unlikely to achieve anything useful.  Unfortunately, I don't have time at the moment to give an explanation but, if no one else answers, I'll try to add a reply later today or early tomorrow.  
> **username_2**: What did you do use to resize the image? You will get very different results depending on the tool (algorithm) used. It looks like there is a slight rotation too. Which would account for the various colors, most likely generated by aliasing.  
> **username_3**: Sub pixel images like these only work at one scale so they are 1:1 aligned with the RGB elements of your display. If you want to rescale them you will need to convert the image back to greyscale, scale it, and then convert back to RGB subpixels.  

---

## 0 answers

