How your web browser affects your online reality, explained in one image

Tired of being told you should update your browser? Allow this art lesson to illustrate why you should.

If you’ve ever seen ASCII art — those popular computer pictures formed from text and symbols on your keyboard — then you’ve seen how computer code can be used to create art. Believe it or not, we’ve come so far in the way that sophisticated computer languages can interpret commands that we can now use them to create stunning illustrations — like the ones developer Diana A. Smith creates.

Using only code and style sheets (rules that tell a web page how to display your code), Smith has embarked on a computer art series wherein she creates gorgeous, rich illustrations where all the elements, rather than being drawn, are hand-typed. Here’s an example:

Pretty cool, right? But there’s a problem with creating art this way — and it’s a revealing one.

Recall that ASCII meme you retweeted. It doesn’t always look the same on phone as it does on your computer. That’s because different browsers on different devices display Twitter in different ways. The same holds true for digital artwork like Smith’s.

The art shown above displays best in the latest version of Chrome, but if you don’t have the latest version of Chrome, it might look surprisingly different. I’ve screencapped and embedded it as an image file above, so it will display the same no matter what browser you’re using, but if it were Smith’s original image, it would render differently depending on your browser.

Smith’s most recent project demonstrates just how drastic the differences can be. Meet Francine:

Francine is an illustration done in the style of a Renaissance portrait — but in its original state, it’s not an image file — you can’t right-click and save it to your desktop like you would a normal image on the internet. Instead, everything you see is hand-coded, created using the Chrome browser’s developer tools. In your own browser, you can actually view the code used to create the effects shown here. Each element of the painting gets its own section of the code layout.

When you drill down even further by looking at the CSS code (the style sheet), you can see how the painting emerges from meticulous detailed patterning using display commands you can code into a regular Chrome browser:

As noted tech blogger Andy Baio pointed out on Twitter, you can peel back the elements over the illustration itself and see how they work:

Smith’s art is a stunning achievement, featuring layers and layers of intricate code that must have taken untold hours to lay out and piece together by hand. But there’s a catch to this kind of art creation — and because we live in a word full of choice when it comes to computers, it’s a big one.

Browser variance turns Francine into modern art — and nightmare fuel.

As Smith was quick to note in her GitHub repository for the piece, this illustration was designed specifically with Chrome tools, meaning it was made to be viewed in the Chrome browser. As Vox engineer David Zhou soon learned, trying to view it with other browsers — in this case, an older iteration of Opera — produced, er, a slightly different image.

In fact, many people began putting Francine to the test, trying to see how she would display in older browsers. Here’s how she looks in Internet Explorer 7, as seen on a computer running Windows ’98. In other words, if you’d tried to view this on an old Microsoft browser, using a decades-old operating system, you’d have gotten this:

Jamie Farrelly/GitHub

If you try to view it on even older browsers, the results get even weirder. Another Vox product team member, Guillermo Esteves, viewed Francine on multiple browsers and shared the results with us. Here’s how Francine looks on versions of IE from 6.0 all the way up to 11.0, as viewed on a computer running Windows 7:

How do you go from something that looks like it could reasonably be an actual Renaissance painting to something that looks like a glitchy computerized example of De Stijl, all without changing the code? The answer is that browsers all interpret code differently. When older browsers with a limited ability to interpret newer coding languages meet commands they don’t understand, the results can get extremely distorted.

And it’s not just Microsoft browsers that have this level of distortion. Here’s Francine on Chrome 9, where she looks a bit like a Fauvist trying to draw Mrs. Potato Head.

On this older version of Opera, some elements work and others... don’t.

Perhaps the most abstract of all is this view of the piece on IE 5.1.7 as seen from a Mac:

Baio’s Twitter thread on the differences in the piece rapidly turned into viewers having a field day with browser variance, and delighting in their ability to manipulate the image.

Some viewers, however, noted that certain browsers, like Mosaic, the precursor to Firefox, couldn’t display the picture at all.

The moral: Reality bytes

All of this adds up to a message that, while simple, isn’t always this easily perceptible: Reality, as filtered through the internet, can look very different depending on which version of the internet you’re using.

In a cultural moment where reality distortion is rampant, and it’s hard to get a consistent version of facts from person to person, it’s critical to understand that something as basic as a browser update, or switching from one browser to another, can drastically change the way we perceive information. And it’s probably easier to understand the power of the internet as a tool if you’re using a newer browser capable of interpreting more powerful programming languages.

Fortunately for Francine, most internet users are currently viewing her on newer versions of Chrome, as she was intended to be seen. But if you’re one of the roughly 42 percent of users out there who are still clinging to an outdated version of your browser of choice, let this be a lesson to you: software updates don’t just keep you safe from viruses, malware, and the ridicule of your peers. They can, quite literally, change your perspective.

Will you support Vox today?

We believe that everyone deserves to understand the world that they live in. That kind of knowledge helps create better citizens, neighbors, friends, parents, and stewards of this planet. Producing deeply researched, explanatory journalism takes resources. You can support this mission by making a financial gift to Vox today. Will you join us?

One-Time Monthly Annual

$5/month

$10/month

$25/month

$50/month

Other

$

Yes, I'll give $5/month

Yes, I'll give $5/month

We accept credit card, Apple Pay, and Google Pay. You can also contribute via