Tecnología y Coaching para Emprendedores

Cómo crear imágenes retina para diseño responsive

retina

Los nuevos dispositivos móviles de iPhone y el iPad, vienen equipados con unas pantallas retina. Para que nuestros diseños se vean con buena calidad en estos dispositivos va a ser necesario que adaptemos las imágenes principales a esta resolución de pantalla. ¿Qué es exactamente una pantalla retina? Aquella que muestra el doble de píxels en el mismo espacio que los dispositivos anteriores. En este tutorial aprenderás a adaptar sus imágenes a los dispositivos retina para cuando estén haciendo diseño web responsive.

imagen retina


LAS IMÁGENES RETINA

Las imágenes retina las vamos a estar utilizando tanto para el desarrollo de apps para los nuevos iPhone y iPad, como para la creación de diseños web responsive y aplicaciones web. En el caso que estemos desarrollando apps para la Apple store no habrá ningún problema con el tema de las imágenes retina, pero sí en el diseño web responsive y las aplicaciones web. ¿Motivo? Al tener las imágenes retina el doble de resolución, también tendrán el doble de peso, con lo que no es aconsejable hacer todas y cada una de las imágenes retina, sino las más importantes.

LOS ICONOS RETINA

Es aconsejable crear un icono para el iPhone y el iPad por si el usuario decide guardar nuestra web o aplicación web como un icono en su pantalla. Para ello habremos de tener en cuenta estas resoluciones:

  • iPhone: 57 x 57
  • iPhone Retina: 114 x 114
  • iPad: 72 x 72
  • iPad Retina: 144 x 144

Si no especificamos la medida correcta, entonces utilizará la medida más grande siguiente. Así, si no especificamos el icono 114 x 114, utilizará el 144 x 144.


CÓMO MOSTRAR IMÁGENES RETINA

Existen varias maneras de mostrar imágenes retina. Quizás la mejor sea la que se propone en este artículo, pues lo hace con PHP desde el lado del servidor. ¿Ventajas? Que si lo hacemos con JavaScript o jQuery descargaremos la imagen dos veces, con lo que consumiremos un ancho de banda no óptimo para cuando se está navegando en 3G. En el caso de utilizar WordPress, te puede servir el plugin WP Retina 2x.

MOSTRAR LAS IMÁGENES RETINA CON CSS

Con los media queries de CSS3 podemos mostrar las imágenes retina del siguiente modo:


.retina {

	 background: url(../images/ejemplo.png);
	 width: 100%;
	 height:auto;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	 .retina {
	 background: url(../images/ejemplo@2x.png);
	 }
}

Fíjate que se trata de dos imágenes diferentes y que para facilitar la lectura del código añadimos al final del nombre de la imagen @2x.

MOSTRAR LAS IMÁGENES RETINA CON JQUERY

Otro modo de hacer esto sería con est script de jQuery que se aplicaría a la clase retina de HTML:


$(function () {

	 if (window.devicePixelRatio == 2) {

	 var images = $("img.retina");

	 for(var i = 0; i < images.length; i++) {

	 var imageType = images[i].src.substr(-4);
	 var imageName = images[i].src.substr(0, images[i].src.length - 4);
	 imageName += "@2x" + imageType;

	 images[i].src = imageName;
	 }
	 }

	});

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios

  • juan

    Excelente aporte gracias por la info