Políticas de imágenes para tiempos de carga rápidos y mucho más

Usa políticas de imágenes optimizadas para asegurarte de que tu sitio use las imágenes con el mejor rendimiento.

Luna Lu
Luna Lu

A menudo, las imágenes ocupan una cantidad significativa de espacio visual y representan la mayor parte de los bytes descargados en un sitio web. Optimizar imágenes puede mejorar el rendimiento de carga y reducir el tráfico de red.

Sorprendentemente, más de la mitad de los sitios de la Web publican imágenes de gran tamaño o mal comprimidas. Esto deja mucho espacio para las mejoras de rendimiento simplemente optimizando las imágenes.

Te preguntarás cómo saber si tus imágenes están optimizadas y cómo debes optimizarlas. Estamos experimentando con un nuevo conjunto de políticas de componentes para la optimización de imágenes: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images y unoptimized-lossless-images-strict. Ahora, todos están disponibles para las pruebas de origen.

Políticas de imágenes optimizadas

La política de permisos presenta un nuevo conjunto de restricciones en las imágenes que se puede aplicar con la aplicación forzosa durante el desarrollo. Las imágenes que infrinjan alguna de las restricciones se renderizarán como imágenes de marcador de posición, que son fáciles de identificar y corregir. Estas políticas se pueden especificar en el modo informativo, en el que las imágenes se renderizarán de forma normal sin aplicación forzosa mientras se observan los incumplimientos a través de informes. (Consulta el modo de solo informes en el exterior, a continuación para obtener más detalles).

oversized-images

La política de permisos oversized-images restringe las dimensiones intrínsecas de una imagen en relación con el tamaño de su contenedor.

Cuando un documento usa la política oversized-images, cualquier elemento <img> cuya resolución intrínseca sea más de X veces mayor que el tamaño del contenedor en cualquier dimensión se reemplazará por una imagen de marcador de posición.

¿Por qué?

Publicar imágenes más grandes de lo que puede renderizar el dispositivo de visualización (por ejemplo, publicar imágenes para computadoras de escritorio en contextos para dispositivos móviles o publicar imágenes de alta densidad de píxeles en un dispositivo de baja densidad de píxeles) desperdicia el tráfico de red y la memoria del dispositivo. Lee Publica imágenes con las dimensiones correctas y Publica imágenes responsivas para obtener información sobre cómo optimizar tus imágenes.

Ejemplos

A continuación, se incluyen algunos ejemplos. A continuación, se muestra el comportamiento predeterminado cuando se corta el tamaño de visualización de una imagen por la mitad.

Es el comportamiento predeterminado de cambio de tamaño.
Es el comportamiento predeterminado de cambio de tamaño.

Si aplico la siguiente política de permisos, obtengo una imagen de marcador de posición.

Permissions-Policy: oversized-images *(2);

Cuando la imagen es demasiado grande para el contenedor.
Cuando la imagen es demasiado grande para el contenedor.

Obtengo resultados similares si solo disminuyo el ancho o la altura.

Ancho modificado Se cambió el tamaño de la altura
Cambia el ancho y la altura.

How to use

En resumen, la política oversized-images se puede especificar de las siguientes maneras:

  • Encabezado HTTP Permissions-Policy
  • Atributo allow <iframe>

Para declarar la política oversized-images, debes proporcionar lo siguiente:

  • El nombre de la función, oversized-images (obligatorio)
  • Una lista de orígenes (opcional)
  • Los valores de umbral (es decir, la proporción de reducción X) para los orígenes, especificados entre paréntesis (opcional)

Recomendamos una relación de reducción de 2.0 o menos. Considera usar imágenes responsivas con diferentes resoluciones para entregar imágenes de la mejor manera en varios tamaños de pantalla, resoluciones, etcétera.

Más ejemplos

Permissions-Policy: oversized-images *(2.0)

La política se aplica a todos los orígenes con un valor de límite de 2.0. No se permite ningún elemento <img> con una imagen cuya relación de reducción sea superior a 2.0 y se reemplazará por una imagen de marcador de posición.

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

La política se aplica de manera forzosa en el origen del sitio con un umbral de 1.5. Los elementos <img> en contextos de navegación de nivel superior y los contextos de navegación anidados del mismo origen solo se renderizarán de forma normal si la proporción de reducción es menor o igual a 1.5. Los elementos <img> en cualquier otro lugar se renderizarán de forma normal.

imágenes-sin-optimizar-{con-pérdida,sin-pérdida}

Las políticas de funciones unoptimized-lossy-images, unoptimized-lossless-images y unoptimized-lossless-images-strict restringen el tamaño de archivo de una imagen en relación con su resolución intrínseca:

unoptimized-lossy-images
Los formatos con pérdida no deben superar una proporción de bytes por píxel de X, con una asignación de sobrecarga fija de 1 KB. Para una imagen de ancho x alto, el umbral de tamaño del archivo se calcula de la siguiente manera: ancho x alto x X + 1,024.
unoptimized-lossless-images
Los formatos sin pérdida no deben superar una proporción de bytes por píxel de X, con una asignación de sobrecarga fija de 10 KB. Para una imagen de W × H, el umbral de tamaño del archivo se calcula como W × H × X + 10240.
unoptimized-lossless-images-strict
Los formatos sin pérdida no deben superar una proporción de bytes por píxel de X, con una asignación de sobrecarga fija de 1 KB. Para una imagen de W × H, el umbral de tamaño de archivo se calcula como W × H × X + 1024.

Cuando un documento usa cualquiera de estas políticas, cualquier elemento <img> que incumpla la restricción se reemplazará por una imagen de marcador de posición.

¿Por qué?

Cuanto mayor sea el tamaño de descarga, más tardará en cargarse una imagen. El tamaño del archivo debe ser lo más pequeño posible cuando se optimiza una imagen: se quitan metadatos, se elige un buen formato de imagen, se usa compresión de imágenes, etcétera. Lee Cómo usar Imagemin para comprimir imágenes y Cómo usar imágenes WebP para obtener información sobre cómo optimizar tus imágenes.

Ejemplo

A continuación, se muestra el comportamiento predeterminado del navegador. Sin la política de permisos, se puede mostrar una imagen sin optimizar con pérdida de la misma manera que una imagen optimizada.

Comparación de una imagen optimizada con una no optimizada
Comparación de una imagen optimizada con una no optimizada.

Si aplico la siguiente política de permisos, obtengo una imagen de marcador de posición.

Permissions-Policy: unoptimized-lossy-images *(0.5);

Cuando la imagen no está optimizada
Cuando la imagen no está optimizada.

How to use

Si es la primera vez que usas la política de permisos, consulta la Introducción a la política de permisos para obtener más información.

En resumen, las políticas de unoptimized-{lossy,lossless}-images se pueden especificar a través de lo siguiente:

  • Encabezado HTTP Permissions-Policy
  • Atributo allow <iframe>

Para declarar una política de unoptimized-{lossy,lossless}-images, deberás proporcionar lo siguiente:

  • El nombre de la función, por ejemplo, unoptimized-lossy-images (obligatorio)
  • Una lista de orígenes (opcional)
  • Los valores de umbral (es decir, la relación de bytes por píxel X) para los orígenes, especificados entre paréntesis (opcional)

Recomendamos una proporción de bytes por píxel de 0.5 o menos para unoptimized-lossy-images y una proporción de bytes por píxel de 1 o menor para unoptimized-lossless-images y unoptimized-lossless-images-strict.

Los formatos WebP tienen mejores relaciones de compresión que otros formatos. Si puedes, publica todas tus imágenes en formato WebP con pérdida. Si eso no es suficiente, prueba el formato sin pérdidas de WebP. Usa JPEG en navegadores que no admitan formatos WebP. Usa PNG si ninguno de estos formatos funciona.

Si usas formatos WebP, prueba con umbrales más estrictos:

  • 0.2 para WEBPV8
  • 0.5 para WEBPL

Más ejemplos

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

Esta política se aplica a todos los orígenes con un valor de umbral de 0.5 (para formatos con pérdida) y 1 (para formatos sin pérdida). No se permite ningún elemento <img> cuya imagen tenga una proporción de bytes por píxel que supere la restricción y se reemplazará por una imagen de marcador de posición.

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

Esta política se aplica en el origen del sitio con un valor de umbral de 0.3 (para formatos con pérdida) y 0.8 (para formatos sin pérdida). Los elementos <img> en los contextos de navegación de nivel superior y los contextos de navegación anidados del mismo origen solo se renderizarán de forma normal si la relación de bytes por píxel cumple con estas restricciones. Los elementos <img> en cualquier otro lugar se renderizarán de forma normal.

Modo de solo informes en el exterior

Es posible que no sea conveniente publicar un sitio con imágenes de marcador de posición. Puedes usar las políticas en el modo de aplicación (con imágenes no optimizadas renderizadas como imágenes de marcador de posición) durante el desarrollo y la etapa de pruebas, y usar el modo de solo informes en producción. (consulta los informes de la Política de Permisos para obtener más información). Al igual que el encabezado HTTP Permissions-Policy, el encabezado Permissions-Policy-Report-Only te permite observar informes de incumplimientos en el campo de acción sin ninguna aplicación forzosa.

Limitaciones

Las políticas de imágenes solo funcionan en elementos de imágenes HTML (<img>, <source>, etc.) y aún no se admiten en imágenes de fondo ni contenido generado. Si quieres que las políticas se admitan en contenido más amplio, comunícate con nosotros.

Cómo optimizar tus imágenes

Hablé bastante sobre la optimización de las imágenes, pero no te indiqué cómo hacerlo. Ese tema no está dentro del alcance de este artículo, pero puedes obtener más información en los vínculos que aparecen a continuación y en los codelabs que se indican al final del artículo.

Envíanos tus comentarios

Esperamos que este artículo te haya permitido comprender mejor las políticas de imágenes y te haya entusiasmado. Nos encantaría que pruebes las políticas y nos envíes tus comentarios.

Puedes enviarnos comentarios sobre cada una de las funciones mencionadas en este artículo a nuestra lista de distribución: feature-control@chromium.org.

Nos encantaría saber qué valores de umbral usaste y que te resultaron útiles. Nos gustaría saber si unoptimized-lossless-images o unoptimized-lossless-images-strict es más intuitivo y fácil de usar, o si deberíamos usar una diferencia de asignación de sobrecarga. Enviaremos una encuesta casi al final de la prueba. ¡No te pierdas ninguna novedad!