La web móvil: Reemplazo de imágenes CSS para dispositivos con pantalla Retina

Nativo diseñadores de aplicaciones móviles ya aprendieron cómo aprovechar esos dispositivos con proporciones de píxeles altas para mostrar imágenes más grandes con mejor calidad, a fin de mejorar la experiencia del usuario. Están acostumbrados a crear las imágenes en tamaño normal y retina @2x para iPhone, y a crear 4 conjuntos de elementos de diseño en 4 tamaños diferentes para dispositivos Android. Con el iPad 3 también teniendo pantalla retina, definitivamente es algo que será más difícil de evitar a partir de ahora. En este artículo, verá cómo usar algunos trucos de CSS3 en el campo del reemplazo de imágenes para servir imágenes con mejor calidad a esos dispositivos de alta resolución.

Historia detrás del código

Todo comenzó cuando estaba creando una aplicación jQuery Mobile para el iPhone. La idea era hacer una aplicación jQueryMobile HTML5 completa e integrarla en un «shell nativo», utilizando Phonegap. Para esta aplicación, creé una barra de pestañas inferior que imitaba la barra de pestañas nativa de iOS, y también un encabezado con una imagen de logotipo. Tanto el encabezado como el pie de página eran elementos HTML que usaban técnicas de reemplazo de imágenes para mostrar los íconos y el logotipo. Cuando probé la aplicación en el iPhone 4S, vi que el logotipo y los íconos estaban muy rasterizados y se veían bastante feos.

La demostración

Recreé una página de aplicación falsa similar al estilo nativo de iOS para que puedas ver lo que está pasando. Ya sea que tenga un dispositivo de retina o no, puede probarlo aquí con su teléfono. Puedes ver la demostración aquí. Tú también puedes descarga el código aquí. Como dije, si carga la página en un dispositivo que no sea retina, se verá bien. Si lo carga en un dispositivo de retina, las imágenes se rasterizan. Esto se debe a que la proporción de píxeles es de 2, por lo que la imagen se multiplica por dos y el dispositivo la estira, creando esta representación sucia. Aquí hay algunas capturas de pantalla de la demostración en iPad 3, iPhone 4 y Galaxy Nexus con las imágenes rasterizadas:

Galaxy Nexus:
Iphone 4:
Ipad 3:

Técnicas de reemplazo de imágenes CSS

En esta demostración, utilicé diferentes técnicas para reemplazar imágenes que tendrán diferentes consecuencias cuando queramos cambiar por imágenes de retina. La primera imagen que reemplazamos está en el logotipo, asegurándonos de establecer solo la altura del elemento. El HTML se ve así:

<div class="ui-header"> <h1> My logo </h1></div>

El CSS así:

.ui-header h1{

color:#fff;

display: block;

outline: 0 none !important;

overflow: hidden;

margin:0;

text-align: center;

text-overflow: ellipsis;

white-space: nowrap;

text-indent:-9999px;

background:url(img/logo.png) no-repeat center center;

height:33px;

}

Nuevamente, lo importante aquí es que le damos altura, pero no ancho. La segunda técnica es utilizar el botón Eliminar. Queremos mantener el texto para este, por lo que agregaremos el icono en la pseudo clase :before. El HTML se ve así:

<p> <a href="#"> Delete item </a> </p>

Y el código CSS así:

.delete:before{

content: " ";

display:block;

width:20px;

height:20px;

position:absolute;

left:6px;

background:url(img/delete.png) no-repeat;

}

Tenga en cuenta que en este caso, le dimos al elemento tanto un ancho como una altura, pero sin relleno. El siguiente elemento al que queremos añadir un icono es el botón de descarga. El HTML se ve así:

<p> <a href="#"> Download </a></p>

Y el CSS así:

.download {

background:rgb(222, 227, 232) url(img/nuage.png) no-repeat 8px 6px;

border:1px solid rgb(199, 206, 212);

padding: 25px 0 25px 120px;

font-size:20px;

color:rgb(144, 160, 176);

text-shadow: 0 1px 1px rgb(239, 242, 245);

}

Esto es lo que llamaremos la tercera técnica: asignar algo de relleno, pero sin altura ni anchura. Entenderás por qué a continuación. Sin embargo, para el pie de página, también asignamos un ancho y alto para el elemento, relleno también. El HTML:

<a class="bubble button" href="#"> bubble </a>

El CSS:

.ui-footer .button{

background-color:rgba(187, 185, 185, 0.2);

border:1px solid rgb(22, 22, 22);

box-shadow: 0px 1px 2px rgba(22, 22, 22, 0.5) inset ;

text-indent:-9999px;

padding:10px 15px;

width:40px;

height:40px;

background-position: center center;

background-repeat:no-repeat;

margin: 0 5px;

}

.bubble{

background-image:url(img/bubble.png);

}

En este punto, tenemos diferentes escenarios de casos para el reemplazo de imágenes que cargarán imágenes que no sean retina para todos los dispositivos, por ahora.

Media Queries Pixel-Ratio al rescate

