Casos de uso de la optimización de imágenes

En esta página, se proporcionan ejemplos del comportamiento avanzado del procesamiento de imágenes, los efectos del orden de la canalización y las reglas de normalización automática de imágenes.

Orden de transformaciones

Las operaciones en la cadena de parámetros de consulta imop se ejecutan de forma secuencial de izquierda a derecha, con la excepción de metadata o scale, que se ejecutan primero, y canvas, que se ejecuta en último lugar. Debido a que cada operación actúa directamente sobre el resultado visual de la operación anterior, la secuencia de los parámetros afecta la calidad visual final y la preservación de los detalles de la imagen derivada.

Considera una imagen de origen que tenga 1,000 píxeles de ancho por 1,000 píxeles de alto:

Ejemplo: Resize seguido de Crop

https://www.example.com/image.jpg?imop=Resize,height=200;Crop,left=0.5

  1. Redimensionar: Primero, la imagen se reduce de 1,000 × 1,000 px a 200 × 200 px para cumplir con el parámetro height=200.

  2. Recortar: la operación left=0.5 quita la mitad izquierda de la imagen que ya se redujo.

Resultado: Una imagen final de 100 x 200 px que representa el 50% del contenido de la derecha. Debido a que se redujo toda la imagen antes de recortarla, la región final conserva muchos menos detalles.

Ejemplo : Crop seguido de Resize

https://www.example.com/image.jpg?imop=Crop,left=0.5;Resize,height=200

  1. Recortar: La left=0.5operación extrae primero el 50% de la derecha de la imagen de origen de alta resolución, lo que crea una 500 x 1000 px imagen intermedia.

  2. Cambiar tamaño: La operación height=200 cambia el tamaño de esa sección recortada a su altura final.

Resultado: Una imagen final de 100 * 200 px. Debido a que la imagen original se recortó primero y se cambió de tamaño más tarde, el resultado final conserva muchos más detalles y claridad.

Comportamiento de estiramiento y ampliación

De forma predeterminada, el servicio de optimización de imágenes aplica una estrategia estricta de solo reducción para conservar el ancho de banda de entrega perimetral y proteger la calidad visual. Si solicitas dimensiones más grandes que la imagen original, Cloud CDN ignora la ampliación y genera la imagen en su tamaño original.

Para anular este comportamiento y forzar la ampliación de un recurso, debes declarar explícitamente el valor stretch.

Requisitos de validación para la ampliación

  • Regla de tamaño doble: el valor stretch solo se permite si proporcionas explícitamente los parámetros width y height en la operación Resize.

  • Restricción de dimensión única: Si incluyes scaling=stretch mientras defines solo una dimensión, como width o height, el servicio de optimización de imágenes rechaza toda la solicitud.

Por ejemplo:

Solicitud válida: ?imop=resize,width=500,height=500,scaling=stretch

Solicitud no válida: ?imop=resize,width=500, scaling=stretch

Almacenamiento en caché e invalidación de caché

Cuando actualizas una imagen original en tu servidor de origen, debes invalidar la versión almacenada en caché para asegurarte de que Cloud CDN recupere y entregue el recurso actualizado.

Comportamiento del almacenamiento en caché

Cada combinación única de parámetros de transformación agregados a una URL de imagen crea una entrada de caché separada y distinta en el perímetro. Para optimizar la proporción de aciertos de caché, evita crear una cantidad excesiva de variaciones de parámetros únicos. Por ejemplo, cambios de un solo píxel.

Cloud CDN normaliza las claves de caché para agrupar parámetros de transformación idénticos, independientemente de su orden en la cadena de consulta.

Comportamiento de invalidación

Cuando actualizas una imagen original en tu servidor de origen, solo debes enviar una solicitud de invalidación para la URL de la imagen base. El Cloud CDN mejorado borra automáticamente la imagen original almacenada en caché y todas sus variantes generadas automáticamente (como WebP o versiones optimizadas) de forma global.

Cómo funciona la invalidación de variantes

Cuando emites una solicitud de invalidación de caché con un patrón de ruta que coincide con una URL de imagen base, por ejemplo,/images/my-picture.jpg, Cloud CDN identifica y borra automáticamente lo siguiente:

  • La imagen de origen original almacenada en caché

  • Todas sus variantes generadas anteriormente

Puedes aplicar la invalidación de caché de Cloud CDN de las siguientes maneras:

  • Consola de Google Google Cloud Cloud: Navega a Servicios de red > Cloud CDN, selecciona el origen y ve a la pestaña Invalidación de caché. Como alternativa, ve a Servicios de red > Balanceo de cargas, selecciona tu balanceador de cargas y usa la pestaña Invalidación de caché.

  • Google Cloud CLI: Usa el comando Google Cloud CLI compute url-maps invalidate-cdn-cache.

  • Etiquetas de caché : Las etiquetas de caché son el enfoque recomendado para administrar imágenes optimizadas. Esto te permite emitir solicitudes de invalidación dirigidas a una etiqueta específica, que borra el contenido asociado para un control más detallado.

Por ejemplo:

Para invalidar /images/my-picture.jpg y todas sus variantes optimizadas de forma global, haz lo siguiente:

  • Ruta de acceso: Especifica la ruta de acceso exacta /images/my-picture.jpg.

  • Host (opcional): Especifica el host si solo quieres borrar la imagen para un dominio específico.

Cuando se envía, esta acción única quita todas las versiones optimizadas de la imagen de las cachés perimetrales de forma global, lo que garantiza que los usuarios reciban de inmediato la versión actualizada en su próxima solicitud.

Perfil de color y orientación de la imagen en EXIF (normalización)

Los smartphones y las cámaras digitales modernos suelen guardar imágenes con cuadrículas de píxeles sin procesar y sin rotar, y se basan en una etiqueta de orientación EXIF integrada para indicarle al dispositivo de visualización que rote la imagen. Por ejemplo, 90 grados en el sentido de las manecillas del reloj para la orientación vertical. Del mismo modo, los perfiles de color ICC integrados definen cómo se muestran los colores en diferentes monitores.

Para garantizar operaciones predecibles, la canalización perimetral de optimización de imágenes normaliza automáticamente las imágenes antes de ejecutar cualquier transformación.

Proceso de normalización

  • Antes de ejecutar las transformaciones, el motor perimetral lee las etiquetas de orientación EXIF y los metadatos del perfil de color ICC, y los aplica físicamente a la cuadrícula de píxeles. Esto ayuda a garantizar la previsibilidad de las coordenadas para los parámetros crop y resize posteriores.

  • Las operaciones, como crop, resize o scale, se ejecutan correctamente en las dimensiones visuales verdaderas para evitar errores visuales.

  • Después de aplicar ajustes a los píxeles principales, el motor perimetral quita todos los metadatos no esenciales del archivo para maximizar el ahorro de tamaño. De forma predeterminada, conserva copyright, a menos que se solicite un valor específico en la operación de metadatos.

¿Qué sigue?