Do you know what makes it amazing or what makes it a nightmare for designers and developers? There are a few terms related to technology that has proved to be challenges and opportunities for web designers. Device pixel, Resolution, Pixel density, High DPI, all in one means High Definition Display.
The bottom line of all this is that Retina presents High Definition Display to the viewer. With the advent of the iPad’s Retina display revolutionized and caused massive chaos on web designs that had been “fine” for years.
Apple’s Retina display began a giant web design challenge for almost everyone on the web almost 10 years ago. I still find sites today that are not only Retina display unready, but they also are not mobile responsive. I think the creators of the site had a “set it and forget it mentality.” But nothing in the tech world works like that. Unless you are regularly updating your site to the latest developments in technology you will be left in the dustbin of history.
Retina displays make necessary the creation of graphics that will display sharp on the very enhanced screen resolution. The Retina display basically doubles the pixels, meaning every image must contain double the information necessary to display correctly on the upgraded technology.
The iPads initially, and now pretty much every display device sold on the market, have far more pixels and as a result, the display will be of a much higher quality and higher definition due to higher DPI. So as this relates to Retina, it is the same principle: the same display size, only more pixels, which means a high DPI (dots per inch) display. Because of retina displays, things are moving forward continuously and images are becoming clearer.
Most images, until the advent of Retina displays, were being made in 72DPI for standard displays. Now, Retina’s DPI is much greater and so these images would appear to be grainy or blurry if they are not adapted in their resolutions. As a result of this, you need to ensure that your images are optimized for high DPI devices. Retina Displays need twice the amount of pixels to display the same image as standard definition displays. This should help you to figure out why Retina-ready images are necessary and why it is important that your web developer and designer knows how to ensure that your site is optimized for them when they create your fully Responsive Website.
This works in an exact way that this example with only 50% heigh and width declarations. Different than Raster graphics which are bitmaps, vector images, or SVGs, have an immense advantage for all Retina Display website designs which is that they can scale up, down, and sideways and still look good. The way vectors are constructed is through geometrical primitives such as lines, points, shapes, or curves which are just mathematical expressions and this is what gives them the ability to scale without being distorted and looking blurry.
As you can see Retina Displays can be a nightmare to support; however, hope you chose to support it as high DPI displays are beautiful to look at, and supporting Retina allows for a much better experience for the people who use these devices.