Imágenes en diseño web responsive con CSS

El principal cambio de conceptualización que ha traído el diseño web responsive ha sido sin duda la sustitución del pixel por unidades relativas. Es cierto, antes ligabamos todos los elementos del diseño (tamaño de tipografía, contenedores, imágenes, márgenes…) a una unidad fija. El pixel. Pero con el responsive todo es distinto. Trabajamos con unidades relativas: porcentajes (%), ems, rems…y las imágenes sin duda son uno de los elementos más afectados

Píxeles frente a unidades relativas.

Supongamos que tenemos una imagen de 400 píxeles de ancho por 300 píxeles de alto (un 400x300px de toda la vida). Pues bien, ver esta imagen a tamaño real requiere de un dispositivo con un ancho como mínimo de 400px, ya que una resolución inferior requeriría de scroll horizontal, y esto, a menos que sea imprescindible, vamos a tratar siempre de erradicarlo.

imagen responsive en css
Usaremos esta imagen de 400px por 300px como ejemplo para jugar con ella y ridensionarla para trabajar en responsive con CSS

La opción a día de hoy más factible es redimensionar dicha imagen con respecto al contenedor, para así hacerla adaptable a las distintas resoluciones posibles. y esto sólo es posible olvidándonos de la unidad píxel, y pensando en unidades relativas. El responsive design es una tendencia de diseño web que está aquí para quedarse

Olvídate igualmente en tener varias imagenes en pixeles concretos para según qué dispositivo (iphone 5 o una determinada tablet). El mundo de los dispositivos cambia muy rápido, y día a día salen al mercado nuevos elementos con conexión a internet, y con resoluciones de lo más variadas. Con el trabajo que cuesta seleccionar buenas imágenes de bancos ¿Vas a estar añadiendo una imagen cada vez que salga un nuevo dispositivo?. Mira más allá, piensa en el futuro y diseña hoy algo que esté preparado para mañana.

¿Convencido entonces? Vamos a ver como trabajar con imágenes responsives desde CSS.

CSS y las imágenes responsive

Sigamos con nuestra imagen de 400px de ancho. Vamos a declarar que dicha imagen tenga un ancho relativo. En este caso del 100%

img { width: 100%};

Bien, con esto hemos logrado desprendernos de los píxeles. Ahora la imagen siempre se ajustará a su contenedor. Si está dentro de un artículo, ocupará el 100% del ancho de dicho artículo. Si está dentro de un widget en el sidebar o aside (elemento HTML5), siempre ocupará el 100% del ancho de dicho widget. Perfecto. Hemos pasado de una imagen de ancho fijo a una imagen fluida.

Vayamos al siguiente nivel. Tener una imagen fluida está genial, ya podemos empezar a utilizar el poder de las imágenes. El problema es: ¿Que pasa cuando nuestro contenedor supera el tamaño en píxeles de la imagen?. Supongamos un contenedor de 1200 píxeles. ¿Que hace nuestra imagen fluida? Llenar el 100% del espacio. Por lo tanto, nuestra imagen de 400px pasa a convertirse en una imagen de 1200px. Responsive total, eso sí, pero pixelada, eso también. Esto no es buena idea.

Tenemos que conseguir que dicha imagen sea fluida, pero hasta un límite! Solución: la regla CSS max-width. Mediante dicha regla vamos a indicar que la imagen tenga su ancho en píxeles, pero que como máximo, siempre esté al 100% de la anchura del contenedor. Dicho de forma clara:

si el contenedor tiene 300px: nuestra imagen 300px (max-width: 100%)
si el contenedor tiene 400px: nuestra imagen 400px (max-width: 100%)
si el contenedor tiene 1200px: nuestra imagen se queda en 400px!

Ver Demo Completa

See the Pen Responsive images by Ricardo Prieto (@ricardpriet) on CodePen.

Tenemos lo bueno de las imágenes fluidas y no tenemos pixelación por exceso de estiramiento.

img { max-width: 100%};

Alto (height) en imágenes responsives.

Con el valor height la cosa cambia un poco. Normalmente solemos guiarnos por el ancho de los dispositivos y contenedores para ubicar nuestro contenido. Rara vez en diseño web el valor height es un elemento a tener en cuenta. Existen webs con navegación horizontal, pero la mayoría suelen ser en vertical, por lo tanto son valores a los que no se les presenta mucho control.

Sin embargo, es interesante su uso en diseño web con elementos fijos, por ejemplo un menú de navegación fixed, al que seguramente tengamos que definir un alto concreto. Pero más allá de esto, y volviendo con las imágenes responsive, lo mejor para el alto es indicar un valor auto, es decir, delegar al explorador que calcule el alto del elemento.

