Imágenes responsivas

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

Pete LePage

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

Dirección de arte

En otras ocasiones, es posible que la imagen deba cambiarse de forma más drástica: cambiar las proporciones, recortar y, incluso, reemplazar toda la imagen. En este caso, cambiar la imagen suele denominarse dirección de arte. Consulta responsiveimages.org/demos/ para ver más ejemplos.

Imágenes responsivas

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

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

En el proceso, 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, desarrollarás con imágenes que se adaptan y responden a diferentes tamaños de viewport y situaciones de uso.

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

Realizar curso

Imágenes en el lenguaje de marcado

El elemento img es potente: descarga, decodifica y renderiza contenido, y los navegadores actualizados admiten una variedad de formatos de imagen. Incluir imágenes que funcionen en todos los dispositivos no es diferente de lo que se hace para computadoras de escritorio, y solo requiere algunos ajustes menores para crear una buena experiencia.

Resumen

• Usa tamaños relativos para las imágenes para evitar que se desborden accidentalmente del contenedor.
• Usa el elemento picture cuando quieras especificar diferentes imágenes según las características del dispositivo (también conocido como dirección de arte).
• Usa srcset y el descriptor x en el elemento img para darle sugerencias al navegador sobre la mejor imagen que puede usar cuando elige entre diferentes densidades.
• Si tu página solo tiene una o dos imágenes, y estas no se usan en ningún otro lugar de tu sitio, considera usar imágenes intercaladas para reducir las solicitudes de archivos.

Usa tamaños relativos para las imágenes

Recuerda usar unidades relativas cuando especifiques los anchos de las imágenes para evitar que se desborden accidentalmente del viewport. Por ejemplo, width: 50%; hace que el ancho de la imagen sea el 50% del elemento contenedor (no el 50% del viewport ni el 50% del tamaño real en píxeles).

Debido a que CSS permite que el contenido desborde su contenedor, es posible que debas usar max-width: 100% para evitar que las imágenes y otro contenido se desborden. 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. Esto ayuda a que tu sitio sea más accesible, ya que proporciona contexto a los lectores de pantalla y otras tecnologías de accesibilidad.

Mejora los img con srcset para dispositivos con DPI alto

El atributo srcset mejora el comportamiento del elemento img, lo que facilita proporcionar varios archivos de imagen para diferentes características del dispositivo. Al igual que 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, usar una imagen de 2x en una pantalla de 2x y, posiblemente, en el futuro, una imagen de 1x en un dispositivo de 2x cuando se encuentre en una red de ancho de banda limitado.

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

En los navegadores que no admiten srcset, el navegador simplemente usa el archivo de imagen predeterminado especificado por el atributo src. Por este motivo, es importante incluir siempre una imagen de 1x que se pueda mostrar en cualquier dispositivo, independientemente de sus capacidades. Cuando se admite srcset, la lista separada por comas de imágenes/condiciones se analiza antes de realizar cualquier solicitud, y solo se descarga y muestra la imagen más adecuada.

Si bien las condiciones pueden incluir desde la densidad de píxeles hasta el ancho y la altura, hoy en día solo se admite la densidad de píxeles. Para equilibrar el comportamiento actual con las funciones futuras, simplemente proporciona la imagen de 2x en el atributo.

Dirección de arte en imágenes responsivas con picture

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

Nota: El elemento picture está comenzando a llegar a los navegadores. Aunque todavía no está disponible en todos los navegadores, recomendamos su uso debido a la sólida retrocompatibilidad y al posible uso del polyfill de Picturefill. Consulta el sitio ResponsiveImages.org para obtener más detalles.

Usa el elemento picture cuando exista una fuente de imagen en varias densidades o cuando un diseño responsivo dicte una imagen un poco diferente en algunos tipos de pantallas. Al igual que 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 tiene 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 inferiores a 450 px y retrocompatibilidad en los que no se admite el elemento picture, el navegador renderiza el elemento img en su lugar, y siempre se debe incluir.

Imágenes de tamaño relativo

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

