![retina images @2x mapproxy retina images @2x mapproxy](https://images.indiegogo.com/file_attachments/1046358/files/20141125104854-Demo_Image.jpg)
Just load the retina.js script into your website and ensure that the file exists in the exact same location as logo.jpg If logo.jpg above were 100px by 100px, you’ll create your retina graphic with dimensions 200px by 200px and name it have the new file load for retina displays, you can use Retina.js which is an amazing script that does the detection and replacement for you automatically so no further work is needed. So create a copy of the image, giving it exactly double the dimensions. To fix this, you need to load an image with double the resolution for retina display devices specifically so that when the image is loaded and zoomed, it will display like the original image would to non-retina display devices and give you the amazing detail of a retina display. As a result, it zooms the image, showing less pixels of the actual image per screen pixels. When users with retina displays in their devices load this image, it is zoomed to the pixel per browser/CSS pixel their display supports. You probably have images loading on your site via IMG tag for example: There are two main parts to the process: 1.
![retina images @2x mapproxy retina images @2x mapproxy](https://www.drupal.org/files/project-images/auto-retina.jpg)
To optimize your website for devices with retina displays is actually quick and easy. The browser displays less pixels of the graphic per screen pixel, resulting in the graphics to look pixelated.Īs shown in the illustration image above, retina users will see a graphic on their screen like non-retina users would, except that it is zoomed into 1.5, 2 or more times. In short, your users browsing your website which hasn’t been retina optimized will see pixelated and blurry graphics. Compared to predecessors, the retina displays have many more pixels, more than 300 per inch. Retina display is a term which was introduced by Apple to refer to the displays in their devices with a high resolution and pixel density per inch. It may not seem like much but when you experience it for yourself, you feel amazed when on a retina display.
![retina images @2x mapproxy retina images @2x mapproxy](https://meowapps.com/wp-content/uploads/Perfect-Images-Image-Sizes-1024x963.png)
See how many more pixels there are per area on the right-hand side, giving you much, much more detail. On the left, you have a non-retina display and on the right, you have a retina display. The image above illustrates non-retina versus retina. These days, with devices and screens/displays that have a higher resolution, also known as retina displays it is essential to ensure that your website displays well to retina users so that they don’t see blurry, pixelated graphics.