Imágenes responsivas

Una imagen vale más que mil palabras y las imágenes son parte integral de las páginas. Sin embargo, a menudo también representan la mayor parte de los bytes descargados. Con el diseño web responsivo, no solo nuestros diseños pueden cambiar según las características del dispositivo, sino también las imágenes.

Pete LePage

El diseño web responsivo implica que no solo nuestros diseños pueden cambiar según las características del dispositivo, sino también el contenido. Por ejemplo, en pantallas de alta resolución (2x), los gráficos de alta resolución garantizan nitidez. Una imagen que tiene el 50% del ancho puede funcionar bien cuando el navegador tiene 800 px de ancho, pero también usa demasiado espacio en pantalla y requiere la misma sobrecarga de ancho de banda cuando se reduce para adecuarse a una pantalla más pequeña.

Dirección artística

En otras ocasiones, puede ser necesario un cambio más drástico en la imagen: cambio de proporciones, recortes e incluso reemplazo de la imagen completa. En este caso, el cambio de imagen se suele denominar “dirección artística”. Consulta responsiveimages.org/demos/ para ver más ejemplos.

Imágenes responsivas

¿Sabías que las imágenes representan más del 60% de los bytes necesarios en promedio para cargar una página web?

En este curso, aprenderás a trabajar con imágenes en la Web moderna para que tus imágenes se vean geniales y se carguen rápidamente en cualquier dispositivo.

En el camino, adquirirás una variedad de habilidades y técnicas para integrar sin problemas las imágenes responsivas en tu flujo de trabajo de desarrollo. Al final del curso, estarás desarrollando con imágenes que se adapten y respondan a diferentes tamaños de viewport y situaciones de uso.

Este es un curso gratuito que se ofrece a través de Udacity.

Hacer el curso

Imágenes en lenguaje de marcado

El elemento img es potente: descarga, decodifica y representa contenido. Los navegadores modernos son compatibles con una amplia variedad de formatos de imagen. Incluir imágenes que funcionen en varios dispositivos no es diferente para el escritorio y solo requiere algunos ajustes menores para crear una buena experiencia.

Resumen

• Usa tamaños relativos para las imágenes a fin de evitar que accidentalmente excedan la capacidad del contenedor.
• Usa el elemento picture cuando quieras especificar distintas imágenes según las características del dispositivo (también conocido como dirección artística).
• Usa srcset y el descriptor x en el elemento img para proporcionarle sugerencias al navegador sobre cuál es la mejor imagen cuando se deba elegir entre distintas densidades.
• Si tu página solo tiene una o dos imágenes, y no se utilizan en ninguna otra parte del sitio, es buena idea usar imágenes incluidas por referencia para disminuir las solicitudes de archivo.

Usa tamaños relativos para imágenes

Recuerda usar unidades relativas cuando se especifican los anchos de las imágenes a fin de evitar que accidentalmente excedan la ventana de visualización. Por ejemplo, width: 50%; hace que el ancho de la imagen sea el 50% del elemento contenedor (no el 50% de la ventana de visualización ni el 50% del tamaño de píxeles real).

Dado que CSS permite que el contenido exceda la capacidad de su contenedor, es posible que debas usar max-width: 100% para evitar que las imágenes y otros contenidos excedan la capacidad. Por ejemplo:

img, embed, object, video {
    max-width: 100%;
}

Asegúrate de proporcionar descripciones significativas a través del atributo alt en los elementos img. Estas aportan más accesibilidad a tu sitio al proporcionar contexto a los lectores de pantalla y a otras tecnologías de accesibilidad.

Mejora los img con srcset para dispositivos con altos valores de PPP

El atributo srcset mejora el comportamiento del elemento img, lo que facilita la entrega de varios archivos de imagen para diferentes características de dispositivos. Similar a la función de CSS image-set nativa de CSS, srcset permite que el navegador elija la mejor imagen según las características del dispositivo; por ejemplo, el uso de una imagen de 2x en una pantalla de 2x y, posiblemente en el futuro, una imagen de 1x en un dispositivo de 2x en una red con un ancho de banda limitado.

