Image by A. Redden
What if I told you that all of the images above are actually the same image? Would you think I meant they were different artists’ takes on the same image? Maybe the work of one artist replicating the same idea in different styles? Would you assume I’m pulling your leg?
This is no April Fool’s Day joke. All of those screenshots above are the exact same image, just displayed in different browsers. They are the work of Diana Smith, who uses CSS code to create digital portraits. Inspired by Flemish baroque oil paintings, she created “PureCSS Lace” (middle right image). Her other works include the almost Disney-esque renaissance “PureCSS Francine,” a series of early twentieth century ads like “PureCSS Zigario” and “PureCSS Vignes,” and the glowing “PureCSS Pink.”
Smith sets herself three rules when creating a portrait:
- All elements must be typed out by hand.
- Only Atom text editor and Chrome Developer Tools are allowed.
- No SVG allowed.
For those non-coders like myself, these rules translate to a simple idea: create the portrait only using CSS code.
Instead of using software like Adobe Dreamweaver that will do some of the coding for you, Smith chooses to write the code herself. She also avoids drawing images using SVG. SVG, or Scalable Vector Graphics, is a format for displaying simple images (like clipart or logos) online. Her art is exactly what she calls it: purely CSS code.
So why does the image change depending on your browser?
Web pages are made of two types of code. HTML (Hypertext Markup Language) is the foundation of the page. It’s used to create the content, such as the text. CSS (Cascade Styling Sheets) is used for the design of a page, including the layout and visual effects. It’s this visual code that Smith uses to create her intricate portraits.
But different browsers display code differently depending on how they’re created. Smith developed her portraits to be displayed in Chrome, so as long as your Chrome browser is up-to-date, it should look as Smith envisioned it. However, if your browser is out of date or you are using a different browser, things might get…well, weird. Or cubist. Or MS Paint-y.
As Samantha Cole of Vice notes, viewing Smith’s works in different versions of different browsers shows us just how far internet browsers have come. Even a browser from 2014 struggles to meet the demands of Smith’s artwork, reducing the detail and simplifying the design. Go back to a browser from the early 2000s and you get a completely unrecognizable image or no image at all.
What Does This Mean For Diana Smith’s Artwork?
Preserving Smith’s artwork may prove challenging. Unlike a jpeg image or an SVG file, you can’t simply right-click on the image and hit save. You can, however, take a screenshot or use the Snipping Tool in Windows to capture these images, but doing so does not fully preserve the art since it fails to capture the code. And eventually, Chrome and other browsers will advance beyond today’s capabilities. Eventually, Smith’s art may be relegated to the Internet Archive.
Regardless, as Vox’s Aja Romano observes, “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.”
It’s both amazing and alarming to think that something as simple as our browser choice can affect our worldview, but if we consider how much information we take in from the internet, we begin to realize that all these small discrepancies can add up. It’s just another remarkable way that technology is impacting us as much as we impact it.
So, long story short…update your browser, folks. You may not know what you’re missing.
You can find more of Diana Smith’s artwork on her website, diana-adrianne.com.
Does your business need a website? Or does your website need a redesign? Contact TracSoft about our web design services. We’ve created stunning, interactive websites for businesses large and small, and we place a special emphasis on cybersecurity and future-proofing the sites we build so that your investment lasts. You can view examples of our work here.
Is your website secure? When your customers make purchases or exchange information, does your website protect them? If not, make an appointment to speak to one of the security experts at TracSoft to learn how we can help protect you and your customers from security breaches, data loss, and identity theft.