En la mayoría de los casos, esto hará que el alto no pierda proporción con respecto al ancho. Si el ancho de la imagen se reduce para adaptarse a responsive, el alto también lo hace. Si el ancho se queda fijo, el alto también lo hará. Así que completemos nuestra regla para imágenes responsives:

img {
height: auto;
max-width: 100%;
}

Con esto tendremos listo nuestra web para que todas las imágenes sean responsive.

Un paso más: Carga de varias imágenes por resolución

Efectivamente existen interesantes alternativas. En realidad, lo que hemos hecho es convertir todas nuestras imágenes en flexibles, lo cual hace posible que puedan ser visualizadas correctamente desde cualquier dispositivo, aumentando por tanto la experiencia de usuario.

Pero podemos ir un paso más allá, y optimizar esto aún más. Imagina que estamos accediendo desde el móvil y una imagen de 1200px de ancho se redimensiona perfectamente. Fantástico, el usuario verá la imagen correctamente, sin embargo, está descargando una imagen por encima de lo necesario. Está descargando más kb de los necesarios. Esa misma imagen redimensionada a 600px de ancho hubiera sido suficiente. Y más ligera!

Para ello, pese a que todavía no hay un estándar, si existen proyectos muy interesantes como Adaptive Images o Picturefill. Algunos de ellos realizan redimensiones de las imágenes y cargan una u otra dependiendo de las dimensiones del dispositivo. La mayoría de ellas utilizan JavaScript. Hacerlo mediante CSS requiere utilizar la regla background-image, y no es viable hacerlo manualmente artículo por artículo. Si estas interesado en este tema te recomiendo leer este artículo.

Internet Explorer y la imágenes responsive

Nuestro querido Internet Explorer 8 y 7 como siempre poniéndonos la vida fácil. La cuestión aquí es que el navegador de Microsoft no renderiza correctamente la imagen cuando se aplica la regla max-width en estas versiones anteriores. Por tanto, no queda otra que hacer un pequeño fix. Si tienes declarados que en tu cabecera se le aplique una regla si el visitante viene desde IE8 o 7 (como te muestro a continuación):

<!doctype html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

Le podemos aplicar una regla concreta que sólo se aplique para las imágenes en las versiones de internet explorer que no sean compatibles con max-width normalmente todas las anteriores a Internet Explorer 9.

/* Fix IE problems with images */
.ie img {
width: inherit;  /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto;    /* Add !important if needed. */
}

WordPress y las imágenes responsives

Si estas en WordPress, todo lo anterior sirve perfectamente. No obstante, es buena idea definir la ubicación de aquellas imágenes donde se va a aplicar las reglas para convertir dichas imágenes en fluidas. Por ello, y si estas utilizando una plantilla o tema que sigue las recomendaciones de clases en su estructura, podemos limitar que esta regla sólo se aplique a las imágenes dentro de los post o dentro del sidebar:

.entry-content img,
.entry-summary img,
.comment-content img,
.widget img,
.wp-caption {
	max-width: 100%;
	height: auto;    
}

Esto es bueno, pues puede ocurrir que alguna de las imágenes que tengas no quieras que se redimensionen (por ejemplo un botón o algún elemento de la cabecera) es decir, aquellas imágenes fuera del contenedor que marca los artículos y elementos como widgets y demás.

Es una buena práctica que utilizamos en nuestros temas. Igualmente, haya algunos plugins interesantes para trabajar con imágenes responsives en WordPress, como PB Responsives Images y Simple Responsives Images.

Conclusiones

Esta todo por hacer. Comprueba que lo único que hemos hecho ha sido convertir una imagen con dimensiones estáticas en una imagen fluida y dinámica. Pero lo importante viene a continuación, ¿Cómo hacer que esas imágenes ocupen menos en resoluciones menores? ¿Es necesario crear 3 copias de la misma imagen y cargarlas según el dispositivo?

Sin duda ese será el siguiente paso y más importante. Ya hemos conseguido una experiencia de usuario mínima viable. Ahora es necesario investigar un paso más. Una web que carga más rápido y llegue al usuario en un tiempo consecuente con una navegación fluida. Lo vemos en los próximos meses. Estad atentos 😉

