As device and desktop resolutions continue to climb and pixel density continues to increase, we must consider a new way to store graphical data on the web.
Bitmaps Were Fine
Bitmaps are still the common choice, and with good reason. They have been suitable for years past, when most desktops were in 1024×768 resolution . But bitmaps are actually pretty large in file size compared to vector data, especially when you double their file size for retina devices. This is very bad for download speeds, considerably on devices that may experience a low bandwidth cellular connection at any given time.
Say you want to store a small 16×16 bitmap image — a favicon or something. No big deal, right? When you’re done and hit save, what is actually happening is that Photoshop is saving out each one of those 16×16 pixels (that’s 256 in all) and adds its own couple of bytes to an image file, each of the 256 pairs representing a color. Do the math and you’ll wind up with a pretty small file size in this case. In theory, it will be around 512bytes or 0.5 kb Microscopic.
Now what if you want to make that image 500×500? Well that’s 250,000 pixels, times two bytes per pixel — and we’ve jumped up to half a megabyte! Double that for retina. These images can take a few seconds on a bad connection, and it’s likely there are a dozen of them to download from one page.
Compression Isn’t Enough
Some brilliant developers have devised ways to compress bitmaps, making them quicker to download while sacrificing quality. It’s fantastic for certain usages. But this isn’t always a good option, since compression artifacts (what we call the ugly parts of a JPG or a 240p movie on YouTube) become much more apparent when adjacent to high resolution fonts and supporting vector graphics. The human brain is extremely good at recognizing patterns, and when something interrupts a pattern that we expect — such as an artifact — it becomes immediately obvious.
Choosing to Evolve
Scalar vector graphics (SVG) are the answer you’re looking for. Rather than a list of pixels, like the bitmaps, SVG gives a set of instructions to the computer, telling the computer about what geometry to draw. This is a significant storage reduction, and since they’re vectors, they can be scaled up or down infinitely without degradation or an increase to file size. The vectors render out perfectly crisp, without compression artifacts, no matter what the display size or pixel density. Even when printed, actually. Storing graphics in this method also allows us to animate and interact with vector graphics in real time, not frame by frame, as you would with a movie file, for example.
However, don’t be confused. SVG doesn’t store pixels. So it’s impractical to store photos as SVG. They would be much larger than JPGs, and would look bad scaled up or down. Things to consider storing as SVG include: logos, fonts, icons and geometrical shapes.