{"id":208,"date":"2015-03-26T11:07:19","date_gmt":"2015-03-26T11:07:19","guid":{"rendered":"http:\/\/www.smartbuilder.com\/blog\/?p=208"},"modified":"2018-07-06T18:52:13","modified_gmt":"2018-07-06T18:52:13","slug":"retina-displays","status":"publish","type":"post","link":"https:\/\/www.smartbuilder.com\/blog\/retina-displays\/","title":{"rendered":"Making elearning look good on retina displays"},"content":{"rendered":"

A retina display (verbiage marketed by Apple) is one that has a high enough resolution that the user cannot discern an individual pixel when looking at it from a normal viewing distance. In other words, the human eye cannot tell the difference between a photo of a painting shown on a retina display, and the painting itself!1<\/sup> As the number of learners with retina displays continues to increase, it\u2019s important that elearning authors know how to support these super-high resolution devices.<\/p>\n

If you simply include graphics as you have done in the past, these may appear pixelated on a retina display. To avoid this, you must provide graphics with more image data.<\/p>\n

Elearning development tools don\u2019t yet support a typical approach to retina graphics, which is to create lower and high resolution versions of the same image and deliver up whichever one suits the learner\u2019s device. However, you can get around this issue by providing only one image that contains additional data and allow the device to use as much image data as it needs.<\/p>\n

A previous blog post<\/a> discussed the importance of optimizing graphics, which could seem contrary to what I just said, but with an easy trick, we can make graphics look good on retina displays, while still optimizing file size.<\/p>\n

One of the easiest ways to do this is to create your graphic with dimensions that are twice the size that you will need in your elearning. You can also add additional detail by increasing the image resolution.<\/p>\n

When you export the final image, save it in an appropriate format with the settings optimized<\/a>. This means that your final image will contain a lot more data (pixel definition), but thanks to compression, the file size will not be much larger.<\/p>\n

I\u2019ll illustrate with an example. Suppose that the size of a photo that I need in a project is 100 pixels by 100 pixels. I would create the image with dimensions of 200 pixels by 200 pixels. When I was done editing, I would take the following steps in Photoshop:<\/p>\n

\"img_SaveForWeb1\"<\/p>\n

    \n
  1. From the File<\/strong> menu, select Save for Web<\/strong>.<\/li>\n
  2. Select JPEG as the optimized file format.<\/li>\n
  3. Set the quality to 60%.\n