Usa políticas de imágenes optimizadas para asegurarte de que tu sitio use las imágenes con el mejor rendimiento.
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.
Si aplico la siguiente política de permisos, obtengo una imagen de marcador de posición.
Permissions-Policy: oversized-images *(2);
Obtengo resultados similares si solo disminuyo el ancho o 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.
Si aplico la siguiente política de permisos, obtengo una imagen de marcador de posición.
Permissions-Policy: unoptimized-lossy-images *(0.5);
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!