En lugar de proporcionar tamaños y densidades de imagen fijos, puedes especificar el tamaño de cada imagen proporcionada agregando 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 renderiza una imagen que tiene la mitad del ancho del viewport (sizes="50vw") y, según el ancho del navegador y la proporción de píxeles del dispositivo, permite que el navegador elija la imagen correcta, independientemente del tamaño de la ventana del navegador. Por ejemplo, en la siguiente tabla, se muestra qué imagen elegiría el navegador:

Ancho del navegador	Proporción de píxeles del dispositivo	Imagen utilizada	Resolución efectiva
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
1100px	1	800.png	1.45x

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

En muchos casos, el tamaño de la imagen puede cambiar según los puntos de interrupción del diseño del sitio. Por ejemplo, en una pantalla pequeña, es posible que quieras que la imagen abarque todo el ancho del viewport, mientras que, en pantallas más grandes, solo debería ocupar una pequeña proporción.

<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 ocupa el 25% del ancho del viewport; cuando es de entre 500 px y 600 px, la imagen ocupa el 50% del ancho del viewport; y, por debajo de 500 px, ocupa todo el ancho.

Permite que las imágenes de los productos se puedan expandir

J. Sitio web de Crew con una imagen de producto expandible.

Los clientes quieren ver lo que compran. En los sitios de venta minorista, los usuarios esperan poder ver primeros planos de alta resolución de los productos para observar mejor los detalles, y los participantes del estudio se frustraron cuando no pudieron hacerlo.

Un buen ejemplo de imágenes expandibles que se pueden presionar es el de J. Sitio de Crew. Una superposición que desaparece indica que se puede presionar una imagen, lo que proporciona una imagen ampliada con detalles visibles.

Otras técnicas de imagen

Imágenes de compresión

La técnica de imagen de compresión entrega una imagen 2x muy comprimida a todos los dispositivos, sin importar las capacidades reales del dispositivo. Según el tipo de imagen y el nivel de compresión, es posible que la calidad de la imagen no parezca cambiar, pero el tamaño del archivo se reduce de forma significativa.

Probar

Precaución: Ten cuidado con la técnica de compresión debido al aumento de los costos de memoria y decodificación que requiere. Cambiar el tamaño de las imágenes grandes para que se ajusten a pantallas más pequeñas es costoso y puede ser especialmente difícil en dispositivos de gama baja, en los que la memoria y el procesamiento son limitados.

Reemplazo de imágenes con JavaScript

El reemplazo de imágenes de JavaScript verifica las capacidades del dispositivo y "hace lo correcto". Puedes determinar la proporción de píxeles del dispositivo a través de window.devicePixelRatio, obtener el ancho y la altura de la pantalla, y hasta detectar la conexión de red a través de navigator.connection o emitir una solicitud falsa. Cuando hayas recopilado toda esta información, podrás decidir qué imagen cargar.

Un gran inconveniente 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 anticipación haya finalizado. Esto significa que las imágenes ni siquiera comenzarán a descargarse hasta que se active el evento pageload. Además, es muy probable que el navegador descargue las imágenes de 1x y 2x, lo que aumentará el peso de la página.

Imágenes intercaladas: de trama y vectoriales

Existen dos formas fundamentalmente diferentes de crear y almacenar imágenes, y esto afecta la forma en que implementas imágenes de manera responsiva.

Imágenes de trama: Como las 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 bien crearse con el elemento de lienzo HTML. Los formatos como PNG, JPEG y WebP se usan para almacenar imágenes de trama.

Las imágenes vectoriales, como los logotipos y los dibujos lineales, 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 bien se pueden escribir a mano en código con un formato vectorial, como SVG.

SVG

Los SVG permiten incluir gráficos vectoriales responsivos en una página web. La ventaja de los formatos de archivo vectoriales sobre 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, es decir, cómo se construye a partir de líneas, curvas, colores, etcétera. Por otro lado, los formatos de trama solo tienen información sobre puntos de color individuales, por lo que el navegador debe adivinar cómo completar los espacios en blanco cuando se escala.

A continuación, se muestran dos versiones de la misma imagen: una imagen PNG a la izquierda y una SVG a la derecha. El SVG se ve bien en cualquier tamaño, mientras que el PNG que está al lado comienza a verse borroso en tamaños de pantalla más grandes.

