The concept of retina or high density screens is not new to the mobile world. Almost all new mobile devices support this technology. High density simply means packing more pixels in per square inch of screen. The result is a crisper, sharper and great looking display. Sounds good but the bad news is, if your website is not optimized for high DPI screens it will look fuzzy, blurry, or even worse.
What is the fix?
In simple words, website graphics should be at least twice the size of actual to give better results on high resolution screens. For example, if the image is 400×400 pixels, it needs to be at least 800×800 pixels to look sharp on 2x display.
But doubling the pixels may result in increased file sizes, requiring more bandwidth, slower page load, more data eat-up on cellular networks and so on!
4k buzz – Another challenge
Up until now, high density display was only a concern for mobile devices but desktop products have started to follow the same trend since Apple introduced the MacBook Pro with retina display.
Above all, ultra-high definition (UHD) technology has already pushed into the market throught the television industry, multiplying pixels to four times higher than the high definition screens, posing even more challenges to the web community.
This is another debate – whether or not these screens would ever gain popularity among the masses due to industry limitations and high price tags, but if or when it becomes affordable to common people, your visitors would soon be looking at your website on 4k display.
Does that mean developers have to serve 4 times bigger versions of all graphics or risk their websites looking fuzzy and unprofessional on such screens? Not necessarily, we need to think smarter.
So what is really the fix?
The simple answer is resolution independent web. A web page is a combination of different elements including photographs, text, background images, buttons, icons and other stuff. As a general rule, the majority of the web page should be built using CSS, SVG and web fonts. Where you have to use photographs, image doubling and optimization techniques can be used with a mix of media queries. Each of these techniques is a subject of its own and requires standalone discussion to cover different aspects. Here I’ll only highlight the main points:
- Replace graphics with CSS3
CSS is a completely resolution independent and scalable solution. It displays crisp and smooth results, irrespective of any zoom level. CSS3 attributes can be used to create background patterns, transparency, gradients, box shadows, borders, shapes and transition effects without using any images. Most CSS3 effects are supported by modern browsers and where the support is limited, fall back techniques can be implemented to gracefully degrade user experience.
- Turn icons into web font
Icons play an important part in web design. Pixel based sprite sheets are neither scalable nor easy to maintain. On the other hand, fonts are infinitely scalable and can be easily customized as size, color, or shadow can be applied and have good browser support in general. Various tools are available to generate icon fonts like Fontastic, Fontello, IconVault or my favourite, Icomoon, which has a large collection of ready icons as well as the ability to import custom ones.
- Consider using SVGs
For graphics like patterns, logos, graphs, maps or other illustration based elements, we should consider using Scalable Vector Graphics (SVG). It is a vector technology therefore perfectly scalable at any zoom level without any distortion.
SVGs are easily editable and light weight, as long as the drawing is simple and doesn’t include crazy filter effects. SVG optimisation tools can also be used to further reduce the size. Surprisingly, the majority of browsers support SVGs and with the help of Modernizr or simple CSS techniques, PNG fallback solutions can be applied for non-supportive browsers.
What about photographs?
Photographs are important too for several reasons and the fact is that we cannot completely avoid them. Every website carry’s some sort of pictures to create a visually appealing impression for its users. Particularly for e-commerce websites, it is more than important for product display.
Naturally, we need bigger images for high density screens and you may not like to load large files for users of non-retina devices. The common practice is to create images twice the size of the original and serve larger images only on retina enabled devices with the help of display detection scripts and media queries – Picturefill is another solution.
Multiple versions of each image, isn’t that a pain?
Delivering different images to different devices requires creating and maintaining multiple versions of each image which can take a lot of time and effort. This would not be a problem if there were quite a few images but may become a pain where there are hundreds or thousands of photos – just think about big ecommerce stores.
How about serving big images to everyone?
Anyone would immediately think that would not work due to the need for extra bandwidth. But surprisingly, an experiment showed more pixels doesn’t necessarily mean more data. This sounds like multiple images can be avoided by saving highly compressed images in large dimensions for web.
Final words
The web community is facing more challenges due to the ever increasing resolution, and is constantly striving to find better ways to deal with all the pixel problems. There is no one solution to fix all of these problems. Depending on the nature of the project, a combination of techniques can be used to maximize resource independency. The deal is to find the best mix of methods within the given budget to optimize user experience on most devices. All it needs is careful planning, consideration and better design practices and we can serve equal quality web pages to all.