Optimización de imágenes para Retina Display

  On 21 Jun, 2013   By With 0 Comments »
twittergoogle_plusfacebook
ejemplo-ing11

Optimización de imágenes para Retina Display
Para las nuevas pantallas con retina display, a los diseñadores nos entra la duda de cuál es la mejor opción para poder exportar las imágenes de la manera más óptima y que no aumente demasiado su peso al exportarla con la mejor calidad posible.

Que es Retina Display?
Son las pantallas con una resolución mayor a las que siempre hemos manejado. Es decir, lo que en una resolución con definición estándar mide 1px, en una pantalla con definición retina mide 2px, lo cual genera que el pixel sea casi imperceptible al ojo humano y hace que las imágenes tengan mayor nitidez.

retina
ejemplo-esp1

 

Exportar para retina
Ya una vez listo nuestro diseño, o nuestro montaje, vamos a exportarlo como jpg. Debemos exportar la imagen al 200% con una calidad de 60 a 75. Para esto, le damos “guardar para web” o en el teclado “ctrl + alt + shift + s” (ya sea en Photoshop o en Illustrator) y en Calidad le damos entre 60 y 75. Entre menor sea el valor, la imagen pesará menos, pero debemos tener en cuenta que no la vaya a pixelar; para el porcentaje, 200%, y guardamos.

 

En Photoshop

pantallazopsd

En Illustrator

pantallazoai

 

Obviamente, eso duplicará el tamaño de la imagen, lo que significa que, si la imagen tiene un tamaño de 800px X 600px, al optimizarla queda una imagen de 1600px X 1200px. Pesará un poco más pero nos garantizará que no se verá pixelada.
Ya para que en la web la imagen quede al 100% de su tamaño, le arreglamos el css con el tamaño real, en este caso sería el width: 800px y el heigth: 600px.

0 thoughts on "Optimización de imágenes para Retina Display"

Leave A Reply


*

*Required fields