<img src="photo.png" srcset="[e-mail] 2x" ...>

En navegadores que no son compatibles con srcset, el navegador simplemente usa el archivo de imagen predeterminado especificado por el atributo src. Por esta razón, siempre es importante incluir una imagen de 1x que se pueda mostrar en cualquier dispositivo, independientemente de las capacidades. Cuando se admite srcset, la lista de imágenes o condiciones separadas por comas se analiza antes de realizar cualquier solicitud, y solo se descarga y se muestra la imagen más apropiada.

Si bien las condiciones pueden incluir desde densidad de píxeles hasta ancho y altura, solo la densidad de píxeles cuenta con una buena compatibilidad hoy en día. Para equilibrar el comportamiento actual con funciones futuras, continúa proporcionando simplemente la imagen de 2x en el atributo.

Dirección artística en imágenes responsivas con picture

Para cambiar las imágenes según las características del dispositivo, también conocido como dirección artística, usa el elemento picture. El elemento picture define una solución declarativa para proporcionar varias versiones de una imagen según diferentes características, como el tamaño del dispositivo, su resolución, la orientación y mucho más.

Nota: El elemento picture está comenzando a implementarse en navegadores. Aunque aún no está disponible en todos los navegadores, recomendamos usarlo debido a la sólida compatibilidad con versiones anteriores y al potencial uso del polyfill de Picturefill. Consulta el sitio ResponsiveImages.org para obtener más información.

Usa el elemento picture cuando una fuente de imagen exista en varias densidades o cuando un diseño responsivo imponga una imagen un tanto diferente en algunos tipos de pantallas. Al igual que con el elemento video, se pueden incluir varios elementos source, lo que permite especificar diferentes archivos de imagen según las consultas de medios o el formato de imagen.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Probar

En el ejemplo anterior, si el ancho del navegador es de al menos 800 px, se usa head.jpg o head-2x.jpg, según la resolución del dispositivo. Si el navegador mide entre 450 px y 800 px, se usa head-small.jpg o head-small- 2x.jpg, según la resolución del dispositivo. Para anchos de pantalla de menos de 450 px y retrocompatibilidad en los que no se admite el elemento picture, el navegador renderiza el elemento img y siempre se debe incluir.

Imágenes de tamaño relativo

Cuando no se conoce el tamaño final de la imagen, puede resultar difícil especificar un descriptor de densidad para las fuentes de imágenes. Esto es particularmente cierto para las imágenes que abarcan un ancho proporcional al navegador y son fluidas, según el tamaño del navegador.

En lugar de proporcionar densidades y tamaños de imagen fijos, puedes especificar el tamaño de cada imagen proporcionada. Para ello, agrega un descriptor de ancho junto con el tamaño del elemento de imagen, lo que permite que el navegador calcule automáticamente la densidad de píxeles efectiva y elija la mejor imagen para descargar.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Probar

En el ejemplo anterior, se representa una imagen que es la mitad del ancho de la ventana de visualización (sizes="50vw") y, según el ancho del navegador y la relación de píxeles del dispositivo, permite que el navegador elija la imagen correcta, independientemente de cuán grande sea la ventana del navegador. Por ejemplo, en la siguiente tabla, se muestra la imagen que elegiría el navegador:

Ancho del navegador	Proporción de píxeles del dispositivo	Imagen utilizada	Resolución eficaz
400 px	1	200.jpg	1x
400 px	2	400.jpg	2x
320 px	2	400.jpg	2.5x
600 px	2	800.jpg	2.67x
640 px	3	1000.jpg	3.125x
1,100 px	1	800.png	1.45x

Considera los puntos de interrupción en imágenes responsivas

En muchos casos, el tamaño de la imagen puede variar según los puntos de interrupción de diseño del sitio. Por ejemplo, en una pantalla pequeña, es posible que desees que la imagen cubra todo el ancho de la ventana de visualización, mientras que en pantallas más grandes solo debe ocupar una proporción pequeña.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Probar

