Imágenes Responsivas: 5 Trucos CSS para Ahorrar Tiempo

Un desarrollador web tiene dos enemigos: los plazos y las imágenes. ¡Deja de intentar meter una imagen en tu diseño! Aquí tienes 5 métodos para tener un control total sobre los gráficos.

Si te has encontrado con imágenes difíciles que no se ajustan a tu diseño, estas técnicas seguro que te ayudarán.

Solución Rápida

¡Con un simple movimiento de la mano, la imagen se transforma en un fondo elegante!

.myImg {
  background-image: url("my-image.png");
  background-size: cover;
}

Todos hemos utilizado este truco alguna vez, ¿verdad?

La propiedad background funciona perfectamente, pero recuerda que debes usarla solo para imágenes que no sean parte del contenido y en algunos casos especiales.

Solución del Futuro

La etiqueta <img> también tiene una propiedad maravillosa: object-fit. Por cierto, también funciona con contenedores de vídeo.

.myImg {
  object-fit: cover;
  width: 320px;
  height: 180px;
}

¡Y eso es todo! object-fit controla el posicionamiento del elemento si el ancho y la altura son diferentes a su tamaño real. En lugar de cover, puedes usar el valor contain.

Desafortunadamente, la propiedad no funciona en IE ni en versiones antiguas de Safari, pero para ellas existe un polifill.

See the Pen Responsive images #2 by Alex (@htmldesdecero) on CodePen.

Solución de Netflix

Este truco funciona en todos los navegadores y solo requiere que se envuelva la imagen en un contenedor adicional. Las proporciones se mantienen mediante rellenos especificados en porcentajes y la imagen se posiciona absolutamente.

.wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

Esta técnica puede parecer compleja, pero vale la pena dedicar tiempo a comprenderla. ¡Muchos sitios web la utilizan, incluyendo Netflix!

Pequeño ejemplo de demostración:

See the Pen Responsive images #3 by Alex (@htmldesdecero) on CodePen.

Solución Sencilla

Probablemente ya la conozcas y la hayas usado varias veces:

img {
  height: auto;
  width: 100%;
  /* aún más control con max-width */
  max-width: 720px;
}

Si tu diseño no es demasiado complejo, puedes utilizar esta técnica en cualquier parte.

See the Pen Responsive images #4 by Alex (@htmldesdecero) on CodePen.

Solución Avanzada

Además de ser la más eficaz, si hablamos de tiempo de carga. Una imagen pesada puede ralentizar significativamente tu página web, especialmente en dispositivos móviles.

En los navegadores modernos, la dirección de la imagen puede cambiar en función del ancho de la ventana. ¡Para ello existe el atributo srcset!

Se puede combinar con la etiqueta HTML5 <picture>, que proporciona una degradación elegante hasta un simple <img>.

<picture>
 <source media="(max-width: 799px)" srcset="elva-480w.jpg">
 <source media="(min-width: 800px)" srcset="elva-800w.jpg">
 <img src="elva-800w.jpg">
</picture>

See the Pen Responsive images #5 by Alex (@htmldesdecero) on CodePen.

Imágenes adaptativas

• Usa background-image si la imagen no forma parte del contenido de la página.
• Usa object-fit si no necesitas soporte para IE.
• La técnica del contenedor con rellenos, usada por Netflix, funciona en todos los navegadores.
• En la mayoría de los casos, basta con añadir la propiedad height: auto.
• Si necesitas rendimiento, utiliza srcset para cargar imágenes pequeñas en pantallas pequeñas.