Imágenes responsivas

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

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 nitidez. Una imagen que tiene un 50% de ancho puede funcionar bien cuando el navegador tiene 800 px de ancho, pero ocupa demasiado espacio en un teléfono angosto y requiere la misma sobrecarga de ancho de banda cuando se reduce para adaptarse a una pantalla más pequeña.

Dirección artística

Ejemplo de dirección artística

En otras ocasiones, es posible que sea necesario cambiar la imagen de forma más drástica: cambiar las proporciones, recortarla y hasta reemplazarla por completo. En este caso, cambiar la imagen se suele denominar dirección artística. Consulta responsiveimages.org/demos/ para ver más ejemplos.

Imágenes responsivas

Captura de pantalla del curso de Udacity

¿Sabías que las imágenes representan más del 60% de los bytes en promedio necesarios 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 bien y se carguen rápidamente en cualquier dispositivo.

Durante el curso, adquirirás una variedad de habilidades y técnicas para integrar sin problemas imágenes responsivas a 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 el curso

Imágenes en lenguaje de marcado

El elemento img es potente, ya que descarga, decodifica y renderiza contenido, y los navegadores modernos admiten una gran variedad de formatos de imagen. La inclusión de imágenes que funcionan en todos los dispositivos no es diferente a la de computadoras de escritorio y solo se requieren algunos ajustes para crear una buena experiencia.

Resumen

  • Usa tamaños relativos para las imágenes a fin de evitar que desbordan el contenedor por accidente.
  • Usa el elemento picture cuando quieras especificar diferentes imágenes según las características del dispositivo (también conocida como dirección artística).
  • Usa srcset y el descriptor x en el elemento img para brindar sugerencias al navegador sobre la mejor imagen para usar cuando se elija entre diferentes densidades.
  • Si tu página solo tiene una o dos imágenes que no se usan en ninguna otra parte del 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 se especifiquen los anchos de las imágenes para evitar que se excedan accidentalmente en el 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 de píxeles real).

Debido a que CSS permite que el contenido desborde su contenedor, es posible que debas usar el ancho máximo: 100% para evitar que las imágenes y otro contenido se desborde. Por ejemplo:

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

Asegúrate de proporcionar descripciones significativas mediante el atributo alt en los elementos img, ya que ayudan a que tu sitio sea más accesible, ya que proporcionan contexto a los lectores de pantalla y otras tecnologías de accesibilidad.

Mejora img con srcset para dispositivos con altos valores de DPI.

El atributo srcset mejora el comportamiento del elemento img, lo que facilita la provisión de 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, con 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 usa una red con ancho de banda limitado.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

En navegadores que no son compatibles con srcset, solo se usa el archivo de imagen predeterminado que especifica el atributo src. Por eso, es importante incluir siempre una imagen de 1x que se pueda mostrar en cualquier dispositivo, independientemente de las capacidades. Cuando se admite srcset, la lista separada por comas de imágenes o 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, solo la densidad de píxeles es compatible en la actualidad. Para equilibrar el comportamiento actual con funciones futuras, solo debes proporcionar la imagen de 2x en el atributo.

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

Ejemplo de dirección artística

Para cambiar las imágenes según las características del dispositivo, también conocida 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 distintas características, como el tamaño, la resolución y la orientación del dispositivo, entre otras.

Usa el elemento picture cuando la fuente de una imagen exista en varias densidades o cuando un diseño responsivo indique una imagen algo diferente en algunos tipos de pantallas. De manera similar al 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 y 800 px, se vuelve a usar head-small.jpg o head-small- 2x.jpg, según la resolución del dispositivo. En el caso de los anchos de pantalla inferiores a 450 px y la retrocompatibilidad si no se admite el elemento picture, el navegador renderizará el elemento img y siempre debe incluirse.

Tamaño de las imágenes 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 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 de este.

En lugar de proporcionar densidades y tamaños 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. Esto 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 relación de píxeles del dispositivo, permite que el navegador elija la imagen correcta, independientemente del tamaño de la ventana. Por ejemplo, la siguiente tabla muestra qué imagen elegiría el navegador:

Ancho del navegador Proporción de píxeles del dispositivo Imagen usada Resolución efectiva
400px 1 200.jpg 1x
400px 2 400.jpg 2 veces más rápido
320px 2 400.jpg 2.5 veces más
600px 2 800.jpg 2.67 veces
640px 3 1000.jpg 3,125 veces
1,100 px 1 800.png 1.45 veces

Ten en cuenta 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 desees que la imagen abarque todo el ancho del viewport, mientras que en pantallas más grandes, solo debería tomar 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 supera los 600 px, la imagen es el 25% del ancho del viewport; cuando tiene entre 500 y 600 px, la imagen es el 50% del ancho del viewport; y, si es inferior a 500 px, su ancho es completo.

Haga que las imágenes de los productos sean expandibles

J. Sitio web de Crews con una imagen expandible del producto
J. Sitio web del equipo con una imagen expandible del producto

