1 0 Archive | abril, 2012
post icon

Retina Display

Los fabricantes de smartphones, principalmente Apple, han ido sacando dispositivos móviles con pantallas de mayor densidad de pixeles por pulgada, haciendo que las webs en estos terminales no se ven tan bien como hasta ahora. Esto se debe a que las imágenes que estamos usando están guardadas en una calidad inferior a la que estos necesitan. Solucionar esto no es un proceso tan sencillo como guardar las imágenes con una calidad mayor, ya que después el tamaño no es el correcto y  no se ven en los dispositivos más viejos (por ejemplo con el iPhone 3) que no tienen la misma calidad de pantalla.

Después de hacer unas cuantas pruebas, hemos llegado al proceso, quizás más práctico para hacer esto más llevadero. Tampoco es necesario que esto se haga siempre para todas las webs, pero si en aquellas que tengan un especial enfoque a los smartphones.

Para poder exportar imágenes con una calidad mayor es necesario que el documento (illustrator, photoshop, que es con lo que trabajamos normalmente) esté al tamaño final pero con una densidad de pixeles por pulgada de, como mínimo, 144. Esto hace que las imágenes al ser exportadas como png, jpg o gif sean el doble de grandes de lo que es el diseño original (aunque el documento tenga las dimensiones que tenga que tener). Estas nos servirán para los dispositivos con una densidad de pixeles mayor. Para el resto de dispositivos, ya sean smartphones más viejos o bien ordenadores, necesitaremos guardar una copia de las mismas imágenes, pero con una calidad inferior (la de siempre, 72 ppp) , y con el tamaño original.

Os paso la url de un ejemplo que hemos hecho y veréis la diferencia que hay. Para poder verlo tenéis que abrir la url en un iPhone 4, iPad 3 o algun otro dispositvo con más ppp. En el ordenador deberíais de verlo muy muy parecido.

http://imasd.cp-proximity.com/retina-display/

 

 

Leave a Comment
4 abril, 2012