En el ejemplo anterior, el atributo sizes usa varias consultas de medios para especificar el tamaño de la imagen. Cuando el ancho del navegador es superior a 600 px, la imagen es el 25% del ancho de la ventana de visualización; cuando es entre 500 px y 600 px, la imagen es el 50% del ancho de la ventana de visualización; y cuando es inferior a 500 px, es el 100% del ancho.

Haz que las imágenes de producto sean expandibles

J. Sitio web de J. Crew con imágenes expandibles del producto.

Los clientes quieren ver lo que comprarán. En los sitios de venta minorista, los usuarios esperan poder ver primeros planos en alta resolución de los productos para poder observar mejor los detalles, y quienes participaron del estudio se sintieron frustrados cuando no pudieron hacerlo.

El sitio web de J. Sitio de la tripulación. Una superposición que desaparece indica que una imagen tiene capacidad táctil. Esto hace posible una imagen con zoom en la que se pueden ver detalles finos.

Otras técnicas de imagen

Imágenes de compresión

La técnica de imágenes de compresión proporciona una imagen de 2x muy comprimida a todos los dispositivos, independientemente de las capacidades reales del dispositivo. Según el tipo de imagen y el nivel de compresión, la calidad de la imagen no parecerá cambiar, pero el tamaño del archivo se reducirá de manera considerable.

Probar

Precaución: Ten cuidado con la técnica de compresión, ya que requiere más memoria y capacidad de decodificación. Cambiar el tamaño de imágenes grandes para adecuarlas a pantallas más pequeñas demanda recursos y puede resultar particularmente difícil en dispositivos de gama baja donde la memoria y el procesamiento son limitados.

Reemplazo de imágenes de JavaScript

El reemplazo de imágenes de JavaScript verifica las capacidades del dispositivo y “hace lo correcto”. Puedes determinar la relación de píxeles del dispositivo a través de window.devicePixelRatio, obtener el ancho y la altura de la pantalla e incluso posiblemente examinar algunas conexiones de red a través de navigator.connection o emitiendo una solicitud falsa. Cuando hayas recopilado toda esta información, podrás decidir qué imagen cargar.

Una gran desventaja de este enfoque es que el uso de JavaScript implica que retrasarás la carga de imágenes hasta que, al menos, el analizador de lectura previa haya terminado. Esto significa que incluso las imágenes no comenzarán a descargarse hasta después de que se active el evento pageload. Además, el navegador seguramente descargará imágenes de 1x y 2x, lo cual aumentará el volumen de la página.

Inserción de imágenes: de trama y vectoriales

Existen dos formas fundamentalmente diferentes de crear y almacenar imágenes, y esto influye en la manera de implementar imágenes responsivas.

Imágenes de trama: como fotografías y otras imágenes, se representan como una cuadrícula de puntos de color individuales. Las imágenes de trama pueden provenir de una cámara o un escáner, o se pueden haber creado con el elemento canvas de HTML. Para almacenar imágenes de trama, se usan formatos como PNG, JPEG y WebP.

Las imágenes vectoriales, como los logotipos y el arte lineal, se definen como un conjunto de curvas, líneas, formas, colores de relleno y gradientes. Las imágenes vectoriales se pueden crear con programas como Adobe Illustrator o Inkscape, o de manera manual en código con un formato vectorial como SVG.

SVG

SVG permite incluir gráficos vectoriales responsivos en una página web. La ventaja de los formatos de archivo vectoriales respecto de los formatos de archivo de trama es que el navegador puede renderizar una imagen vectorial en cualquier tamaño. Los formatos vectoriales describen la geometría de la imagen: cómo se construye a partir de líneas, curvas, colores, etc. Los formatos de trama, en cambio, solo tienen información sobre puntos individuales de color. Por lo tanto, el navegador debe calcular la forma de completar los espacios en blanco al realizar el ajuste.

A continuación, se muestran dos versiones de la misma imagen: una imagen PNG a la izquierda y un archivo SVG a la derecha. El archivo SVG se ve muy bien en cualquier tamaño, mientras que la imagen PNG junto a este comienza a verse borrosa en pantallas más grandes.

Si deseas reducir el número de solicitudes de archivo que realiza tu página, puedes codificar imágenes en línea con el formato SVG o de URI de datos. Si consultas el código fuente de esta página, verás que los siguientes logotipos se declaran incluidos por referencia: un URI de datos y un SVG.

