Rendimiento de las imágenes

Las imágenes suelen ser el recurso más pesado y más frecuente de la Web. Como Como resultado, la optimización de imágenes puede mejorar significativamente el rendimiento de tu sitio web. En la mayoría de los casos, optimizar imágenes significa reducir el tiempo de red enviando menos bytes, pero también puede optimizar la cantidad de bytes que envía al usuario para mostrar imágenes del tamaño adecuado para el dispositivo del usuario.

Se pueden agregar imágenes a una página con los elementos <img> o <picture>. la propiedad background-image del CSS

Tamaño de la imagen

La primera optimización que puedes realizar cuando se trata de usar recursos de imagen es para mostrar la imagen en el tamaño correcto; en este caso, el término tamaño se refiere a las dimensiones de una imagen. Sin otras variables, se muestra una imagen en un contenedor de 500 por 500 píxeles tendría el tamaño óptimo en 500 píxeles 500 píxeles Por ejemplo, una imagen cuadrada de 1000 píxeles significa que se el doble del tamaño necesario.

Sin embargo, existen muchas variables involucradas en la elección del tamaño adecuado de la imagen. la tarea de elegir el tamaño de imagen adecuado en cada caso sea bastante complicada. En 2010, cuando se lanzó el iPhone 4, la resolución de pantalla (640 x 960) duplicaba la del iPhone 3 (320 x 480). Sin embargo, el tamaño físico de la pantalla del iPhone 4 se mantuvo casi igual que la del iPhone 3.

Al mostrar todo con la resolución más alta, habría hecho que el texto y las imágenes significativamente más pequeños, para ser exactos, la mitad de su tamaño anterior. En cambio, 1 píxel se convierten en 2 píxeles de dispositivo. Esto se denomina relación de píxeles del dispositivo (DPR). El El iPhone 4 (y muchos modelos de iPhone lanzados después de él) tenía una DPR de 2.

Si volvemos al ejemplo anterior, si el dispositivo tiene una DPR de 2 y la imagen es se muestra en un contenedor de 500 por 500 píxeles y, luego, en una imagen cuadrada de 1000 píxeles (denominado tamaño intrínseco) ahora es el óptimo. De manera similar, si el tiene una DPR de 3, una imagen cuadrada de 1,500 píxeles sería el tamaño óptimo.

srcset

El elemento <img> admite el atributo srcset, que te permite especificar una una lista de posibles fuentes de imágenes que puede utilizar el navegador. Cada fuente de imagen especificada debe incluir la URL de la imagen y un descriptor de ancho o densidad de píxeles.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

El fragmento HTML anterior usa el descriptor de densidad de píxeles para sugerirle al navegador. para usar image-500.png en dispositivos con una DPR de 1, image-1000.jpg en dispositivos con una DPR de 2 y image-1500.jpg en dispositivos con una DPR de 3.

Si bien todo esto puede parecer poco claro, la DPR de una pantalla no es el único a la hora de elegir la mejor imagen para una página determinada. La página El diseño es otra consideración.

sizes

La solución anterior solo funciona si muestras la imagen en el mismo píxel de CSS. en todas las ventanas de visualización. En muchos casos, el diseño de una página y el estado tamaño con él; cambia según el dispositivo del usuario.

El atributo sizes te permite especificar un conjunto de tamaños de origen, en los que cada el tamaño de la fuente consiste en una condición de contenido multimedia y un valor. El atributo sizes describe el tamaño de visualización previsto de la imagen en píxeles CSS. Cuando se combinan Con los descriptores de ancho srcset, el navegador puede elegir qué fuente de imagen es mejor para el dispositivo del usuario.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

En el fragmento HTML anterior, el atributo srcset especifica una lista de imágenes. candidatos que puede elegir el navegador, separados por comas. Cada candidato en la lista consiste en la URL de la imagen, seguida de una sintaxis que denota la es el ancho intrínseco de la imagen. El tamaño intrínseco de una imagen son sus dimensiones. Para ejemplo, un descriptor de 1000w indica que el ancho intrínseco de la imagen es 1,000 píxeles de ancho

Con esta información, el navegador evalúa la condición del contenido multimedia en el sizes y, en este caso, se indica que si el ancho de la vista del puerto del dispositivo supera los 768 píxeles, la imagen se muestra en un ancho de 500 píxeles. En el dispositivo más pequeño dispositivos, la imagen se muestra en 100vw o en todo el ancho del viewport.

