10/07/2013

Optimizando imágenes para Retina Display

Optimizando imágenes para Retina Display

Un píxel es la unidad física más pequeña que puede mostrar la pantalla de un dispositivo. La densidad de píxeles es la cantidad de píxeles que se muestran por unidad de área. El cálculo de la densidad de píxeles (PPI, pixels per inch) se realiza dividiendo la cantidad de píxeles que ocupan una diagonal de la pantalla por la extensión de esa diagonal en pulgadas. Por lo tanto, una PPI alta representa una gran cantidad de píxeles en relación con el tamaño de la pantalla. Esto equivale a una buena definición.

Retina Display es una tecnología de pantallas de cristal líquido característica de los productos Apple. Su principal cualidad es que ofrece una muy alta densidad de píxeles, de manera que el ojo humano es incapaz de notar la pixelación de una imagen a cierta distancia de la pantalla. En otras palabras, los píxeles son tan pequeños que nuestro ojo no llega a notar su forma cuadrada, viendo los contornos de las imágenes casi tan suaves como en una fotografía impresa.

En un dispositivo Apple, el área de los píxeles puede ser cuatro veces menor a la de los píxeles de otro dispositivo. Por eso, Retina se adapta construyendo un píxel de un mapa de bits «común» a través de cuatro píxeles pequeños. Pero los resultados no siempre son buenos, por lo que debemos optimizar las imágenes de nuestro sitio web para esta plataforma.

El blog Designmodo ofrece varias formas de lograrlo:

  • Ajustar el tamaño de la imagen en píxeles o en porcentaje a través de HTML y CSS.
  • Implementar un comportamiento similar al anterior con jQuery.
  • Adaptar las imágenes a distintos dispositivos a través de los Media Queries de CSS3.
  • Utilizar el formato SVG, que, a diferencia de los mapas de bits, evita la pixelación de las imágenes.

La adaptación a Retina Display es fundamental en una época donde los dispositivos móviles ganan importancia como plataformas de navegación web y Apple es uno de los principales actores en ese escenario.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce