Preparing Web Images and Icons For Full HD (1080p) Devices

Posted on July 2, 2013 by
singleimage

With recent release of full HD smartphones, device manufacturers have paved the way for a new standard in the display technology. While the Retina-capable iPhone 4S has given us a foretaste of high-resolution display; 1080p-capable Android devices finally make us realize how outdated and fuzzy normal web graphics are.

iOS users benefit from updates in a timely fashion, allowing browsers to display websites properly. By contrast, the rest of the tech world still undergoes painful and slow transition to high pixel density displays. With the lack of industry-wide standards in web developments, designers are left to make sure mobile users get the best experience possible, despite the kind of displays they use.

In essence, each individual pixel is the smallest physical part of a display. Each can set a varying degree of brightness and colors as instructed by the software. While there are gaps between these pixels, they are very narrow and imperceptible to human eyes, tricking us into perceiving a complete image. Screen density simply means the number of pixel contained on a specific screen area, the measurement unit typically used is PPI or pixels per inch. Apple first introduced high pixel density concept on mobile devices with its “Retina” marketing term. The company claims that normal human eyes can’t distinguish individual pixels on Retina-capable iPhone, iPad and MacBook Pro from typical viewing distance. Newer Android phablets with full HD (1080p) resolution now offer about 35 percent increase in pixel density compared to the iPhone 5.

Web browsers consistently and accurately draw webpage contents using an abstract unit called CSS pixel. On displays with standard pixel density, one CSS pixel typically corresponds to one physical pixel on the device. On full HD displays, the values used for div height and weight can be twice higher to keep the physical object size similar. Developers may also use future-proof code for the media query.

There’s also other small unit of display data called bitmap pixel, which is used in raster images, such as GIF, JPG and PNG. Each pixel uses specific information about color displayed and coordinates on the image. Some image formats may include additional data such as alpha channel or opacity. During the rendering process, the web browsers adjust the image size according to the CSS div height and width values. On standard display, one bitmap pixel also corresponds to one physical pixel. Because one bitmap pixel can no longer be divided, web browsers multiply it by four or more on high-resolution display to maintain the image size.

Web development community is still at early stage of responding to the major trend and a few methods to optimize web images for high resolution displays have been used, There are obviously some compromises of cross-browser support, ease of implementation and level of performance offered by each method, In any case, designers should take into account qualitative and quantitative factors.

Sizing

An obvious way to prepare web images for high-resolution displays is reducing the raster assets size. A common sizing method is to increase the bitmap resolution of web images, upload them to server and adjust the size using codes.

Sizing with HTML:

A very obvious way to adjust the size of enlarged image is to use the HTML image tag, specifically <img src>. The web browser automatically reserves the space needed for the images, before they are loaded. This prevents changes in page layouts before and after the images load. Designers typically use this method with webpages few images.

• Sizing with Javascript:

Designers can achieve the same result using Javascript-based methods to adjust the size of high-resolution web content images. With the help of proper jQuery codes, designers can easily manage a number of images in webpages.

• Sizing with CSS:

Designers typically want to keep presentation code in their CSS files and a common technique to adjust web images is by combining the use of HTML tag and ‘background-size’ property. A proper way to do is by setting values of height and width of background image. However, if the HTML element dimensions have been specified, designers can set the contain value. It’s worth noting that Internet Explorer 7 and 8 don’t support background-size property. Images sizing with CSS should be applied to websites with background-image property, including one that relies on single-image sprites.

Unfortunately, the use of images sizing based on HTML and CSS often cause devices with standard display to download larger assets. Images down-sampled using these sizing methods would lose a percentage of their sharpness when shown on displays with standard pixel density. Even so, these sizing methods are quite easy to implement and offer good cross-browser compatibility, except for older browsers, such as Internet Explorer 7 and 8. Perhaps, the most appropriate way for serving web images suitable for high-resolution displays is by determining the physical pixel density and then, using most suitable assets accordingly.

CSS Media Queries

Nearly all major web browsers implement max-device-pixel-ratio and min-device-pixel-ratio. Web designers may use background-image property with media queries to serve appropriate asses to high-resolution devices. A query can target both standard-resolution and high-resolution by using queries with a ratio of 1.5. Developers typically use CSS media queries on websites with graphics assets that use background-image property. They are not suitable for web content images.

Unlike sizing methods, CSS media queries are more tedious to implement, particularly when used on larger websites. It is also semantically improper to use web images as background for HTML elements. On the other hand, CSS media queries can be appropriate to use if designers seek pixel-precise controls, good cross-browser compatibility and selective assets download.

Javascript Querying

Using windows.devicePixelRatio in Javascript, web developers can query the physical pixel density of device. Once the device is identified as a high-resolution type, they can replace all inline images with their high-resolution counterpart.

Developers can use specific Javascript plugins, which include useful features such as skipping internal and external images. It should be noted that Javascript’s devicePixelRatio method is not supported by some major browsers, such as Firefox and Internet Explorer. On high-resolution devices, the image swapping effect can be easily visible and these devices need to download both high- and standard-resolution images. On the other hand, devices with standard resolution don’t need to download large assets and Javascript querying technique is generally easy to implement.

SVG (scalable vector graphics)

Unfortunately, raster images are not infinitely scalable and constrained inherently by bitmap resolution. On the contrary vector-based graphics are more future-proof and can be used for high-resolution web graphics. At this moment, SVG format based on vector XML is supported by most major browsers. SVG images are relatively easy to create; and developers can export them using common vector-capable graphics editors such as Inkscape and Adobe Illustrator.

SVG assets can be handled using CSS properties and HTML img tags. SVG images used as universal assets can be scaled up or down infinitely as needed. As file sizes of SVG images are smaller than their raster counterparts, precious bandwidth can be saved. To improve cross-browser compatibility and avoid rasterization issues in some web browsers, web designers usually make SVG images at the same size with parent HTML element or bigger. It’s worth noting that older Android devices don’t support SVG-based solutions, as well as Internet Explorer 7 and 8 web browsers. Using SVG to represent complex graphics can be inefficient due to relatively large file sizes. The built-in anti-aliasing support may cause poor pixel precision. On the other hand, SVG images are future-proof, are easy to maintain and can be used as universal assets.

Icon Fonts

This technique replaces monochrome glyphs alphabets with custom web font. CSS styling can be used just like with typical texts. A quick online search shows us that there’s no shortage of good-quality icon fonts that can cover any of out requirements. Designers usually build their own custom fonts with tools like Inkscape, Font Builder and Fontello. Unfortunately, icon fonts rely on semantically incorrect markup, harder to maintain and lacks pixel precision. On the other hand, icon fonts are more flexible than typical graphics assets, future-proof and compatible with many web browsers,

Favicons

Favicons still get their fair share of attention in web development community. Designers often export .ico files in 16- and 32-pixel variants, to allow favicons support high-resolution display.

Arrival of high pixel density smartphones, tablets and laptops is one of major shifts in web development. Web developers can wait passively for a standardized conventions or work immediately to bring pleasurable user experience.

Author :

  • Subash