Imágenes responsivas

Una imagen vale más que mil palabras y las imágenes son parte integral de todas las páginas. Sin embargo, también suelen representar 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

En otras ocasiones, es posible que se deba modificar la imagen de forma más drástica, como cambiar las proporciones, recortarla o incluso reemplazarla por completo. En este caso, cambiar la imagen generalmente se conoce como 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 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 geniales y se carguen rápidamente en cualquier dispositivo.

En el proceso, adquirirás una variedad de habilidades y técnicas para integrar imágenes responsivas en tu flujo de trabajo de desarrollo sin problemas. Al final del curso, desarrollarás 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 en Udacity

Realizar el curso

Imágenes en lenguaje de marcado

El elemento img es potente: descarga, decodifica y renderiza contenido. Los navegadores modernos admiten una variedad de formatos de imagen. Incluir imágenes que funcionan en todos los dispositivos es igual que en 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 desbordes accidentalmente el contenedor.
• Usa el elemento picture cuando quieras especificar imágenes diferentes 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 para elegir 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.

Utiliza tamaños relativos para las imágenes

Recuerda usar unidades relativas cuando especifiques los anchos de las imágenes, a fin de evitar que accidentalmente superen 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 del 100% para evitar que las imágenes y otros contenidos se desbordan. 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 brindan contexto a los lectores de pantalla y otras tecnologías de accesibilidad.

Mejora los img con srcset para dispositivos con valores altos 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 de dispositivos. Al igual que la función 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 encuentra en una red de ancho de banda limitado.

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

En navegadores que no son compatibles con srcset, el navegador simplemente 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 actualmente. Para equilibrar el comportamiento actual con las funciones futuras, solo debes proporcionar 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 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 características distintas, como el tamaño y la resolución del dispositivo, su orientación y mucho más.

Usa el elemento picture cuando la fuente de una imagen exista en varias densidades o cuando un diseño responsivo indique una imagen un poco 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. Para anchos de pantalla inferiores a 450 px y retrocompatibilidad en los que el elemento picture no es compatible, el navegador renderiza el elemento img y siempre debe incluirse.

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 imágenes. Esto es particularmente cierto para las imágenes que abarcan un ancho proporcional al navegador y son fluidas, según su tamaño.

En lugar de proporcionar densidades y tamaños de imagen fijos, puedes especificar el tamaño de cada imagen. 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 efectiva de píxeles 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 procesa 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 sin importar el 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 utilizada	Resolución efectiva
400px	1	200.jpg	1x
400px	2	400.jpg	2 veces más
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 es superior a 600 px, la imagen es el 25% del ancho del viewport; cuando es entre 500 px y 600 px, la imagen es el 50% del ancho del viewport; y cuando es inferior a 500 px, es el ancho completo.

Haz que las imágenes de los productos sean expandibles

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 entender mejor los detalles, y los participantes del estudio se frustraban si no podían hacerlo.

El J. es un buen ejemplo de imágenes expandibles que se pueden presionar. Sitio del equipo. Una superposición que desaparece indica que una imagen se puede presionar, lo que proporciona una imagen ampliada con detalles finos visibles.

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 de estos. Según el tipo de imagen y el nivel de compresión, es posible que la calidad de la imagen no parezca cambiar, pero que el tamaño del archivo disminuya 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 el alto de la pantalla y, potencialmente, realizar un análisis de 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 finalizado. Esto significa que las imágenes no comenzarán a descargarse hasta después de que se active el evento pageload. Además, lo más probable es que el navegador descargue las imágenes de 1x y de 2x, lo que aumentará el peso 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 afecta la forma en que implementas las imágenes de forma responsiva.

Las 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 crear con el elemento lienzo HTML. Se usan formatos como PNG, JPEG y WebP para almacenar imágenes de trama.

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 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 archivo 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 puntos individuales de color, por lo que el navegador debe adivinar cómo completar los espacios en blanco al escalar.

