December 05, 2013 - Comments Off on Are bitmap images dead? Is the future bright for resolution independent images?

Are bitmap images dead? Is the future bright for resolution independent images?

In this ever evolving digital world are bitmap images dead?

Retina displays, mobiles, tablets, heck even watches, are now many peoples’ interface for the web. The uptake and variety of these devices has seen us re-evaluate pixels and how we use them.

Before we get ahead of ourselves, I’ll start with a quick explanation of what bitmap images are. A bitmap is an image which comprises of tiny dots called pixels. Each pixel contains a single colour. Individually these pixels don’t mean much, but when combined together in the correct manner, they form an image – a holiday snap, or that picture of your cat you just uploaded to Facebook.

We’ve pretty much been using bitmap images since the dawn of the internet, and only in the last few years have we even begun to think about replacing them, so what’s changed? Well… like most things on the internet, it’s largely Apple’s fault!

In June 2010 Apple released the iPhone 4 which added a new term to our digital vernacular, “Retina”. Since then Apple have also released MacBooks and iPads with retina displays and many other companies have followed suit with their own high PPI (pixel per inch) devices.

Sadly, for our friend the bitmap this is bad news as these new screens don’t display pixels at the 1:1 ratio we are used to. A 300px x 300px image now needs 3 or 4 times the number of pixels to make up the image while still appearing sharp. Unfortunately, without increasing the image by 3 or 4 times in size, bitmaps just don’t have the ability to do this.

So where do we go from here? For the web we have three main ways to go; SVGs, Icon Fonts and CSS.

SVG (Scalable Vector Graphic)

Unlike a bitmap, a vector image isn’t made of pixels. Instead it’s comprised of geometric primitives such as; points, lines and shapes (thanks Wikipedia!). The beauty of vector images is that due to their composition, they can be resized to any size and will still maintain 100% of the original quality.

SVG’s have been around since 1999. However, browser support for this file format hasn’t always been great (I’m looking at you IE). Thankfully this has been resolved and nowadays support is very good, with IE 9 and better, Chrome, Firefox, Opera and Safari all natively supporting.

These are a great option and their popularity is definitely growing with every day that is passing. For the best settings to export SVGs I would highly recommend that you take a look at Michaël Chaize‘s article.

Icon Fonts

For years typography on the web meant sticking to a small number of so called “web-safe fonts”. These fonts were almost guaranteed to be installed on the user’s device of choice, but it left designers and developers with very few options.

Thankfully things have moved on in the last few years and we now have the ability to embed custom fonts within a website. This means we can be far more creative, not just with our typography, but what we can use fonts for on the web.

Icon fonts are the modern day equivalent of Windings and we all love Wingdings. Windings is a font that contains icons rather than letters, numbers, ligatures etc. Well, icon fonts are sort of similar – we can create a font that contains our own symbols – a company logo, for example.

There are some limitations with this approach, the main one being that icon fonts can only be one flat colour, but with the recent huge uptake in flat design, this is providing to be a positive.

A great example of an icon font is Font Awesome. This is a font designed originally for use within the Bootstrap front-end framework and contains 369 icons in one file!

CSS

The final option we have is not to use images at all. Many shapes and effects can be created purely in CSS and whilst this might not always be the most practical solution for your company logo it should always be considered before including another image.

These are the three options we use. However, in a world that’s ever-changing, if an option is launched tomorrow that’s better than an SVG, we’ll be adaptive enough to change to use that. We’d be intrigued to know which options  you use?