Si deseas reducir la cantidad de solicitudes de archivos que realiza tu página, puedes codificar las imágenes intercaladas con el formato SVG o URI de datos. Si ves la fuente de esta página, notarás que ambos logotipos que aparecen a continuación se declaran intercalados: un URI de datos y un SVG.

SVG tiene una gran compatibilidad con dispositivos móviles y computadoras, y las herramientas de optimización pueden reducir significativamente el tamaño de SVG. Los siguientes dos logotipos de SVG intercalados se ven idénticos, pero uno pesa alrededor de 3 KB y el otro solo 2 KB:

URI de datos

que proporcionan una forma de incluir un archivo (por ejemplo, una imagen) de manera intercalada configurando el src de un elemento img como una cadena codificada en base64 mediante el siguiente formato:

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

El comienzo del código para el logotipo de HTML5 anterior se ve de la siguiente manera:

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

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

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

Inclusión de CSS

Los URI de datos y los SVG también se pueden intercalar en CSS, y esto se admite tanto en dispositivos móviles como en computadoras de escritorio. Aquí hay dos imágenes de aspecto idéntico implementadas como imágenes de fondo en CSS; un URI de datos y un SVG:

Ventajas y desventajas de la inserción de código

El código intercalado para las imágenes puede ser detallado, en especial los URI de datos, por lo que ¿por qué querrías usarlo? Para reducir las solicitudes HTTP Los SVG y los URI de datos pueden permitir que se recupere una página web completa, incluidas las imágenes, el CSS y el JavaScript, con una sola solicitud.

Por otro lado, tiene las siguientes desventajas:

• En dispositivos móviles, los URI de datos pueden tardar mucho más en mostrarse que las 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 tu flujo de trabajo.
• El formato de URI de datos es considerablemente más grande que el binario (hasta un 30%) y, por lo tanto, no reduce el tamaño total de la descarga.
• Los URI de datos no se pueden almacenar en caché, por lo que se deben descargar para cada página en la que se usen.
• No son compatibles con IE 6 ni 7, y la compatibilidad con IE8 es incompleta.
• Con HTTP/2, reducir la cantidad de solicitudes de recursos será menos prioritario.

Al igual que con todo lo responsivo, debes probar qué funciona mejor. Usa las 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 las imágenes de trama, por ejemplo, en una página principal que solo tiene una o dos fotos que no se usan en ningún otro lugar. Si necesitas intercalar 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 que facilita agregar varias imágenes, hacer que se repitan y mucho más. Cuando se combina con consultas de medios, la propiedad background se vuelve aún más potente, ya que permite la carga condicional de imágenes según la resolución de la pantalla, el tamaño del viewport y mucho más.

Resumen

• Usa la mejor imagen para las características de la pantalla, considera 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 con DPI alto usando 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 el lenguaje de marcado.
• Considera los costos de rendimiento cuando uses técnicas de reemplazo de imágenes de JavaScript o cuando publiques imágenes de alta resolución muy comprimidas en dispositivos de menor resolución.

Usa consultas de medios para la carga condicional de imágenes o la dirección de arte

Las consultas de medios no solo afectan el diseño de la página, sino que también puedes usarlas para cargar imágenes de forma condicional o proporcionar dirección de arte según el ancho del viewport.

Por ejemplo, en la muestra que aparece a continuación, en las pantallas más pequeñas, solo se descarga small.png y se aplica al contenido div, mientras que, en las 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 proporcionar varios archivos de imagen para diferentes características de los dispositivos. Esto permite que el navegador elija la mejor imagen según las características del dispositivo, por ejemplo, usar una imagen de 2x en una pantalla de 2x o una imagen de 1x en un dispositivo de 2x cuando se encuentra en una red de 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 escala según corresponda. En otras palabras, el navegador supone que las imágenes de 2x son el doble de grandes que las de 1x, por lo que reduce la imagen de 2x en 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 se admite en Chrome y Safari con el prefijo de proveedor -webkit. Asegúrate de 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

En el ejemplo anterior, se carga el recurso adecuado en los navegadores que admiten image-set; de lo contrario, se recurre al recurso 1x. La advertencia obvia es que, si bien la compatibilidad del navegador con image-set() es baja, la mayoría de los navegadores obtienen el recurso 1x.

