Subpixel Rendering for images
Date: Message-Id: https://www.5snb.club/posts/2023/subpixel-rendering-for-images/
Subpixel rendering is typically used for text to give your monitor an effectively higher resolution. It works by making use of the fact that your monitor has 3 subpixels for every pixel that each light up, and so a red line will appear physically to the left than a blue line.
But what if we used it for not text instead? Such as images.
Here is the 300x300 image (taken from https://www.pickpik.com/apartment-architecture-building-corporate-glass-high-rise-131995).
And then a downscaled version (cubic interpolation)
And finally, a subpixel version.
If you’re on mobile where 1 image pixel won’t be 1 screen pixel, this probably doesn’t look great. Also, this assumes a RGB subpixel layout, which is true for my monitor, and seems to be the most common, but might not be true for you.
Do I think this is useful? No. It only looks decent for grayscale images. But it’s possible, and Kinda Works.
Here, I added a tool to do this. It will work best on images with a multiple of 3 size in both directions, and is grayscale. But it’s up to you to if you want to try it on others. Also, opacity will be ignored, and just set to 255.