Comentarios (55)

  1. Me estoy ampliando un poco sobre esto y me viene muy bien todo lo que estoy leyendo en tu blog… sin duda uno de los mejores.

  2. hola que tal amigo, 🙂 me funciono de maravilla pero en internet explorer si uso una imagen local esta no carga 🙁 subido aun hosting si carga :S Me podrias ayudar?

    1. Saludos.

      Es posible que necesites crear un servidor local para que todo funcione correctamente. MAMP o WAMP son buenas alternativas para testar en local diseños y desarrollos.

      Saludos 🙂

  3. hola, me sirven de mucha ayuda tus post, quisiera hacerte una pregunta. Como puedo hacer un menú o header como el de vuestra página? Gracias

  4. Estaba a punto de enviar el trabajo de una semana a la basura por culpa de IE y tu código para imagenes reponsive me ha salvado. Muchisimas gracias por el aporte.

  5. Una pequeña pregunta amigo. Yo hice una página que cuenta con botones que tienen imagen de fondo. Al achicarse los botones la imagen dentro se va achicando pero comiendo. Osea, no se pone más pequeña la imagen sino que parece que la imagen como ya no cabe en el botón, éste se la come. Yo hice los botones en el html con la sentencia

    ¿Qué puedo hacer para que se achique la imagen con el botón sin que el botón se coma la imagen?

    1. Saludos Sócrates,
      Deberás definir para ese background unas medidas (que pueden ser relativas para adaptarse al responsive). Algo así puede vales:

      div.ejemplo {
      background-size: 100% auto;
      background-repeat: no-repeat;
      }

      Un saludo, espero que te sirva!

  6. Hola Ricardo, voy leyendo tus recomendaciones y seguro que son buenisimas, pero como soy un novato en esto de wordpress pues me pierdo. Esto de las resoluciones y el responsive es un lio. En mi pagina el principal problema es que en internet explorer se ve fatal. En tablets y moviles se ha ajustado bastante bien, pero tambien es cierto que no siempre se ajusta todo al ancho. Hablas de programación del CSS, pero a mi siempre me queda la misma duda y es claramente debido a mi ignorancia, pero donde se meten esas lineas de programación.

    Muchisimas gracias y enhorabuena por tu trabajo.

    1. Hola Alejandro.

      Con Internet Explorer siempre hay problemas…y si trabajas con mobile first más aún, pues versiones como la 8 no te van a leer las media queries. Tendrás que usar librerías JS para hacerlo compatible.

      En cuanto a como agrrgar CSS a tu tema WordPress, hay varias opciones. Te recomiendo este artículo con varias opciones. Yo siempre opto por Jetpack para pequeñas modificaciones y por temas hijos para algo más complejo.

      Saludos y suerte! 🙂

  7. Hola Ricardo,

    Tengo una consulta, muy bueno tu post, explicas muy bien. Bueno la pregunta es si cargo la imagen desde el CSS llamando la imagen desde un servidor: Ej: background: url(-); cual es la manera mas fácil y rápida de hacerla responsive? te lo agradecería muchísimo.

    He investigado pero no logro que funcione.

    Saludos.

    1. Hola Daniel, gracias por escribir.

      Con background-size: 100%; ya tendrías buena parte del trabajo resuelto, aunque si el contenedor se modifica en responsive el ancho, pero no el alto, pueden quedar espacios en blanco.
      Combinado con un background-position: center; ya tendríamos algo con lo que empezar 🙂

      Saludos

  8. Muy Bueno el artículo, me sirvió mucho para mi proyecto de TESIS, tan fácil como 2 líneas de código, jajaj :D…
    Saludos..

  9. Gracias por otro gran artículo, a ver si no mezclo conceptos y no me lío, y espero no irme mucho del tema, si es así, perdón. Cuando usas una imagen, no hablo de una de fondo, es buena práctica, recomendable indicar sus dimensiones en el css? Se podría hacer en el html? Sería válido, permitido?

    Un saludo y gracias.

    1. Hola Javi!
      pues lo ideal sería lo siguiente, definir en el HTML las tags height and width propias de la etiqueta img y después dar estilo a dicho elementos mediante CSS (ya sea por max-width, min-width o width, o una combinación de las anteriores).

      Con esto conseguimos que el navegador al renderizar la web deje el espacio reservado para la imagen que hemos definimos en el HTML y siga cargando, y una vez que reciba el CSS le aplica el estilo final. Así la primera visualización de la web es más rápida. WordPress lo hace por defecto, pero en un HTML a pelo debemos hacerlo nosotros. No confundir con introducir en el img estilos CSS en linea (tipo style="width:745px; height:322px;") eso es otra cosa, y mejor todo el CSS junto en nuestra hoja de estilos 🙂

      Un saludo y gracias por comentar!

      1. Muchas gracias, ahora sí que lo tengo mucho más claro, sería añadir a la etiqueta de imagen de html el width y el height, por ejemplo,

        Un abrazo.

  10. Hola Ricardo muchas gracias por tu aporte a la verdad . con esto me ha sacado de muchas de mis dudas y funcionan correctamnte los codigos.bueno ahora tengo unas dudas que se me ha venido en mente de como hacerlo compatible ya con las versiones anteriores de IE 9 , y de como agregarle las librerias paa q funciones correctamente..por favor si orientarme.soy nvato y quiero alimentarme mas con el conocimiento sobre la tecnologia…y una demas gracias

  11. Hola Ricardo, estoy trabajando en un proyecto, metiendole mano a una plantilla de WP, y no hay manera de conseguir que el logo se redimensione para verlo bien en lo iphones, y me niego a ponerlo a menor tamaño para que entre en estas pantallas, y que se vea mucho mas pequeño en el resto de dispositivos mas grandes. Manejo bien HTML y CSS, pero el php de WP me despista mucho 🙁

    Un saludo y gracias!

    1. Saludos Moises, las pantallas de Iphone y otros dispositivos de Apple son retina, por lo que su densidad de píxeles es mayor. Esto puede ser la causa de que la imagen no se muestre correctamante. Para ello tendrás que o bien cargar una segunda imagen para pantallas retina (creo que ya hay plugins para ello) o bien si la estás metiendo por CSS a través de background-image, tendrás que tener una mediaquery específica para este tipo de pantallas como:


      @media (-moz-min-device-pixel-ratio: 1.5),
      (-o-min-device-pixel-ratio: 3/2),
      (-webkit-min-device-pixel-ratio: 1.5),
      (min-device-pixel-ratio: 1.5) {
      }

      Saludos!

  12. Excelente nota, super claro todo.
    Estoy empezando un blog en WORDPRESS, usando GENESIS FRAMEWORK y el CHILD THEME METRO PRO.

    Mi problema es que en la pagina principal, donde aparecen los ultimos post (todavía no subí mas que 1 solo para probar), las imágenes me aparecen cortadas, en vez de redimensionarlas.

    Esto me sirve para solucionarlo??? Donde tendría que insertar el código?
    Espero tu respuesta!

    1. Saludos Juan Pablo,

      no, esto no tiene nada que ver. Tu problema es con los recortes que hace tu tema de las imágenes que subes. Quizás puedas cambiar las dimensiones de las imágenes recortadas en Ajustes > Medios, pero solo si tu tema hace uso de esas medidas en vez de incluir las suyas propias.

      Saludos!

  13. ¿Podría mover el módulo del carrito de alguna forma que se mueva solo en pantallas grandes y no en móviles, con plantilla responsive?

  14. Saludo Ricardo, yo soy nuevo en esto de blog y he estado leyendo tus articulo, tengo una pregunta tal vez sea estúpida pero necesito saber en que lugar de la plantilla se ponen los codigos.

    Gracias de ante mano

  15. Hola, Ricardo.

    Muchas gracias por tus post, para la gente que estamos empezando son de mucha ayuda.
    Quería hacerte una pregunta:
    Estoy haciendo mi tienda online, y tengo dudas sobre la resolución de las imágenes para los productos. De momento, estoy en proceso de preparar todas las fotos y las estoy dejando en 800×600. No sé si será suficiente.
    ¿Serías tan amable de aconsejarme?

    Muchas gracias por todo. Me encanta vuestro blog, vuestros consejos y diseños.

    Un saludo.

    1. Saludos Marta.

      la resolución de las imágenes dependerá del contenedor. Para conocer las dimensiones máximas, puedes usar el inspector de tu navegador para saber que hueco ha reservado tu diseño web a dichas imágenes.
      En cuanto a una referencia, si, 800px es un buen tamaño para ver los detalles del producto.

      Suerte con tu proyecto!

  16. Ricardo, gracias por compartir tu conocimiento. Me ha servido de mucho. Claro y bien explicado. Saludos desde Colombia.

  17. Tengo una duda, tengo unos enlaces los cuales tienen una imagen de fondo que llame desde el css, al intentar cuadrar el responsive en el celular me lee el tamaño de las letras como ancho del enlace, que puedo hacer para que los atributos los tome la imagen y no solo el texto?

    1. Saludos Laura,

      efectivamente en CSS las imágenes de fondo no es un objeto que defina por espacios en el HTML.
      Si quieres que la imagen se siga viendo independientemente de las letras, deberás establecer un ancho min y altura min al enlace, para que sus dimensiones sean independientes del texto.
      Si quieres fijar por completo su tamaño, entonces un ancho y alto fijo.

      Suerte.

  18. Hola Ricardo, cómo podria hacer eso, pero dentro de las líneas de código HTML. Estoy usando WordPress y lo estoy aplicando dentro de un WIDGET. No puedo utilizar CSS en este caso (creo). Gracias!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *