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:
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?
¿Qué formatos de imagen admiten la compresión con pérdida?
¿Qué dice el descriptor de ancho (por ejemplo, 1000w)?
el navegador sobre una imagen candidata especificada en una srcset
?
¿Qué le informa al navegador el atributo sizes sobre un
¿Al elemento <img> al que se aplica?
srcset del elemento <img>.
según las dimensiones
del viewport actual del usuario.
srcset del elemento <img>.
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.