La siguiente idea fue entonces encontrar una solución para que esos dispositivos cargaran imágenes de mejor calidad. Recordé la relación de píxeles del dispositivo de consulta de medios (se necesita el prefijo del proveedor). Nunca lo había usado antes, y decidí darle una oportunidad. Necesitará algunos prefijos de proveedores aquí (Mozilla es el más extraño). La idea era bastante simple: decidí intentar servir a esos dispositivos una imagen que tuviera el doble del tamaño de la de escritorio. Elegí una notación @2x para la imagen retina porque estoy acostumbrado a hacerlo cuando creo imágenes para aplicaciones iOS nativas. Terminé haciendo algo como esto:

@media only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (min-device-pixel-ratio: 2) {

#myelement{

background:url([email protected]) no-repeat;

}

}

Se podría pensar que esto funciona bien. Es cierto que la imagen de la retina está cargada, pero el problema es que la imagen ahora tiene el doble de tamaño. Todavía no se muestra correctamente. Así es como se veía en mi Galaxy: los iconos son bonitos y nítidos, pero no del todo correctos.

La propiedad de tamaño de fondo echa una mano

Ahora que tenemos las imágenes de alta resolución cargando, debemos asegurarnos de que tengan el tamaño correcto. Para ello, utilizaremos la super útil Propiedad de tamaño de fondo CSS3 que en realidad es capaz de cambiar el tamaño de los fondos según sea necesario. Puede usar las propiedades de píxeles para el ancho primero y luego la altura, usar porcentajes o establecer el valor en «automático». Es simple verlo en el código. (Tenga en cuenta que utilicé el id #retina para el propósito de la demostración para apuntar solo a la segunda parte de la demostración, pero, por supuesto, puede omitirlo en su código) Para el botón de encabezado, recuerde que establecimos la altura pero no el ancho , para hacer el truco aquí, estableceremos la altura del fondo en el mismo valor (podemos dejar el ancho en automático).

#retina .ui-header h1{

background:url(img/[email protected]) no-repeat center center;

-webkit-background-size: auto 33px ;

-moz-background-size: auto 33px ;

background-size: auto 33px ;

}

Para la técnica del botón Eliminar es un poco más fácil, ya que establecimos tanto el ancho como el alto Y como no tiene relleno, podemos establecer el valor al 100% para cada uno, lo que significa que el ícono usará todo el espacio del contenedor:

#retina .delete:before{

background:url(img/[email protected]) no-repeat;

-webkit-background-size: 100%  100% ;

-moz-background-size: 100%  100% ;

background-size: 100%  100% ;

}

Para el botón de descarga, se vuelve más complicado. Como no le dimos ancho ni alto, tendremos que establecer los tamaños exactos de la imagen no retina para esta:

#retina .download {

background:rgb(222, 227, 232) url(img/[email protected]) no-repeat 8px 6px;

-webkit-background-size: 70px 68px ;

-moz-background-size: 70px 68px ;

background-size: 70px 68px ;

}

Para los íconos de pie de página, establecimos ancho y alto, pero el elemento tiene algo de relleno. Entonces aquí tendremos que establecer al menos uno de los dos valores para que funcione:

#retina .bubble{

background-image:url(img/[email protected]);

}

#retina .loupe{

background-image:url(img/[email protected]);

}

#retina .folder{

background-image:url(img/[email protected]);

}

#retina .ui-footer .button{

-webkit-background-size: 40px auto ;

-moz-background-size: 40px auto ;

background-size: 40px auto ;

}

Y así es como se ve ahora:

¿Qué pasa con las imágenes HTML?

Solo baso este artículo en las imágenes CSS, pero por supuesto también hay imágenes directamente en el HTML. Para ello, tendrás que echar un vistazo a algunas técnicas de imagen responsive. Hasta ahora probé retina.js y tengo que admitir que es bastante simple de usar, solo tienes que poner una imagen @2x en la misma carpeta que la normal e incluir el script. También está el Imágenes de retina complemento que parece hacer el mismo trabajo, pero necesita más configuración del lado del servidor.

Limitaciones y Conclusión

Como puede ver, cada caso es diferente y tendrá que jugar con los valores de tamaño de fondo para obtener exactamente lo que desea. La otra limitación sería que los navegadores descarguen dos imágenes para este truco: primero la normal, luego la retina. No soy un experto en este dominio en particular y no realicé pruebas para la demostración, así que si quieres, siéntete libre de hacerlo y puedes publicar los resultados. Tengo curiosidad por saber el navegador utilizado y si las imágenes se descargan dos veces. . Las técnicas utilizadas en este artículo se basan en una gran cantidad de código CSS3, por lo que es posible que no todos los navegadores las admitan. Además, tener que crear todas las imágenes en dos tamaños puede ser difícil para mantener el código y ocupa más espacio en el lado del servidor. Así que tendrás que pensar cuidadosamente antes de usar tales técnicas. Obligar a los dispositivos a cargar imágenes del doble del tamaño y luego cambiar su tamaño también puede consumir ancho de banda. En conclusión, recomendaría que, aunque esta es una buena técnica para crear una interfaz agradable y elegante con píxeles perfectos para los dispositivos que la admiten, hay que tener en cuenta algunas consideraciones antes de usar dicha técnica. Naturalmente, esta no será la solución para todos.

Ir más lejos

Si está interesado en mostrar iconos agradables sin tener que crear los archivos dos veces, también puede echar un vistazo a la técnica de la fuente icónica y en imágenes SVG. También hay este artículo puedes consultar, pero aquí nuevamente, esto no es ampliamente compatible. (Créditos por el conjunto de iconos monocromáticos.)

(rb)