msmetko's blog
msmetko's blog A healthy dose of Dunning-Kruger
Back to main page Pixelizing my new favicon<br>AI generated images are not what they seem<br>python<br>optimization<br>image-processing
2026-05-10
1Recently, I had a need for a new icon, to be used as a favicon and a profile pic for sites where I don’t need to be professional. I had a simple set of constraints:<br>Since my nick is incognito in most places that matter, I wanted the icon to be a fedora and glasses<br>It should be pixel art<br>The color palette should be red.<br>Naturally, given my (lack of)2 art skills, I turned to Gemini for help: The result of me prompting the diffusion model with pretty much what’s above Nano Banana 2 Pro pretty much oneshotted what I wanted, and I was happy3 with my pixel art image… until I downloaded the image: The image I directly downloaded from the Gemini web interface. I couldn’t believe it, either.<br>While it looks fine at a first glance, on a closer look, this particular image has several drawbacks:<br>While a human could pick a few different shades of red and call it a day, it’s actually dozens. Thousands, even. You can see it most easily if you focus really hard on large patches of color. You’ll notice it’s not actually the same color, but incredibly similar shades of red. Wiping the screen does not help, I tried it.<br>For the detail oriented, you’ll see that some pixels are not aligned with the checkerboard pattern, but rather by half: take for instance a closer look at the top right edge of the Hat. I tried painting it out manually, but honestly, it ruins the image :) so it should remain, but we should note that the pixels of the actual image are twice as dense, i.e. every image pixel is 2x2 square of actual pixels.<br>Speaking of translucency background: it’s not actually translucent :) open the image in a new tab and zoom – this was the model’s output. On one hand, impressive it can generate that background so regularly, on the other hand… it can do that but no support for translucency??<br>So no, this is not really a pixel art image… but it’s about to become one.<br>Taking a red PIL<br>That fact no. 3 is actually a dealbreaker for handling it with off-the-shelf software; I didn’t find a good image palette software that lets me pick transparency shades. So I decided to put my image processing degree to good use and roll my own :)<br>Basic facts about the image above so far:<br>2048x2048 pixels image, with a 50x50 checkerboard pattern of fake translucency.<br>This implies every square is 41x41… but wait! Fact no. 2 implies we should make the grid finer by a factor of 2, so every target pixel is actually 20.5x20.5 square of the original image pixels (and there are 100x100 of them). The .5 is mega inconvenient but we’ll work around it.<br>We should reduce the number of colors by grouping similar shades together. In the field of image processing this is popularly called color quantization, usually solved by clustering algorithms.<br>I want to introduce an actual translucency where the pixels are white and gray<br>We’re going to do the following:<br>Split the original image into virtual pixels<br>Calculate the color of all virtual pixels<br>Cluster the colors<br>Mark the white and gray clusters as translucent and assign the cluster centre for all points in respective clusters<br>That’s it, I should then write the 100x100px image to disk.<br>Around the inconvenience<br>So, for every 41x41 image square (Big Square) I have 4 “virtual” pixels of the resulting image (Smol Square). It’s not straightforward how to sample 20.5x20.5px Smol Square from the Big Square directly. Therefore I decided to kinda cheat a little bit: I’m going to sample 21x21 Smol Squares from every Big Square such that they share the middle row/column, and then I’ll average all the values inside. I rationalized this to myself by noticing that most Big Squares have a uniform color which is really similar to that of the pixel in the middle, and those Big Squares that don’t (eg top of hat), well one pixel won’t hurt anybody. I think. This is how Big Square pixelization looks like on a uniformly gray square:<br>Example of sampling 4 Smol Squares from a uniformly colored Big Square. Smol Squares are 21x21 pixels and they share the middle row and column. Near the edge of the Big Square, there are artifacts from the neighbouring Big Squares.<br>and this is an example of a Big Square where pixels cut in half (upper right corner of the fedora):<br>Big Square which was cut in half by the image generation model. The artifacts near the edges of the Big Square (and in this instance, four of the Smol Squares, too) are now more pronounced. You can totally see now how the colors are not uniform, but also, how sampling the edges introduces subtle errors.<br>Clustering time<br>Now that we have the 100x100 virtual pixels average, let’s see how they look like. It’s kinda hard to plot points in 3 dimensions...