El archivo SVG ofrece gran compatibilidad en dispositivos móviles y computadoras, y las herramientas de optimización pueden reducir de manera significativa el tamaño del archivo SVG. Los dos logotipos SVG siguientes en línea parecen idénticos, pero uno tiene un tamaño aproximado de 3 KB y el otro solo ocupa 2 KB:

URI de datos

Los URI de datos proporcionan una forma de incluir un archivo, como una imagen, de manera intercalada configurando el src de un elemento img como una cadena codificada en base64 con el siguiente formato:

<img src="data:image/svg+xml;base64,[data]">

El comienzo del código para el logotipo HTML5 presentado arriba tiene el siguiente aspecto:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(La versión completa tiene más de 5,000 caracteres de extensión).

Se encuentran disponibles herramientas de arrastrar y soltar, como jpillora.com/base64-encoder, para convertir archivos binarios como imágenes en URI de datos. Al igual que los archivos SVG, los URI de datos son muy compatibles con dispositivos móviles y navegadores de escritorio.

Inserción en CSS

Los URI de datos y los archivos SVG también se pueden incluir por referencia en CSS, y esto se admite en dispositivos móviles y equipos de escritorio. A continuación, se muestran dos imágenes idénticas que se implementaron como imágenes de fondo en CSS (un URI de datos y un SVG):

Ventajas y desventajas de la inclusión por referencia

El código intercalado para imágenes puede ser detallado (en especial los URI de datos). ¿Para qué querrías usarlo? Para reducir las solicitudes HTTP Los archivos SVG y los URI de datos pueden permitir la recuperación de todos los elementos de una página web, como las imágenes y el lenguaje CSS y JavaScript, con una sola solicitud.

Las desventajas son las siguientes:

• En dispositivos móviles, los URI de datos pueden tardar un tiempo considerablemente mayor en aparecer en dispositivos móviles cuando se comparan con imágenes de un src externo.
• Los URIs de datos pueden aumentar considerablemente el tamaño de una solicitud HTML.
• Agregan complejidad a tu lenguaje de marcado y a tu flujo de trabajo.
• El formato de los URI de datos es considerablemente más grande que el ejecutable (hasta un 30%). Por lo tanto, no reduce el tamaño total de descarga.
• Los URI de datos no pueden almacenarse en caché. Por ello, deben descargarse para cada página en la que se usen.
• No son compatibles con IE 6 y 7, y la compatibilidad con IE 8 no es completa.
• Con HTTP/2, la reducción de la cantidad de solicitudes de recursos dejará de ser una prioridad.

Como todo lo que sea responsivo, es necesario probar cuál es la mejor opción. Usa herramientas para desarrolladores para medir el tamaño del archivo de descarga, la cantidad de solicitudes y la latencia total. A veces, los URI de datos pueden ser útiles para imágenes de trama, por ejemplo, en una página principal que solo tenga una o dos fotos que no se usen en otro lugar. Si necesitas insertar imágenes vectoriales, SVG es una opción mucho mejor.

Imágenes en CSS

La propiedad background de CSS es una herramienta potente para agregar imágenes complejas a los elementos, lo cual facilita la adición de varias imágenes y hace que se repitan, entre otros aspectos. Cuando se combina con consultas de medios, la propiedad background se vuelve aún más poderosa. Esto permite la carga condicional de imágenes según la resolución de pantalla, el tamaño de la vista del puerto, y otras características.

Resumen

• Usa la imagen que mejor se adapte a las características de la pantalla. Ten en cuenta el tamaño de la pantalla, la resolución del dispositivo y el diseño de la página.
• Cambia la propiedad background-image en CSS para pantallas de alta densidad de píxeles a través de consultas de medios con min-resolution y -webkit-min-device-pixel-ratio.
• Usa srcset para proporcionar imágenes de alta resolución además de la imagen 1x en lenguaje de marcado.
• Ten en cuenta los costos de rendimiento cuando uses técnicas de reemplazo de imágenes en JavaScript o cuando proporciones imágenes de alta resolución muy comprimidas a dispositivos de baja resolución.