A continuación, se muestran dos versiones de la misma imagen: una imagen PNG a la izquierda y un SVG a la derecha. El SVG se ve muy bien en cualquier tamaño, mientras que el PNG junto a él 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 de URI de datos. Si consultas la fuente de esta página, verás que los dos logotipos que aparecen a continuación están declarados 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 de aproximadamente 3 KB y el otro solo pesa 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 para el logotipo HTML5 de 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).

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 archivos SVG, los URI de datos son muy compatibles con los navegadores para dispositivos móviles y computadoras de escritorio.

Intercalado en CSS

Los URI de datos y los SVG también se pueden intercalar en CSS, y esto 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 para las imágenes puede ser detallado, especialmente 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 demorar mucho más en mostrarse en dispositivos móviles que en imágenes provenientes 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 de URI de datos es considerablemente más grande que el binario (hasta el 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; la compatibilidad con IE8 no es completa.
• Con HTTP/2, la reducción de la cantidad de solicitudes de elementos dejará de ser una prioridad.

Como con todo lo receptivo, debes probar qué funciona mejor. Usa las herramientas para desarrolladores a fin de 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 tiene una o dos fotos que no se usan 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 potente para agregar imágenes complejas a los elementos, facilitar la incorporación de varias imágenes, repetirlas 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 y 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 de menor resolución.

Cómo usar 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, 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

Usar 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 de 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 está 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 el tamaño 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 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 adecuado en navegadores compatibles con image-set. De lo contrario, se recurre al recurso 1x. La advertencia 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 proporciona 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);
    }
}

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.

Cómo reemplazar íconos simples con 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 cuán pequeñas o grandes aparezcan en la pantalla.

Más allá del grupo de caracteres normal, Unicode puede incluir símbolos de 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 hace de la misma manera en que las entidades con nombre son: &#XXXX, en el que XXXX representa el número de caracteres Unicode. Por ejemplo:

You're a super ★

Eres un súper ★

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 infinitamente.
• Los efectos CSS, como el color, las sombras, la transparencia y las animaciones, son directos.
• 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 cuidado

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 forma infinita, pero se pueden suavizar, lo que genera íconos que no son tan nítidos como se espera.
• Estilo limitado con CSS.
• Lograr un posicionamiento de píxeles perfecto puede ser difícil, según la altura de las líneas, el espaciado entre letras, etcétera.
• No son semánticas y pueden ser difíciles de usar con lectores de pantalla o con otra tecnología de asistencia.
• A menos que tengan un alcance adecuado, pueden generar un tamaño de archivo grande 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, incluidos 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, tal vez sea mejor usar una imagen o un objeto image.

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 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 las mejoras de rendimiento 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 el navegador 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 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 archivo.
• Para reducir la cantidad de solicitudes HTTP, coloca las imágenes que se usan con frecuencia 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 aparezcan.

Elige el formato correcto

Se deben considerar dos tipos de imágenes: 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 correcto, 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 archivo. Cuando su tamaño supera su tamaño 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 el 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 primitivas simples, se pueden escalar 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étera). Ningún formato se adapta a todos los tipos de imágenes, y cada uno tiene sus propias fortalezas y debilidades.

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 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.
• En el caso de animaciones más largas, considera usar <video>, que proporciona una mejor calidad de imagen y le brinda al usuario el control sobre la reproducción.

Reduce el tamaño del archivo

Puedes reducir 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 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 el flujo de trabajo.

Hay varias herramientas disponibles 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; ejecuta con la opción --strip-all). Para PNG, prueba OptiPNG o PNGOUT.

Usa Image Sprites

El uso de sprite 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), 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 Spriting 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 considerablemente 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 ya se cargó y se renderizó. 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 vuelve visible, por lo que 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 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 que las imágenes se ajusten de manera incómoda. Puedes usar fuentes de íconos especiales o Unicode para renderizar íconos.

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

Cuando sea posible, el texto debe ser texto y no estar incorporado en imágenes. Por ejemplo, usar imágenes para títulos 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, hace que la información sea inaccesible para los lectores de pantalla y no responde. 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 antes hubiesen requerido imágenes. Por ejemplo, se pueden crear gradientes complejos con la propiedad background, sombras con box-shadow y 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 requieren ciclos de renderización, lo cual puede ser significativo en dispositivos móviles. Si los usas en exceso, perderás cualquier beneficio que puedas haber obtenido y es posible que entorpezca el rendimiento.