The Death of Pixels


Back in 1998, when i was 12 years old playing Prince of Persia on my first PC(wow this was released in 1989, not sure why everyone was still playing it in Egypt in the late nineties), a normal screen resolution was 640×480 pixels on a 14 or 15 inch screen, back then you can actually see the different pixels forming the characters on your screen. Now it’s 2013, and you can cramp up 2048×1536 pixel in a 10″ iPad.

Web graphics have rather progressed slowly in terms of adopting the new resolutions, first the focus was to make use of the PNG format with its transparency capability in favor of the JPG and GIF extensions, the move to a vector format like SVG was very slow. Although SVG is now supported in all major web browsers, even in one or two versions behind, the adaption rate is not as we hoped to be. Engineers are using high resolutions PNGs instead and relying on the browser to scale them down for lower resolutions screen, even Google is doing this on the search homepage. I had a couple of hours to kill today so I though of converting a few graphic elements on the ill-maintained Cairo Cubicles to SVG. Everything was pretty straightforward, opened all the graphics on AI, did the conversion seamlessly to SVG for the logo and the first two sliders and here is the result.


Homepage with SVG Logo

Homepage with PNG Logo

Graphics are crystal clear on the iPad, my Firefox and IE, which both scale all graphics to 125% in size. Bitmaps are meant for photos, avoid using them in your website going forward, and rely only on SVG + CSS3 + HTML5, the website will look much sharper on all devices and resolutions. There are some pitfalls though, SVG support is not the same in all browsers, you might face problems with blending modes support when exporting from Adobe Illustrator, but you probably won’t be facing these issues unless your graphic is a bit complex.

On a completely irrelevant note, Prince Persia port Apple port is available on github, this is a sample, all written in assembly, aren’t we so spoiled these days with the drag-n-drop IDEs.