Cargando



Imágenes dinámicas con responsive HTML

En este tutorial vamos a aprender las diferentes técnicas que tenemos para el manejo de imágenes de forma dinámica al momento de construir nuestro sitio web responsive.


feb 12 2015 05:03
Profesional
feb 12 2015 10:26
El responsive HTML es la tendencia más actual y también un requisito a la hora de hacer un sitio web multi-plataformas, esto se debe a que su naturaleza de adaptación nos permite crear páginas que puedan funcionar en diferentes resoluciones de forma automática, abarcando así desde monitores Full HD o más, hasta dispositivos móviles con resoluciones reducidas.

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:

responsive-html-imagenes-dinamicas-3.jpg

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.

¿Cómo se logra?
El resultado se logra utilizando la palabra reservada de CSS @media y le pasamos screen que le indica que debe observar la pantalla, luego definimos la resolución y dentro podemos colocar el código CSS para el caso en particular, podemos hacer media queries para cada rango de resoluciones esperado, sin embargo es un poco más laborioso que trabajar con porcentajes.


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:


responsive-html-imagenes-dinamicas-4.jpg

Si re-dimensionamos nuestra pantalla a algo menor a 1024 píxeles veremos cómo servimos otro tamaño de imagen.

responsive-html-imagenes-dinamicas-5.jpg


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.

Importante
Como dato adicional podemos decir que los media queries no solo sirven para trabajar las imágenes, con ellos podemos inclusive mostrar y ocultar elementos del HTML para ajustarnos a la pantalla, creando así sitios totalmente responsive. Esto se utiliza mucho para re-dimensionar los menús, headers, y footers, de esta forma creando así sitios para móviles que luzcan de una forma, para tablets que luzcan de otra y ya cuando se entregue la versión de escritorio será el sitio original.


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.

¿Te ayudó este Tutorial?


2 Comentarios

Fenomenal tutorial si señor, gracias!


Fiore Nella
feb 13 2015 22:35

Genial tuto Solvetic, os sigo.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X