Usa consultas de medios para la carga condicional de imágenes o la dirección artística

Las consultas de medios no solo afectan el diseño de la página: puedes usarlas para cargar imágenes de forma condicional o para proporcionar dirección artística según el ancho de la ventana de visualización.

Por ejemplo, en el siguiente ejemplo, en pantallas más pequeñas, solo se descarga y aplica small.png al contenido div, mientras que en pantallas más grandes, se aplica background-image: url(body.png) al cuerpo y background-image: url(large.png) al contenido div.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Probar

Usa image-set para proporcionar imágenes de alta resolución

La función image-set() en CSS mejora el comportamiento de la propiedad background, lo que facilita la entrega de varios archivos de imagen para diferentes características de dispositivos. Esto permite que el navegador elija la mejor imagen según las características del dispositivo; por ejemplo, el uso de una imagen de 2x en una pantalla de 2x, o una imagen de 1x en un dispositivo de 2x en una red con un ancho de banda limitado.

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

Además de cargar la imagen correcta, el navegador también la adapta según corresponda. En otras palabras, el navegador supone que las imágenes de 2x duplican en tamaño a las imágenes de 1x. Por lo tanto, reduce la escala de la imagen de 2x por un factor de 2, de modo que la imagen parezca tener el mismo tamaño en la página.

La compatibilidad con image-set() aún es nueva y solo es compatible con Chrome y Safari con el prefijo de proveedor -webkit. No olvides incluir una imagen de resguardo para cuando no se admita image-set(). Por ejemplo:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

Probar

El código anterior cargará el recurso correspondiente en navegadores compatibles con image-set; de lo contrario, regresará al recurso 1x. La advertencia predecible supone que mientras la compatibilidad con navegadores deimage-set() sea baja, la mayoría de los navegadores obtendrán el recurso 1x.

Usa consultas de medios para proporcionar imágenes de alta resolución o dirección artística

Las consultas de medios pueden crear reglas según la relación de píxeles del dispositivo, lo que permite especificar diferentes imágenes para pantallas 2x en comparación con pantallas 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox y Opera admiten el (min-resolution: 2dppx) estándar, mientras que Safari y Android requieren la sintaxis con prefijo del proveedor anterior sin la unidad dppx. Recuerda que estos estilos solo se cargan si el dispositivo se adecua a la solicitud de medios y que debes especificar los estilos para el caso básico. Esto también proporciona el beneficio de garantizar la representación de un elemento si el navegador no admite consultas de medios sobre resolución.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Probar

También puedes usar la sintaxis de ancho mínimo para mostrar imágenes alternativas que dependan del tamaño de la ventana de visualización. La ventaja de esta técnica es que la imagen no se descarga si la consulta de medios no coincide. Por ejemplo, bg.png solo se descarga y se aplica a body si el ancho del navegador es de 500 px o superior:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

Usa SVG para íconos

Cuando agregues íconos a tu página, usa SVG cuando sea posible o, en algunos casos, caracteres Unicode.

Resumen

• Usa SVG o Unicode para los íconos en lugar de imágenes de trama.

Reemplaza íconos simples por Unicode

Muchas fuentes incluyen compatibilidad con los numerosos glifos unicode, que se pueden usar en lugar de imágenes. A diferencia de las imágenes, las fuentes Unicode se ajustan a escala de manera correcta y se ven bien sin importar cuán pequeñas o grandes se vean en la pantalla.

Además del conjunto normal de caracteres, Unicode puede incluir símbolos para flechas (←), operadores matemáticos (√), formas geométricas (★), imágenes de control (▶), notación musical (♬), letras griegas (Ω) y hasta piezas de ajedrez (♞).

Un carácter Unicode se incluye del mismo modo que las entidades nombradas:&#XXXX, donde XXXX representa el número de carácter Unicode. Por ejemplo:

You're a super ★

Eres un super ★

Reemplaza íconos complejos por SVG

Para requisitos de íconos más complejos, los íconos SVG son por lo general ligeros y fáciles de usar, y pueden recibir ajustes de estilo con CSS. SVG tiene varias ventajas sobre las imágenes de trama:

