Optimizing images for Retina Display

  On 21 Jun, 2013   By Comments are Off

Optimizing images for Retina Display

For new retina display screens, designers ask themselves which is the best option to export images in the most optimal way without increasing too much its weight and export it in the best quality.

What is Retina Display?

Retina Display are the screens with a higher resolution than those we’ve always handled. It means, what in resolution with standard definition measures 1px on a retina display definition measures 2px, which generates that the pixel is almost imperceptible to the human eye and makes images has greater sharpness.


Export images to retina

When we are ready with our design, or our montage, we will export it as jpg. We have to export the image at 200% with a quality between 60 to 75. To achieve this, choose “save for web” or keyboard “ctrl + alt + shift + s” (either in Photoshop or Illustrator) and for the quality enter a value between 60 and 75. The lower the value, the less the image will weight, but avoid to pixelate it, for the percentage, select 200%, and save it.




As expected, that will double the size of the image, which means, if the image has an original size of 800px X 600px, in order to optimize we will have an image of 1600px X 1200px. The resultinf image will be a little heavier but it guarantees us it will not be pixelated.
In order to have the image on the web at its original size, you can adjust the css code to the original size, in this case the dimensions would be: width: 800px and  height: 600px.

0 thoughts on "Optimizing images for Retina Display"