Los clientes desean 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 observar mejor los detalles, y los participantes del estudio se frustran si no pudieron hacerlo.

Un buen ejemplo de imágenes que se pueden presionar y expandir es el documento de J. Sitio del personal. Una superposición que desaparece indica que una imagen se puede presionar, lo que proporciona una imagen ampliada con detalles precisos a la vista.

Otras técnicas de imagen

Imágenes de compresión

La técnica de imágenes de compresión entrega una imagen 2x altamente comprimida a todos los dispositivos, independientemente de 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 reducirá considerablemente.

Probar

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 proporción de píxeles del dispositivo a través de window.devicePixelRatio, obtener el ancho y la altura de la pantalla, o incluso detectar la conexión de red a través de navigator.connection o emitir una solicitud falsa. Una vez que 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 demorarás la carga de imágenes al menos hasta que el analizador de lectura anticipada haya terminado. Eso significa que las imágenes no comenzarán a descargarse hasta después de 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.

Inlineación de imágenes: 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.

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

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

SVG

SVG permite incluir gráficos vectoriales adaptables en una página web. La ventaja de los formatos de archivos vectoriales en comparación con 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, por otro lado, solo tienen información sobre los puntos individuales de color, 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 un SVG a la derecha. El archivo SVG se ve muy bien en cualquier tamaño, mientras que el PNG junto a él comienza a verse desenfocado en tamaños de pantalla más grandes.

Logotipo HTML5, formato PNG
Logotipo de HTML5, formato SVG

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

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

URI de datos

Los URI de datos proporcionan una forma de incluir un archivo (por ejemplo, una imagen) de forma intercalada configurando el src de un elemento img como una string codificada en Base64 con el siguiente formato:

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

El comienzo del código del logotipo HTML5 anterior tiene el siguiente aspecto:

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

(La versión completa tiene más de 5000 caracteres).

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

Incorporación en CSS

Los URI de datos y los SVG también se pueden intercalar en CSS, lo que es compatible con dispositivos móviles y computadoras de escritorio. A continuación, se muestran 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 incorporación

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

La desventaja:

  • En dispositivos móviles, los URI de datos pueden ser mucho más lentos para mostrarse en dispositivos móviles que en las imágenes de un src externo.
  • Los URI 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 del 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 descarga.
  • Los URI de datos no se pueden almacenar en caché, por lo que deben descargarse para cada página en la que se usen.
  • No son compatibles con IE 6 ni 7 y no son compatibles con IE8.
  • Con HTTP/2, la reducción de la cantidad de solicitudes de elementos dejará de ser una prioridad.

Como sucede con todos los elementos adaptables, es necesario probar qué funciona mejor. Usa herramientas para desarrolladores a fin de medir el tamaño del archivo de descarga, la cantidad de solicitudes y la latencia total. En ocasiones, 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 intercalar imágenes vectoriales, SVG es una opción mucho mejor.

Imágenes en CSS

La propiedad background de CSS es una herramienta eficaz para agregar imágenes complejas a los elementos, facilitar la adición de varias imágenes, hacer que se repitan y mucho más. Cuando se combina con consultas de medios, la propiedad de fondo se vuelve aún más potente, lo 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, 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 con valores altos de DPI mediante 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.
  • Ten en cuenta los costos de rendimiento cuando uses técnicas de reemplazo de imágenes de JavaScript o cuando entregues imágenes de alta resolución muy comprimidas para dispositivos con 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 artística según el ancho del viewport.

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

.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 el suministro de varios archivos de imagen para diferentes características del dispositivo. 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 usa 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 ajusta según corresponda. En otras palabras, el navegador supone que las imágenes 2x son el doble de grandes que las imágenes 1x; por lo tanto, reduce la escala de la imagen 2x en un factor de dos para 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

Lo anterior carga el recurso correspondiente en navegadores que admiten el conjunto de imágenes; de lo contrario, recurre al recurso 1x. La salvedad obvia es que, si bien la compatibilidad con el navegador image-set() es baja, la mayoría de los navegadores obtienen el recurso 1x.

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

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

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

Chrome, Firefox y Opera son compatibles con (min-resolution: 2dppx) estándar, mientras que los navegadores Safari y Android requieren la sintaxis con prefijo del proveedor anterior sin la unidad dppx. Recuerda que estos diseños solo se cargan si el dispositivo coincide con la consulta de medios, y debes especificar los diseños para el caso base. Esto también brinda el beneficio de garantizar que se renderice un elemento 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 de ancho mínimo 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 superior:

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

Cómo usar SVG para íconos

Cuando agregues íconos a tu página, usa íconos 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 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 grupo 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 (Ω) e incluso piezas de ajedrez (♞).

La inclusión de un carácter Unicode se realiza de la misma manera que las entidades con nombre: &#XXXX, donde XXXX representa el número de caracteres Unicode. Por ejemplo:

You're a super &#9733;

Eres un súper ★

