Properly save images for Retina displays
More and more everyday, people are using their mobile devices for work and play, as a result, device manufacturers continuously work to enhance their user experience, making their portable devices concurrently more powerful and user friendly.
In the past few years, Apple has given the public a completely new and state-of-the-art line-up of products (both proratable and desktop) that have adapted double density pixel screens, creating sharper images on smaller screens. Following suit, all of the other leading mobile device manufacturers are following suit with their own versions of high pixel density screens.
This is undoubtedly a advantage for consumers and end users. Why? Because it can present a challenge for web developers and designers to ensure that they make their websites and apps compatible with such Retina displays. Thus ensuring each and every consumer with state of the art mobile devices and/or desktops with up to date web browsers all display a high resolution look to their pages. Once this change became apparent to developers, it was then that web developers realized how old fashioned the web is and how websites looked “non-living” on such displays.
Would this mean that websites look broken if they are displayed on low resolution and/or a portable device with low density pixel display? No, because the websites are not broken on Retina devices. Simply, they just view fuzzy and pixels start appearing on low resolution images, however, the overall structure of the website remains same.
Define CSS Pixel Values
CSS pixel is an abstract unit used by the browsers to execute this task, and are used to draw images and other content on a web page. . CSS pixels are DIPs which means they are Device Independent Pixels. They are displayed by just themselves according to the pixel density of the screen they were rendered in.
If you have the following code:
<div style="width:150px; height:200px"></div>The above HTML entity would look 150px by 200px in size in a standard display while 300px by 400px in a Retina display to retain the same physical size.
Alternate high resolution pixels
If you have, for example, an image which measures 200px by 400px (CSS pixels) and you want to depict and place it properly in a Retina display. You can upload an alternate image of size 400px by 800px in your server and render it whenever the webpage is opened in a Retina device.
But to make them appear physically of the same dimensions we have to use CSS to resize them. The following code allows this to happen:
/* for low resolution display */
.image {
background-image: url(/path/to/my/lowreslogo.png);
background-size: 200px 300px;
height: 300px;
width: 200px;
}
/* for high resolution display */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.image {
background: url(/path/to/my/highreslogo.png) no-repeat;
background-size: 200px 400px;
/* rest of your styles... */
}
}Using @face-fonts instead of an image icons
If you are creating and displaying several icons on your webpage, resizing each of them with a double resolution icon can be a hectic job. We will try to use @font-faces instead of images. This will allow image-fonts to automatically resize themselves on the high resolution devices just like normal fonts would. Using @face-fonts is an alternate solution to Bitmap icons.
Today, there are a lot of top quality and high resolution icon fonts that can meet your expectations for website design. Examples of such fonts are Fontello and Inkscape.
The following code snippet shows how to use @font-faces as a substitute to image icons:
In HTML:
/* define span tag for letters and give them a class in HTML */
<span class="myicon">Text</span>In CSS:
/* First import your font */
@font-family: myFont;
src: url('Modern_Icons.ttf'),
url('Modern_Icons.eot'); /* IE9 */
. myicon {
font-family: ‘Modern Icons’;
}Use SVG images instead of bitmaps
Bitmap images are images with graphical techniques using arrays of pixel values which multiply their pixels in Retina displays. However, they exist with a limitation of getting multiplied an infinite number of times. This is where SVG images come into play. Furthermore, SVG images also solve our problem of uploading alternate images of double resolution plus they solve the bandwidth problem.
In HTML:
<img src="/example.svg" width="150" height="200" />In CSS:
.image {
background-image: url(example.svg);
background-size: 150px 200px;
height: 150px;
width: 200px;
}Use JavaScript to automatically replace images
Noted above, replacing low resolution images with double resolution image ties-up a lot of extra bandwidth for a user and as a result, your website will load slowly. Still, if you want to go with the first method as discussed above, replacing each one of them by writing individual code will be a grueling task.
There is a fix however, you can use JavaScript to replace all images in a webpage easily. The following code explains this.
$(document).ready(function(){
if (window.devicePixelRatio > 1) {
var lowresImages = $('img');
images.each(function(i) {
var lowres = $(this).attr('src');
var highres = lowres.replace(".", "@2x.");
$(this).attr('src', highres);
});
}
});The code above assumes you have named each low resolution image as image.png and a high resolution images as This email address is being protected from spambots. You need JavaScript enabled to view it., and it finds the first dot in the image name and replaces it with @2x..
One of the major disadvantages of using this JavaScript method is that the Retina display devices would download both versions of images each page load (regardless of the the cache previously created from your previous visit), which will negatively affect the loading time of your website on a mobile device.
