Usa políticas de imágenes optimizadas para asegurarte de que tu sitio utilice las imágenes con el mejor rendimiento.
Las imágenes suelen ocupar una cantidad significativa de espacio visual y conforman la mayor parte de los bytes descargados en un sitio web. La optimización de imágenes puede mejorar el rendimiento de carga y reducir el tráfico de red.
Sorprendentemente, más de la mitad de los sitios en la Web muestran imágenes mal comprimidas o innecesariamente grandes. Esto deja mucho margen para mejoras de rendimiento simplemente al optimizar las imágenes.
Es posible que te preguntes: ¿Cómo sé si mis imágenes están optimizadas y cómo debo optimizarlas? Estamos experimentando con un nuevo conjunto de políticas de funciones para la optimización de imágenes: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images y unoptimized-lossless-images-strict.
Ahora, todo está disponible para las pruebas de origen.
Políticas de imágenes optimizadas
En la política de permisos, se introduce un nuevo conjunto de restricciones en las imágenes que se pueden aplicar con la aplicación forzosa durante el desarrollo. Las imágenes que infrinjan cualquiera 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 de solo informes, en el que las imágenes se renderizarán con normalidad sin aplicación forzosa mientras se observan los incumplimientos a través de los informes. (Consulta Modo de solo informes en el mundo, a continuación, para obtener más detalles).
imágenes-de-muy grande
La política de permisos oversized-images restringe las dimensiones intrínsecas de una imagen en relación con el tamaño del 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 cualquiera de las dimensiones se reemplazará por una imagen de marcador de posición.
¿Por qué?
La entrega de imágenes más grandes de lo que puede renderizar el dispositivo de visualización (por ejemplo, entregar imágenes de escritorio a contextos de dispositivos móviles o entregar imágenes de alta densidad de píxeles en un dispositivo de baja densidad de píxeles) implica desperdiciar tráfico de red y memoria del dispositivo. Consulta Publica imágenes con las dimensiones correctas y Publica imágenes responsivas para obtener información sobre cómo optimizar tus imágenes.
Ejemplos
Esto se ilustra en algunos ejemplos. A continuación, se muestra el comportamiento predeterminado cuando se corta a la mitad el tamaño de visualización de una imagen.
Si aplico la siguiente política de permisos, obtendré una imagen de marcador de posición.
Permissions-Policy: oversized-images *(2);
Obtengo resultados similares si solo bajo 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
<iframe>allow
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 X para reducir la escala verticalmente) para los orígenes, especificados entre paréntesis (opcional)
Te recomendamos que reduzcas la proporción de 2.0 o menos. Considera usar imágenes responsivas con diferentes resoluciones para que las imágenes se entreguen mejor en varios tamaños de pantalla, resoluciones, etcétera.
Más ejemplos
Permissions-Policy: oversized-images *(2.0)
La política se aplica de manera forzosa en todos los orígenes con un valor de umbral de 2.0. No se permiten los elementos <img> con una imagen cuya relación de reducción de escala sea mayor que 2.0, y se reemplazarán 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 valor de umbral de 1.5.
Los elementos <img> en contextos de navegación de nivel superior y los mismos contextos de navegación anidada de origen solo se renderizarán normalmente si la proporción de reducción de escala es menor o igual que 1.5. Los elementos <img> en el resto de las ubicaciones se renderizarán con normalidad.
imágenes-{con,sin-pérdidas}-optimizadas
Las políticas de funciones unoptimized-lossy-images, unoptimized-lossless-images y unoptimized-lossless-images-strict restringen el tamaño del archivo de una imagen en relación con su resolución intrínseca:
unoptimized-lossy-images- Los formatos con pérdida no deben exceder 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 como ancho x alto x X + 1,024.
unoptimized-lossless-images- Los formatos sin pérdida no deben exceder una proporción de bytes por píxel de X, con una asignación de sobrecarga fija de 10 KB. Para una imagen de ancho x alto, el umbral de tamaño del archivo se calcula como ancho x alto x X + 10240.
unoptimized-lossless-images-strict- Los formatos sin pérdida no deben exceder 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 como ancho x alto x X + 1,024.
Cuando un documento use cualquiera de estas políticas, cualquier elemento <img> que infrinja
la restricción se reemplazará por una imagen de marcador de posición.
¿Por qué?
Cuanto más grande sea el tamaño de descarga, más tiempo tardará en cargarse la 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 la compresión de imágenes, etcétera. Consulta 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 con pérdida no optimizada de la misma manera que una imagen optimizada.
Si aplico la siguiente política de permisos, obtendré una imagen de marcador de posición.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
Si no conoces la política de permisos, consulta la Introducción a la política de permisos para obtener más detalles.
En resumen, las políticas unoptimized-{lossy,lossless}-images se pueden especificar de las siguientes maneras:
- Encabezado HTTP
Permissions-Policy - Atributo
<iframe>allow
Para declarar una política 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, proporción X de bytes por píxel) para los orígenes, especificados entre paréntesis (opcional)
Recomendamos una proporción de bytes por píxel de 0.5 o inferior para unoptimized-lossy-images y una proporción de bytes por píxel de 1 o inferior para unoptimized-lossless-images y unoptimized-lossless-images-strict.
Los formatos WebP tienen mejores proporciones de compresión que otros formatos. Si puedes, entrega todas tus imágenes en formato WebP con pérdida. Si eso no es suficiente, prueba el formato WebP sin pérdidas. Usa JPEG en navegadores que no admitan formatos WebP. Usa PNG si ninguno de los 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 en 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 cualquier 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 mismos contextos de navegación anidados de origen solo se renderizarán normalmente si la proporción de bytes por píxel cumple con estas restricciones. Los elementos <img> en el resto de las ubicaciones se renderizarán con normalidad.
Modo de solo informes en el mundo
Es posible que no quieras publicar un sitio con imágenes de marcador de posición. Puedes usar
las políticas en 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 Informes de políticas de permisos para obtener más detalles). Al igual que el encabezado HTTP Permissions-Policy, el encabezado Permissions-Policy-Report-Only te permite observar informes de incumplimientos en el entorno sin restricciones.
Limitaciones
Las políticas de imágenes solo funcionan en elementos de imagen HTML (<img>, <source>, etc.) y aún no son compatibles con imágenes de fondo ni contenido generado. Si quieres que las políticas se admitan en contenidos más amplios, comunícate con nosotros.
Optimiza tus imágenes
Ya hablamos bastante sobre la optimización de imágenes, pero no explicamos cómo hacerlo. Ese tema está fuera 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 mencionan al final.
Envíanos tus comentarios
Esperamos que este artículo te haya ayudado a comprender 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 que se mencionan en este artículo a nuestra lista de distribución: feature-control@chromium.org.
Nos encantaría saber qué valores de umbral utilizaste y te resultaron útiles. Nos encantaría saber si unoptimized-lossless-images o unoptimized-lossless-images-strict son más intuitivos y fáciles de usar, o si debemos utilizar una asignación de sobrecarga de diferencia en su lugar. Enviaremos una encuesta
cerca del final de la prueba. ¡No te pierdas las novedades!