El navegador puede combinar esta información con la lista de imagen srcset. fuentes para encontrar la imagen óptima. Por ejemplo, si el usuario utiliza un dispositivo móvil dispositivo con un ancho de pantalla de 320 píxeles con una DPR de 3, la imagen se muestra a las 320 CSS pixels x 3 DPR = 960 device pixels. En este ejemplo, lo más cercano del tamaño de una imagen sería image-1000.jpg, que tiene un ancho intrínseco de 1,000. píxeles (1000w).

Formatos de archivo

Los navegadores admiten varios formatos de archivo de imagen diferentes. Los formatos de imagen modernos, como WebP y AVIF pueden comprimir mejor las imágenes que los formatos PNG o JPEG, lo que hace que tu de tamaño del archivo de imagen más pequeño y, por lo tanto, tardarán menos en descargarse. Entregando imágenes en formatos modernos, puedes reducir el tiempo de carga de un recurso, lo que da como resultado un Largest Contentful Paint (LCP) más bajo.

WebP es un formato ampliamente compatible que funciona en todos los navegadores modernos. WebP suele tener una mejor compresión que JPEG, PNG o GIF, lo que ofrece imágenes con pérdida y compresión sin pérdida. WebP también admite la transparencia de los canales alfa incluso cuando con compresión con pérdida, una función que el códec JPEG no ofrece.

AVIF es un formato de imagen más nuevo y, si bien no es tan compatible como WebP, cuenta con compatibilidad razonablemente aceptable en todos los navegadores. El AVIF admite secuencias de comandos y sin pérdida, y las pruebas han demostrado un ahorro de más del 50% cuando en comparación con JPEG en algunos casos. AVIF también ofrece Gamut amplio de colores (WCG) y Funciones de Alto rango dinámico (HDR)

Compresión

En lo que respecta a las imágenes, hay dos tipos de compresión:

  1. Compresión con pérdida
  2. Compresión sin pérdida

La compresión con pérdida funciona reduciendo la exactitud de la imagen a través de la cuantización, y es posible que se descarte la información adicional de color mediante el submuestreo de croma. La compresión con pérdida es más eficaz en imágenes de alta densidad con mucho ruido. y colores, normalmente fotos o imágenes con contenidos similares. Esto se debe a que Es mucho menos probable que se noten los artefactos producidos por la compresión con pérdida en imágenes tan detalladas. Sin embargo, la compresión con pérdida puede ser menos efectiva con imágenes que contengan bordes filosos, como arte lineal, detalles crudos similares texto. La compresión con pérdida se puede aplicar a imágenes JPEG, WebP y AVIF.

La compresión sin pérdida reduce el tamaño del archivo comprimiendo una imagen sin datos pérdida de reputación y de talento. La compresión sin pérdida describe un píxel en función de la diferencia con su píxeles vecinos. La compresión sin pérdida se usa para los formatos GIF, PNG, WebP y formatos de imagen AVIF.

Puedes comprimir tus imágenes con Squoosh, ImageOptim o una imagen. de optimización de Google Cloud. Cuando se comprime, no existe una configuración universal adecuada para todos los casos. El enfoque recomendado sería experimentar con diferentes de compresión hasta que encuentres un buen equilibrio entre la calidad el tamaño del archivo. Algunos servicios avanzados de optimización de imágenes pueden hacerlo por usted de forma automática, pero es posible que no sea viable desde el punto de vista económico para todos los usuarios.

El elemento <picture>

El elemento <picture> te brinda una mayor flexibilidad para especificar varias imágenes candidatas:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

Cuando usas elementos <source> dentro del elemento <picture>, puedes agregar compatibilidad con imágenes AVIF y WebP, y recurrir a imágenes heredadas más compatibles si el navegador no los admite. Con este enfoque, el navegador elige el primer elemento <source> especificado que coincida. Si es posible, la imagen en ese formato, la usa. De lo contrario, el navegador pasa al siguiente elemento <source> especificado. En el código HTML anterior el formato AVIF tiene prioridad sobre el formato WebP, recurriendo el formato JPEG si no se admite AVIF ni WebP.

