Tips for Retina View

The increased resolutions on newer smart phones, Retina Display to borrow Apple’s terminology, allow for much crisper images on the mobile view of our websites, but they cause problems for us as developers. ?There are several different methods for using these images, and most of them are rather cumbersome. ?It also makes the development more tiresome since you have to produce two images even in the development phase. ?We have found a few shortcuts in both areas.

Firefox allows you to change the rendered pixel setting to allow desktop browsers to emulate a retina display. ?The process is simple and straightforward:

• go to the URL box and type about:config
• scroll to the setting layout.css.devPixelsPerPx
• change the value from -1 (normal display) to 2 (for retina display)
• reload your page

Another trick?that can work in any browser and greatly reduce development time is to simply change the size of the image when it is created. ? When you create your graphics, create them at twice the size they will appear on the screen, but with reduced quality. ?(For example, if your image should be 50px by 50px, create the graphic at 100px by 100px.) ?Play with they quality setting, but generally you can go down to about one half without affecting quality. ?The file size should be comparable to your original image, but now you don’t have to worry about maintaining multiple copies or coding different methods to get them to display. ?You can always check what the image would look like on a mobile device by zooming in your browser to 200%. ? While I would recommend this primarily for development, some images scale well enough that you can keep this methodology in a production site as well.