Lessons in Optimization from a Digital Gorilla

If you’re old enough to remember the dark, noisy video arcades of the 1980s (or enough of a nostalgia geek to understand them), you’ve inadvertently soaked up a few tidbits about internet graphics. As it turns out, your parents were wrong about those hours spent feeding quarters and mashing buttons: they actually taught you something that’s relevant to your professional life!

During the heyday of Pac-Man, Asteroids, Centipede and the like, arcade cabinets used two fundamentally different styles of graphics rendering: pixel-based and vector-based. The pixel method, typified by large “building blocks” of flat color, was more colorful and eccentric. Vectors, searing bands of light with a stylish neon glow, could draw cleaner, more complicated shapes by merely connecting two points on a monitor. As time passed, the dueling methods enjoyed waxes and wanes in popularity. The ‘70s were largely a vector playground, with smash hits like Tempest, Star Wars and Battle Zone. The ‘80s and early ‘90s were dominated by the pixel: household names like Dig Dug, Gauntlet and Street Fighter II. With the arrival of more powerful hardware and the advent of polygon-based rendering, the two techniques converged. Vectors were tasked with handling the shapes, while pixels provided their textures.

We’ve seen a similar story unfold in the landscape of internet graphics. In this case, pixel-based visuals go under a different name (rasters), but the root concept is very much the same. On your website, the pixel-driven approach of a raster image is far more appropriate for delivering photorealism and texture, but is also less precise. Vector graphics, on the flip side, make an unparalleled choice for strict, tidy lines and shapes, but struggle to translate the subtle color interactions of a photograph.

For rendering logos, icons, illustrations, graphs or charts, vectors don’t just offer better clarity, they also scale without losing quality and allow for some very unique animations and interactions. Their file sizes are significantly smaller, a big plus for mobile users on limited data plans, and they’re naturally pre-formatted to look fantastic at any resolution. That means they’ll stay razor-sharp and beautiful, no matter how many pixels Apple and Samsung decide to pack into the next wave of handsets. The use of vector graphics on the web is still a relatively new technique, but it’s supported by all modern browsers and can really do wonders for your site, both behind the scenes and on the front lines.

Several recent advances have been provided for raster graphics, too, also meant to address mobile users’ bandwidth concerns, but some bloat simply can’t be avoided. Raster file sizes typically grow quite heavy, especially at large proportions, but there’s really no substitute for a striking photo when it comes to setting a mood or selling a product. There are just some circumstances that demand the power of the almighty pixel, and that’s a good thing.

The truth we’ve seen in the gaming industry also applies here: used in conjunction, both techniques can be powerful. While the use of rasters for photography and texture will never disappear from the web, the occasional vector substitution can greatly ease the download strain of a large footprint while also adding several serious benefits. So, the next time you’re gathering graphics for your web team, bear these essential format differences in mind: photos should follow Frogger’s lead and go raster (jpeg, png or gif), while logos and line art, like Asteroids, are much better off as vectors (svg, pdf or ai). It’s your safest bet to nailing a high score.