• Son gráficos vectoriales que se pueden ajustar a escala de manera infinita.
• Los efectos CSS, como el color, el sombreado, la transparencia y las animaciones, son simples.
• Las imágenes SVG se pueden incluir por referencia directamente en el documento.
• Son semánticos.
• Proporcionan una mejor accesibilidad con los atributos adecuados.

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Probar

Usa fuentes de íconos con precaución

Ejemplo de una página que usa FontAwesome para sus íconos de fuente.

Las fuentes de íconos son populares y pueden ser fáciles de usar, pero tienen algunas desventajas en comparación con los íconos SVG:

• Son gráficos vectoriales que se pueden ajustar a escala de manera infinita, pero se pueden suavizar. Esto hace que los íconos no sean tan definidos como se espera.
• Ajuste de estilos limitados con CSS.
• Lograr un posicionamiento de píxeles ideal puede resultar difícil, según la altura de línea, el espaciado de letras, entre otros aspectos.
• No son semánticos y pueden ser difícil de usar en lectores de pantalla o otra tecnología de accesibilidad.
• A menos que su ámbito sea apropiado, pueden hacer que se amplíe el tamaño de los archivos para usar únicamente un subconjunto pequeño de los íconos disponibles.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Probar

Hay cientos de fuentes de íconos gratuitas y pagadas disponibles, como Font Awesome, Pictos y Glyphicons.

Asegúrate de equilibrar el peso de la solicitud HTTP adicional y el tamaño del archivo con la necesidad de íconos. Por ejemplo, si solo necesitas algunos íconos, tal vez sea mejor usar una imagen o un sprite de imagen.

Optimiza las imágenes para mejorar el rendimiento

A menudo, las imágenes representan la mayor parte de los bytes descargados y también ocupan una considerable proporción del espacio visual de la página. Como resultado, la optimización de imágenes a menudo puede significar uno de los medios de ahorro de bytes y mejora de rendimiento más eficaces para tu sitio web. Cuantos menos bytes deba descargar el navegador, menor será la exigencia para el ancho de banda del cliente y mayor la velocidad a la que el navegador podrá descargar y mostrar todos los recursos.

Resumen

• No elijas un formato de imagen de forma aleatoria: debes conocer los distintos formatos disponibles y usar el más adecuado.
• Para reducir el tamaño de los archivos, incluye herramientas de optimización y compresión de imágenes en tu flujo de trabajo.
• Para disminuir la cantidad de solicitudes HTTP, reemplaza las imágenes usadas frecuentemente con image sprites.
• Para mejorar el tiempo de carga inicial de la página y disminuir su peso inicial, considera cargar las imágenes solo después de que se hayan desplazado hasta la vista.

Elige el formato correcto

Hay dos tipos de imágenes que debes considerar: imágenes vectoriales y imágenes de trama. Para las imágenes de trama, también debes elegir el formato de compresión correcto, por ejemplo, GIF, PNG y JPG.

Las imágenes de trama, como fotografías y otras imágenes, se representan como una cuadrícula de píxeles o puntos individuales. Las imágenes de trama por lo general provienen de cámaras o escáneres, o pueden crearse en el navegador con el elemento canvas. A medida que aumenta el tamaño de la imagen, también aumenta el tamaño del archivo. Cuando se ajustan a un tamaño mayor que el original, las imágenes de trama se vuelven borrosas porque el navegador debe adivinar cómo completar los píxeles faltantes.

Las imágenes vectoriales, como los logotipos y el arte lineal, se definen como un conjunto de curvas, líneas, formas y colores de relleno. Las imágenes vectoriales se crean con programas como Adobe Illustrator o Inkscape y se guardan en un formato vectorial como SVG. Debido a que las imágenes vectoriales se basan en primitivas simples, se pueden cambiar de tamaño sin perder calidad ni cambiar el tamaño del archivo.

Cuando elijas el formato adecuado, es importante tener en cuenta tanto el origen de la imagen (trama o vector) como el contenido (colores, animación, texto, etc.). No hay un formato que se adecue a todos los tipos de imagen; todos tienen sus ventajas y desventajas.