Un elemento <picture> requiere un elemento <img> anidado en su interior. El Los atributos alt, width y height se definen en el <img> y se usan sin importar qué <source> esté seleccionado.

El elemento <source> también admite media, srcset y sizes. atributos. Al igual que en el ejemplo de <img> anterior, estos indican a la al navegador qué imagen seleccionar en diferentes viewports.

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

El atributo media toma una condición de contenido multimedia. En el ejemplo anterior, la la DPR del dispositivo se usa como condición multimedia. Cualquier dispositivo con una DPR superior a o igual a 1.5 usaría el primer elemento <source>. El elemento <source> le indica al navegador que, en dispositivos con un viewport de más de 768 píxeles, la imagen candidata seleccionada se muestra con un ancho de 500 píxeles. En dispositivos más pequeños, ocupa todo el ancho del viewport. Si combinas media y srcset atributos, puedes tener un control más detallado de la imagen que deseas usar.

Esto se ilustra en la siguiente tabla, donde se muestran varios anchos de viewport y Se evalúan las proporciones de píxeles del dispositivo:

Ancho de la vista del puerto (píxeles) 1 DPR 1.5 DPR 2 DPR 3 DPR
320 500.jpg 500.jpg 500.jpg 1000.jpg
480 500.jpg 500.jpg 1000.jpg 1500.jpg
560 500.jpg 1000.jpg 1000.jpg 1500.jpg
1024 500.jpg 1000.jpg 1000.jpg 1500.jpg
1920 500.jpg 1000.jpg 1000.jpg 1500.jpg

Los dispositivos con una DPR de 1 descargan la imagen image-500.jpg, incluida la mayoría usuarios de computadoras de escritorio, que ven la imagen con un tamaño extrínseco de 500 píxeles de ancho. Activada por otro lado, los usuarios de dispositivos móviles con una DPR de 3 descargan una image-1500.jpg: Es la misma imagen que se usa en dispositivos de escritorio con una DPR de 3.

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

En este ejemplo, el elemento <picture> se ajusta para incluir un elemento Elemento <source> para usar diferentes imágenes para dispositivos anchos con una DPR alta:

Ancho de la vista del puerto (píxeles) 1 DPR 1.5 DPR 2 DPR 3 DPR
320 500.jpg 500.jpg 500.jpg 1000-sm.jpg
480 500.jpg 500.jpg 1000-sm.jpg 1500-sm.jpg
560 500.jpg 1000-sm.jpg 1000-sm.jpg 1500-sm.jpg
1024 500.jpg 1000.jpg 1000.jpg 1500.jpg
1920 500.jpg 1000.jpg 1000.jpg 1500.jpg

Con esta consulta adicional, puedes ver que image-1000-sm.jpg y image-1500-sm.jpg se muestran en viewports pequeños. Esta información adicional te permite comprimir más las imágenes, ya que los artefactos de compresión no son muy visible con ese tamaño y densidad, y que, al mismo tiempo, no comprometa la calidad de la imagen en dispositivos de escritorio.

Como alternativa, si ajustas los atributos srcset y media, puedes evitar Entrega de imágenes grandes en viewports pequeños:

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

En el fragmento HTML anterior, se quitaron los descriptores de ancho para dar lugar a de descriptores de la proporción de píxeles del dispositivo. Las imágenes publicadas en dispositivos móviles son limitadas a /image-500.jpg o /image-1000.jpg, incluso en dispositivos con una DPR de 3.

Cómo administrar la complejidad

Cuando trabajes con imágenes responsivas, puedes encontrarte con muchas variaciones de tamaño y formatos para cada imagen. En el ejemplo anterior, las variaciones para cada tamaño, pero se excluyen AVIF y WebP. ¿Cuántas variantes deberías tener? Como muchos problemas de ingeniería, la respuesta suele ser “depende”.

Si bien puede ser tentador tener tantas variaciones para brindar la mejor opción, cada variante de imagen adicional tiene un costo y hace un uso menos eficiente de la caché del navegador. Con solo una variante, todos los usuarios reciben la misma imagen, por lo que se puede almacenar en caché de forma muy eficiente.

Por otro lado, si hay muchas variaciones, cada variante requiere otro la entrada de caché. Los costos del servidor pueden aumentar y disminuir el rendimiento si la de la variante haya caducado, y la imagen se debe recuperar de nuevo el servidor de origen.