Usa consultas de medios para proporcionar imágenes de alta resolución o dirección de arte

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

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

Chrome, Firefox y Opera admiten el estándar (min-resolution: 2dppx), mientras que los navegadores Safari y Android requieren la sintaxis anterior con prefijo del proveedor sin la unidad dppx. Recuerda que estos estilos solo se cargan si el dispositivo coincide con la consulta de medios y que debes especificar los estilos para el caso base. Esto también ofrece el beneficio de garantizar que se renderice algo si el navegador no admite consultas de medios específicas de la 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 min-width para mostrar imágenes alternativas según el tamaño del viewport. Esta técnica tiene la ventaja de 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 más:

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

Usa SVG para los íconos

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

Resumen

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

Reemplaza los íconos simples por Unicode

Muchas fuentes incluyen compatibilidad con la gran cantidad de glifos Unicode, que se pueden usar en lugar de imágenes. A diferencia de las imágenes, las fuentes Unicode se ajustan bien y se ven bien, sin importar qué tan pequeñas o grandes aparezcan en la pantalla.

Más allá del conjunto de caracteres normal, 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 (♞).

Para incluir un carácter Unicode, se hace de la misma manera que con las entidades con nombre: &#XXXX, donde XXXX representa el número de carácter Unicode. Por ejemplo:

You're a super ★

Eres una superestrella ★

Reemplaza los íconos complejos por SVG

Para requisitos de íconos más complejos, los íconos SVG suelen ser livianos, fáciles de usar y se les puede aplicar diseño con CSS. Los SVG tienen varias ventajas sobre las imágenes de trama:

• Son gráficos vectoriales que se pueden escalar de forma infinita.
• Los efectos de CSS, como el color, el sombreado, la transparencia y las animaciones, son sencillos.
• Las imágenes SVG se pueden intercalar 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 las fuentes de íconos con precaución

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

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 escalar de forma infinita, pero pueden tener suavizado de contorno, lo que genera íconos que no son tan nítidos como se espera.
• Estilo limitado con CSS
• El posicionamiento perfecto de los píxeles puede ser difícil, según la altura de la línea, el espaciado entre letras, etcétera.
• No son semánticos y pueden ser difíciles de usar con lectores de pantalla o con otra tecnología de accesibilidad.
• A menos que se definan correctamente, pueden generar un archivo de gran tamaño para usar solo un pequeño subconjunto 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, incluidas 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 los íconos. Por ejemplo, si solo necesitas unos pocos íconos, puede ser mejor usar una imagen o un sprite de imagen.

Optimiza las imágenes para mejorar el rendimiento

Las imágenes suelen representar la mayor parte de los bytes descargados y, además, suelen ocupar una cantidad significativa del espacio visual de la página. Como resultado, la optimización de imágenes suele generar algunos de los mayores ahorros de bytes y mejoras de rendimiento para tu sitio web: cuantos menos bytes tenga que descargar el navegador, menos competencia habrá por el ancho de banda del cliente y más rápido podrá descargar y mostrar todos los recursos.

Resumen

• No elijas un formato de imagen al azar. Comprende los diferentes formatos disponibles y usa el más adecuado.
• Incluye herramientas de optimización y compresión de imágenes en tu flujo de trabajo para reducir los tamaños de los archivos.
• Reduce la cantidad de solicitudes HTTP colocando las imágenes de uso frecuente en sprites de imágenes.
• Para mejorar el tiempo de carga inicial de la página y reducir su peso inicial, considera cargar las imágenes solo después de que se desplacen a la vista.

Elige el formato adecuado

Existen dos tipos de imágenes que debes tener en cuenta: las imágenes vectoriales y las imágenes de trama. En el caso de las imágenes de trama, también debes elegir el formato de compresión correcto, por ejemplo: GIF, PNG o JPG.

Las imágenes de trama, como las fotografías y otras imágenes, se representan como una cuadrícula de puntos o píxeles individuales. Las imágenes de trama suelen provenir de una cámara o un escáner, o bien se pueden crear 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 escalan a un tamaño mayor que el original, las imágenes de trama se vuelven borrosas porque el navegador necesita adivinar cómo completar los píxeles faltantes.