Para elegir el formato adecuado, comienza con estas pautas:

• Usa JPG para imágenes fotográficas.
• Usa SVG para arte vectorial y gráficos de colores sólidos, como los de logotipos y arte lineal. Si el arte vectorial no está disponible, prueba WebP o PNG.
• Usa PNG en lugar de GIF, ya que permite más colores y ofrece mejores relaciones de compresión.
• Para animaciones más prolongadas, considera usar <video>, que proporciona una mejor calidad de imagen y le permite al usuario controlar la reproducción.

Reduce el tamaño del archivo

Puedes disminuir considerablemente el tamaño del archivo de imagen si realizas un “procesamiento posterior” de las imágenes después de guardarlas. Existen varias herramientas para la compresión de imagen: con pérdida y sin pérdida, en línea, GUI y línea de comandos. Cuando sea posible, será mejor intentar automatizar la optimización de imágenes para que esté integrada en tu flujo de trabajo.

Hay disponibles varias herramientas que realizan más compresión sin pérdidas en archivos JPG y PNG, sin efectos en la calidad de la imagen. Para JPG, prueba jpegtran o jpegoptim (disponible solo en Linux; ejecútalo con la opción --strip-all). Para PNG, prueba OptiPNG o PNGOUT.

Usa sprites de imagen

El uso de sprites de imágenes de CSS es una técnica mediante la cual varias imágenes se combinan en una sola imagen de “hoja de sprites”. A continuación, puedes usar imágenes individuales si especificas la imagen de fondo de un elemento (la hoja de sprites) además de un desplazamiento para mostrar la parte correcta.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Probar

El uso de sprites de imágenes tiene la ventaja de reducir el número de descargas necesarias para obtener varias imágenes y, al mismo tiempo, permitir el almacenamiento en caché.

Considera la carga diferida

La carga diferida puede acelerar de manera considerable la carga en páginas largas que incluyan muchas imágenes en la mitad inferior al cargarlas según sea necesario o una vez que haya finalizado la carga y la representación del contenido principal. Además de mejoras en el rendimiento, el uso de la carga diferida puede generar experiencias de desplazamiento infinito.

Ten cuidado cuando crees páginas con desplazamiento infinito, ya que el contenido se carga a medida que se muestra; es posible que los motores de búsqueda nunca lo detecten. Además, los usuarios que buscan información que esperan ver en el pie de página nunca lo ven porque siempre se carga contenido nuevo.

Evita las imágenes por completo

A veces, la mejor imagen no es una imagen. Cuando sea posible, usa las capacidades nativas del navegador para proporcionar la misma funcionalidad o una similar. Los navegadores generan elementos visuales para los cuales previamente podrían haber sido necesarias imágenes. Esto significa que los navegadores ya no necesitan descargar archivos de imagen separados, lo cual evita imágenes que no se ajusten de forma adecuada. Puedes usar unicode o fuentes especiales de íconos para representar íconos.

Coloca texto en lenguaje de marcado y no en imágenes

Siempre que sea posible, el texto debe ser texto y no debe incorporarse a imágenes. Por ejemplo, si usas imágenes para los encabezados o colocas información de contacto (como números de teléfono o direcciones) directamente en imágenes, los usuarios no podrán copiar ni pegar la información, los lectores de pantalla no podrán acceder a los datos y la información no será responsiva. Como alternativa, ubica el texto en tu lenguaje de marcado y, si es necesario, usa fuentes web para alcanzar el estilo que necesitas.

Usa CSS para reemplazar imágenes

Los navegadores modernos pueden usar funciones de CSS para crear estilos que antes hubiesen requerido imágenes. Por ejemplo, se pueden crear degradados complejos con la propiedad background, se pueden colocar sombras con box-shadow y se pueden agregar esquinas redondeadas con la propiedad border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

Ten en cuenta que para usar estas técnicas se necesitan ciclos de renderización, que pueden ser significativos en dispositivos móviles. Si los utilizas demasiado, perderás los beneficios que hayas obtenido y es posible que disminuya el rendimiento.