Have you ever worked with retina graphics? If so, when and what techniques did you use?

Have you ever worked with retina graphics? If so, when and what techniques did you use?

On retina devices the websites are not broken. They just look vague and pixels start appearing as low resolution images. So the only way to correct is to resize the images by following one of the techniques below:

i) Using alternate high resolution pixels

Suppose we have an image of 200px by 400px (CSS pixels) and we want to display it properly in a retina display, we can upload an alternate image of size 400px by 800px in our server and render them whenever the webpage is opened in a retina device.

ii) Using @face-fonts instead of images icon

Image fonts will automatically resize themselves on the high resolution devices just like normal fonts do. Using @face-fonts is an alternate solution to Bitmap icons.

iii) Using SVG images instead of Bitmap images

Bitmap images are images that multiply their pixels in retina displays. But they come with a limitation of getting multiplied infinite number of times. This is where SVG images come into role. They also solve our problem of uploading alternate images of double resolution plus they solve the bandwidth problem too.

iv) Using JavaScript to replace all the images with double sized image

We can use JavaScript to replace all images in a webpage but it will be a difficult task replacing each one of them by writing individual code.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>