The beginnings of mass expansion
High-resolution screens, as well as many other technological innovations, were popularized by Apple in 2010 when they launched iPhone 4. In comparison with the former type of display, Retina introduced double pixel density without changing the size of the screen. Thus, the particular pixels are not distinguishable by the human eye, so the final image is much sharper and prettier. Following Apple, other technology companies (Samsung, HTC, etc.) and operating systems such as Android started using high-resolution displays on their devices.
Naturally, the arrival of a new display type brought about a separate operation system and all its elements have automatically optimized for it. However, this was not the case for the available apps and the Web. Apps and websites are composed of elements in vector form (such as fonts/texts and vector elements or edges, or color backgrounds), which do not need to be optimized (they remain sharp in any definition), and of bitmap elements (including image backgrounds, photographs, and image icons), which require optimization for high-resolution screens.
If you own or have ever used an iPad 3 or later, a new Macbook Pro, Sony Xperia Z, HTC One, or many other advanced devices you may have noticed that while browsing (primarily websites ending with “.sk”, but also international ones), many elements do not appear as sharp as texts. One example is readily available; just take a look at the logo and all graphic elements of the most read Slovak internet newspaper at sme.sk. In comparison, our new website (the one you are currently reading), is optimized to remain sharp, including all animations.
Ways of optimizing
There are several different ways to optimize for high-resolution screens; from creating the graphic design in double resolution from the start, or designing all necessary elements in vector form. When wrapping a website (preparing the code and saving graphic elements), the simplest solution, although an entirely inappropriate one, is to save all elements in double resolution and down their dimensions by half when they are used. Although this really brings optimal results for high-resolution screens, it also uses unnecessarily large elements for standard resolution, which has a negative impact on data transfer between the server and the device, as well as the performance of more simple devices, the hardware of which is not adapted to such large images.
Another way to optimize the website is to use vector formats, such as SVG. These can be used to create simple graphic elements such as icons or drawn images. The downside is the weak support of older search engines, as well as the fact that not all images can be stored in vector format (such as photographs or various textures). A different approach to this technique is storing the necessary element and icons directly into the used font (which is, in nature, a set of vector characters).
An ideal way, which we also use the most, is storing all the necessary bitmap images in two versions – one for standard, and the other one for high resolution. Then, we apply a combined approach and prepare a special CSS for background images (using the so-called CSS media queries), and swap the images directly in the HTML code using JavaScript. Thus, the optimized images are read only by suitable devices.
No need to hesitate
The number of new mobile phones and tablets, but also notebooks and desktop computers that use high-resolution displays keeps growing. Therefore, there is no need to hesitate. If you are planning to launch a new website or update your old one, we would be happy to design and program it from footer to header. Although our approach is different with every project, optimization costs should not be higher than 10% of the cost for wrapping the design in HTML/CSS.
