Monochrome Vanity
Problem: Some time in the past 10 years, they started making high resolution computer displays, sometimes naming them after eye-parts for marketing reasons. On more expensive laptops and even on many newer mobile phones this website’s header image looked blurry because of the way operating systems and web browsers decided to present 72dpi bitmap images to people on displays with significantly more DPI.
Current Solution: Over the past few years, I attempted to fix this a few times but gave up after a few minutes because I couldn’t figure out an easy way to reproduce the original graphics in a high-resolution format that was also going to look okay at multiple sizes. Eventually I found a straightforward but time-consuming way to do it. Even though it’s just pixel art, I converted the header image into some scalable vector graphics by hand-writing the four MacPaint halftone patterns as SVG patterns, then hand-retracing the boxes for each letter in the image as paths, 3 times because there are multiple screen size presets in a single sprite – even though they come from a font – and then filling the boxes with the appropriate pattern. I also had to repeat this process twice because the first time, when using GIMP to convert selections to paths, it tried to smooth out the boxes into less rectangular shapes. My solution to that was to scale the original pixel art up by 400% before drawing the boxes which then resulted in the current trace. I then adjusted a few parameters in the SVG so that the final result could function as a drop-in replacement for the PNG, and that’s what exists now.