Cómo reemplazar í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 se pueden diseñar con CSS. SVG tiene varias ventajas sobre las imágenes de trama:

  • Son gráficos vectoriales que se pueden escalar de forma infinita.
  • Los efectos CSS, como el color, las sombras, la transparencia y las animaciones, son sencillos.
  • Las imágenes SVG se pueden incluir 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 fuente.
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 de forma infinita, pero se pueden suavizar, lo que genera íconos que no son tan nítidos como se espera.
  • Estilo limitado con CSS
  • Posición perfecta para píxeles puede ser difícil, según la altura de línea, el espaciado entre letras, etcétera.
  • No son semánticas y pueden ser difíciles de usar con lectores de pantalla o alguna otra tecnología de accesibilidad.
  • A menos que tengan un alcance adecuado, pueden generar un tamaño de archivo grande para el uso solo de 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 los íconos. Por ejemplo, si solo necesitas algunos íconos, quizás sea mejor usar una imagen o un objeto de imagen.

Optimiza las imágenes para mejorar el rendimiento

A menudo, las imágenes representan la mayor parte de los bytes descargados y ocupan una gran cantidad 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 las mejoras de rendimiento más importantes para tu sitio web: cuantos menos bytes deba 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 de forma aleatoria: comprende los diferentes formatos disponibles y usa el que sea más adecuado.
  • Incluye herramientas de optimización y compresión de imágenes en tu flujo de trabajo para reducir el tamaño de los archivos.
  • Para reducir la cantidad de solicitudes http, coloca las imágenes de uso frecuente en Image Sprites.
  • 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 hayan desplazado hasta que se vean.

Elige el formato correcto

Hay dos tipos de imágenes que se deben considerar: imágenes vectoriales y, también, imágenes de trama. Para las imágenes de trama, también debes elegir el formato de compresión adecuado, por ejemplo: GIF, PNG, 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. Por lo general, las imágenes de trama provienen de una cámara o un escáner, o se pueden crear en el navegador con el elemento canvas. A medida que aumenta el tamaño de la imagen, también lo hace el tamaño del archivo. Cuando las imágenes de trama se ajustan a un tamaño mayor que su tamaño original, se vuelven borrosas porque el navegador necesita adivinar cómo rellenar los píxeles faltantes.

Las imágenes vectoriales, como logotipos y arte lineal, se definen mediante 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 primitivos simples, se pueden escalar sin perder calidad ni cambiar el tamaño del archivo.

Cuando elijas el formato adecuado, es importante considerar el origen de la imagen (trama o vector) y el contenido (colores, animación, texto, etc.). Ningún formato se adapta a 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 arte lineal. Si arte vectorial no está disponible, 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 control sobre la reproducción.

Reduce el tamaño de los archivos

Puedes reducir considerablemente el tamaño del archivo de imagen si haces un “procesamiento posterior” de 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, GUI y línea de comandos. Siempre que sea posible, es mejor intentar automatizar la optimización de imágenes para que esté integrada en tu flujo de trabajo.

Hay varias herramientas disponibles que realizan más compresión sin pérdidas en 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 image_Sprite.

Hoja de objeto de imagen utilizada en un ejemplo

Spriting de CSS es una técnica mediante la cual una serie de imágenes se combinan en una sola imagen de "hoja de objeto". Luego, puedes usar imágenes individuales si especificas la imagen de fondo de un elemento (la hoja de objeto) más 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 imágenes tiene la ventaja de reducir la cantidad de descargas necesarias para obtener varias imágenes y, a la vez, habilitar el almacenamiento en caché.

Considera la carga diferida

La carga diferida puede acelerar significativamente la carga en páginas largas que incluyan muchas imágenes en la mitad inferior de la página, ya que las carga según sea necesario o cuando el contenido principal terminó 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 con desplazamiento infinito, ya que el contenido se carga a medida que se hace visible y 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 la ven porque siempre se carga contenido nuevo.

Evita las imágenes por completo

A veces, la mejor imagen no es en realidad una imagen. 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 hubiesen requerido imágenes. Esto significa que los navegadores ya no necesitan descargar archivos de imagen separados, lo que evita imágenes con tamaños extraños. Puedes usar fuentes de íconos especiales o Unicode para renderizar íconos.

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

Siempre que sea posible, el texto debe ser texto y no debe estar incorporado en imágenes. Por ejemplo, usar imágenes para los titulares o colocar información de contacto (como números de teléfono o direcciones) directamente en imágenes evita que los usuarios copien y peguen la información, la información será inaccesible para los lectores de pantalla y no responderá. En cambio, coloca el texto en el lenguaje de marcado y, si es necesario, usa fuentes para sitios 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 anteriormente habrían requerido imágenes. Por ejemplo, se pueden crear gradientes complejos con la propiedad background, se pueden crear 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 placeat egestas nisl sed sollicitudin. Fusce placeat, 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 requieren ciclos de renderización, lo que puede ser significativo en dispositivos móviles. Si los usas en exceso, perderás los beneficios que puedas haber obtenido y es posible que entorpezcas el rendimiento.