Uno de los aspectos más importantes en esta área del responsive HTML es el manejo de imágenes, ya que estas son las que hacen que nuestro contenido sea más llamativo y atractivo, es por ello que debemos manejarlas de forma cuidadosa, sobre todo cuando estamos cambiando entre resoluciones.
Ajustar una imágen con porcentajes
Este método es muy interesante ya que nos permite tener una imagen en alta calidad y ajustarla mediante procesamiento en el navegador del cliente, al tamaño de su ventana, con ello podremos mantener la proporción y la calidad de la misma.
El problema es que si utilizamos una imagen muy pesada debido a su calidad y el ancho de banda de quien visita el sitio no es muy bueno, resultará en un recurso que es difícil de descargar haciendo de nuestra página algo lento. Es por esta razón que debemos encontrar un equilibrio entre calidad y peso para poder ofrecer una experiencia agradable de usuario.
Requisitos
1- Para poder realizar este ejercicio necesitamos un editor de texto enriquecido o un IDE de desarrollo, puede ser Sublime Text o NotePad++ sin embargo cualquier otro funcionará, todo depende de cada quien y con qué herramienta se sienta cómodo. Este requisito se mantiene para todo el tutorial.
2- Necesitamos también una imagen de alta calidad con una resolución mínima de 800x600 píxeles para que podamos observar la re-dimensión que lograremos.
3- Finalmente otro requisito que se mantiene en todo el tutorial es tener un navegador y poder acceder a nuestro documento HTML resultante.
Obtención de la imagen
Para obtener una imagen con una resolución especifica sencillamente debemos buscar en Google algún tópico de nuestro interés, luego ir a imágenes y una vez ahí seleccionar herramientas de búsqueda, se desplegará un nuevo menú donde seleccionaremos tamaño y ahí en sus opciones la opción exactamente y colocamos el tamaño, en nuestro caso fue 800 píxeles de ancho por 600 píxeles de alto. Veamos en la siguiente imagen el ejemplo de la búsqueda:
Construcción de la página
Una vez que tenemos nuestros requisitos cumplidos procederemos a crear un nuevo archivo, que en este caso llamaremos ejemplo1.html donde vamos a generar el contenedor de nuestra imagen, para ello debemos tener un código inicial como el siguiente:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Imagen dinámica con Porcentajes</title></head><body><p class="texto">Esta imagen es responsive</p><div class="img-wrap" > <img alt="nuestra imagen" class="responsive" src="imagen-ejemplo.jpg" > <p>Se re-dimensiona según el tamaño de la ventana</p></div> </body></html>Cómo podemos notar no es nada muy complicado, simplemente un div que contiene a un elemento img, y al cual se le ha asignado una clase llamada responsive. Ahora la magia ocurrirá al crear el código CSS que nos va a permitir variar el tamaño de la imagen, cuando ocurra un cambio en el tamaño de la ventana del navegador.
Para ello vamos a crear una etiqueta llamada <style></style> dentro de <head></head> y colocaremos el siguiente código:
<style type="text/css"> p.texto { float:left; width:60%; } div.img-wrap{ float:right; width:40%; } img.responsive { max-width: 100%; height: auto; } </style>Este código lo que hace es flotar el texto hacia la izquierda y le asigna una proporción del 60%, luego el div donde está contenida nuestra imagen tiene una proporción del 40% y flota en el lado izquierdo.
Finalmente nuestra clase responsive le dice a la imagen que debe mantener el 100% del ancho y regular su altura de forma automática para mantener la proporción, esto hace que la imagen se ajuste al tamaño de su contenedor y este último a su vez se ajusta al tamaño de la ventana.
Si vemos el navegador en una pantalla con resolución de 1366x768 píxeles podremos ver lo siguiente:
Ahora si reducimos el tamaño de la ventana veremos cómo se re-dimensiona la imagen y se ajusta a nuestro nuevo espacio, veamos en la siguiente imagen a que nos referimos:
Notamos entonces como se redujo la imagen, sin embargo mantuvo su proporción, y lo más importante sigue siendo de calidad por lo que el aspecto de nuestra página no sufrirá una desmejora.
Re-dimensionar la imagen utilizando media queries
Existe otra forma de hacer la re-dimensión de nuestras imágenes, y es solicitando a través de las llamadas media queries la resolución actual de la pantalla, con ello podremos definir un tamaño en específico para nuestra imagen, esto es menos dinámico ya que tenemos que definir algunos rangos, sin embargo nos da un control casi absoluto sobre lo que ve el usuario.
Los requisitos para llevar a cabo este ejercicio son los mismos del ejercicio anterior por lo que si hemos seguido el tutorial debemos tener todos los materiales necesarios.
Para el ejemplo vamos a partir del siguiente código base:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Imagen dinámica con media queries</title></head><body> <p class="text">Esta imagen cambia segun la resolución</p><div class="img-wrap" > <img alt="nuestra imagen" class="responsive" src="imagen-ejemplo.jpg" > <p>Se re-dimensiona según el tamaño de la ventana</p></div> </body></html>Ahora al igual que en el ejercicio anterior vamos a crear una etiqueta <style></style> dentro de <head></head> solo que ahora vamos a trabajar con el siguiente código para la hoja de estilos:
<style type="text/css"> @media screen and ( max-width: 1024px ) { img.responsive { width: 200px; } } @media screen and ( min-width:1025px ) and ( max-width: 1280px ) { img.responsive { width: 300px; } } @media screen and ( min-width: 1081px ) { img.responsive { width: 400px; } } img.responsive { height: auto; }</style>En el primer bloque vemos como nuestro @media está esperando por una resolución máxima de hasta 1024 píxeles, cuando ello ocurre hace que el ancho de la imagen sea de 200 píxeles, en el segundo caso se establece cuando la resolución está entre 1025 píxeles y 1280 píxeles, se establece un ancho de 300 píxeles, y por último cuando la resolución es mínimo de 1081 píxeles se sirve una imagen de 400 píxeles de ancho.
Finalmente le decimos fuera de las condiciones que la altura de la imagen es automática, de esta forma podremos mantener las proporciones. Veamos a continuación como luce nuestro ejemplo cuando estamos en el segundo caso, luego en el primero que son los más comunes que encontraremos.
Cuando la resolución está entre 1025 píxeles y 1280 píxeles podemos ver lo siguiente:
Si re-dimensionamos nuestra pantalla a algo menor a 1024 píxeles veremos cómo servimos otro tamaño de imagen.
Vemos que la diferencia es sutil, pero notoria, con ello podremos lograr efectos responsive que sean un poco más rígidos, a diferencia de nuestro primer ejercicio este no es tan dinámico, pero nos puede ayudar a mantener un marco que no deforme lo que queremos expresar con nuestra página.
Con esto hemos finalizado este tutorial, hemos podido hacer re-dimensión de imágenes utilizando únicamente como referencia la resolución y el tamaño de la pantalla, hay otros métodos más complejos como obtener el tamaño a través de las cookies y JavaScript, sin embargo este tipo de soluciones son más complejas de implementar y requieren de un lenguaje de servidor como PHP o Ruby por ejemplo, para poder procesar la información y así obtener los resultados. Si dominamos estas técnicas nos aseguraremos que nuestras páginas luzcan siempre bien sin importar las nuevas resoluciones, o si el usuario ingresa desde un equipo muy antiguo a nuestras páginas responsive.
Fenomenal tutorial si señor, gracias!