Aparte de esto, el tamaño de tu documento HTML aumenta con cada variación. Tú podrías enviar múltiples kilobytes de HTML por cada imagen.

Entrega imágenes basadas en el encabezado de la solicitud Accept

El encabezado de la solicitud HTTP Accept informa al servidor qué tipo de contenido del navegador del usuario. Tu servidor puede usar esta información para entregar el formato de imagen óptimo sin agregar bytes adicionales a tus respuestas HTML.

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

El fragmento HTML anterior es una versión simplificada del código que puedes agregar al el backend de JavaScript de tu servidor para elegir y entregar el formato de imagen óptimo. Si el encabezado Accept de la solicitud incluye image/avif, entonces la imagen AVIF se publicado. De lo contrario, si el encabezado Accept incluye image/webp, la imagen WebP el servicio. Si no se cumple ninguna de estas condiciones, entonces la imagen JPEG es publicado.

Puedes modificar las respuestas según el contenido del encabezado de la solicitud Accept en casi todos los tipos de servidores web. Por ejemplo, puedes reescribir las solicitudes de imágenes en servidores Apache según el encabezado Accept con mod_rewrite

Este comportamiento es similar al que encontrarás en una red de distribución de contenidos de imágenes (Image Content Delivery Network). (CDN). Las CDN de imágenes son excelentes soluciones para optimizar imágenes y enviar las formato óptimo según el dispositivo y el navegador del usuario.

La clave es encontrar un equilibrio, generar una cantidad razonable de candidatos y medir su impacto en la experiencia del usuario. Las diferentes imágenes pueden proporcionar resultados diferentes, y las optimizaciones aplicadas a cada imagen dependen de su del tamaño de la página en la página y en los dispositivos que utilizan tus usuarios. Por ejemplo, un la imagen principal de ancho completo puede requerir más variantes que las imágenes en miniatura en una de la ficha de producto de comercio electrónico.

Carga diferida

Es posible indicarle al navegador que cargue de forma diferida las imágenes cuando aparezcan en la viewport con el atributo loading Un valor de atributo de lazy le indica al navegador no descargue la imagen hasta que esté en (o cerca) del viewport. Esta ahorra ancho de banda, lo que le permite al navegador priorizar los recursos que necesita para el contenido crítico que ya está en el viewport.

decoding

El atributo decoding le indica al navegador cómo debe decodificar la imagen. R de async le indica al navegador que la imagen se puede decodificar de forma asíncrona. y, tal vez, mejorar el tiempo de renderización de otro contenido. Un valor de sync le indica al navegador de que la imagen se debe presentar al mismo tiempo que otro contenido. El valor predeterminado de auto permite que el navegador decida lo que es mejor para la usuario.

Demostraciones de imágenes

Ponga a prueba sus conocimientos

¿Qué formatos de imagen admiten la compresión sin pérdida?

AVIF
o GIF.
JPEG.
WebP.
PNG.

¿Qué formatos de imagen admiten la compresión con pérdida?

o GIF.
JPEG.
AVIF
PNG.
WebP.

¿Qué dice el descriptor de ancho (por ejemplo, 1000w)? el navegador sobre una imagen candidata especificada en una srcset ?

El ancho extrínseco de la imagen, es decir, las dimensiones de la imagen en el diseño después de que se hayan aplicado los estilos a la página
Es el ancho intrínseco de la imagen, es decir, las dimensiones de la imagen propia.

¿Qué le informa al navegador el atributo sizes sobre un ¿Al elemento <img> al que se aplica?

El ancho intrínseco de la imagen que se cargará desde la Atributo srcset del elemento <img>.
Una lógica que exprese qué candidato se especificó en una Se debe cargar el srcset del elemento <img>. según las dimensiones del viewport actual del usuario.

A continuación: Rendimiento del video

Si bien las imágenes pueden ser el tipo de contenido multimedia más frecuente que se usa en la Web, son muy útiles del único que debe tener en cuenta cuando se trata de rendimiento. Video: es otro tipo común de medio de comunicación utilizado en toda la Web y viene con sus propias las consideraciones de rendimiento. En el siguiente módulo del curso, explorarás algunas de las sobre la optimización de videos y sobre cómo cargarlos eficazmente.