Las imágenes vectoriales, como los logotipos y los dibujos lineales, se definen con 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. Como las imágenes vectoriales se crean con primitivas simples, se pueden escalar sin perder calidad ni cambiar el tamaño del archivo.

Cuando elijas el formato adecuado, es importante que consideres tanto el origen de la imagen (trama o vector) como el contenido (colores, animación, texto, etcétera). No existe un formato único para todos los tipos de imágenes, y cada uno tiene sus propias fortalezas y debilidades.

Comienza con estos lineamientos para elegir el formato adecuado:

• Usa JPG para imágenes fotográficas.
• Usa SVG para arte vectorial y gráficos de colores sólidos, como logotipos y dibujos lineales. Si no hay imágenes vectoriales disponibles, prueba con WebP o PNG.
• Usa PNG en lugar de GIF, ya que permite más colores y ofrece mejores proporciones de compresión.
• Para animaciones más largas, considera usar <video>, que proporciona una mejor calidad de imagen y le da al usuario el control de la reproducción.

Reduce el tamaño del archivo

Puedes reducir el tamaño del archivo de imagen de forma considerable si "procesas posteriormente" las imágenes después de guardarlas. Existen varias herramientas para la compresión de imágenes: con y sin pérdida, en línea, con GUI y con línea de comandos. Siempre que sea posible, es mejor intentar automatizar la optimización de imágenes para que se incorpore a tu flujo de trabajo.

Existen varias herramientas que realizan una compresión adicional sin pérdida en los archivos JPG y PNG sin afectar la calidad de la imagen. Para JPG, prueba jpegtran o jpegoptim (disponible solo en Linux; ejecuta con la opción --strip-all). Para PNG, prueba OptiPNG o PNGOUT.

Usa hojas de sprites de imágenes

La creación de objetos CSS es una técnica en la que se combinan varias imágenes en una sola imagen de "hoja de objetos". Luego, puedes usar imágenes individuales especificando la imagen de fondo de un elemento (la hoja de objeto) y 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

La ventaja de la técnica de sprites es que reduce la cantidad de descargas necesarias para obtener varias imágenes, a la vez que permite el almacenamiento en caché.

Considera la carga diferida

La carga diferida puede acelerar significativamente la carga en páginas largas que incluyen muchas imágenes en la mitad inferior de la página, ya que las carga según sea necesario o cuando el contenido principal haya terminado de cargarse y renderizarse. Además de las mejoras de rendimiento, el uso de la carga diferida puede crear experiencias de desplazamiento infinito.

Ten cuidado cuando crees páginas de desplazamiento infinito, ya que, como el contenido se carga a medida que se vuelve visible, es posible que los motores de búsqueda nunca lo vean. 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 en absoluto. Siempre que sea posible, usa las capacidades nativas del navegador para proporcionar la misma funcionalidad o una similar. Los navegadores generan elementos visuales que antes habrían requerido imágenes. Esto significa que los navegadores ya no necesitan descargar archivos de imagen separados, lo que evita que las imágenes se escalen de forma inadecuada. Puedes usar fuentes de íconos especiales o Unicode para renderizar íconos.

Coloca el texto en el lenguaje de marcado en lugar de incorporarlo en las imágenes

Siempre que sea posible, el texto debe ser texto y no estar incorporado en imágenes. Por ejemplo, usar imágenes para los encabezados o colocar información de contacto, como números de teléfono o direcciones, directamente en las imágenes impide que los usuarios copien y peguen la información, hace que la información sea inaccesible para los lectores de pantalla y no es responsiva. En su lugar, coloca el texto en tu lenguaje de marcado y, si es necesario, usa fuentes web para lograr el estilo que necesitas.

Usa CSS para reemplazar imágenes

Los navegadores modernos pueden usar funciones de CSS para crear estilos que antes habrían requerido imágenes. Por ejemplo, se pueden crear gradientes complejos con la propiedad background, sombras con box-shadow y 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 el uso de estas técnicas requiere ciclos de renderización, que pueden ser significativos en dispositivos móviles. Si se usa en exceso, perderás cualquier beneficio que hayas obtenido y puede que se vea afectado el rendimiento.