Image Optimize
Un framework para optimización de imágenes que proporciona pipelines con procesadores para optimizar imágenes, con integración nativa para los estilos de imagen de Drupal core.
imageapi_optimize
Instalar
composer require 'drupal/imageapi_optimize:^4.1'
Overview
El módulo Image Optimize proporciona un framework completo para la optimización de imágenes en Drupal. Introduce un sistema de 'pipelines' donde cada pipeline contiene múltiples 'procesadores' que se aplican secuencialmente para optimizar las imágenes.
Para optimizar una imagen, esta se pasa a un pipeline que orquesta la aplicación de cada procesador a la imagen en el orden de su peso configurado. Por ejemplo, puedes tener un pipeline para optimización sin pérdida que elimina metadatos innecesarios de las imágenes, y otro pipeline con pérdida que aplica recompresión a través de un servicio web de terceros.
El módulo proporciona soporte nativo para los estilos de imagen de Drupal. Después de aplicar los efectos habituales del estilo de imagen, la imagen derivada se pasa automáticamente a través de un pipeline de optimización configurable. Puedes establecer un pipeline predeterminado para todo el sitio o configurar un pipeline específico para cada estilo de imagen individualmente.
El módulo en sí no incluye ningún plugin de procesador - necesitas instalar módulos adicionales que proporcionen procesadores de optimización de imágenes reales, como Image Optimize Binaries, Image Optimize reSmush.it, Image Optimize TinyPNG o Kraken.
Features
- Crear y gestionar pipelines de optimización de imágenes con múltiples procesadores
- Reordenamiento de procesadores mediante arrastrar y soltar dentro de los pipelines
- Orden de ejecución de procesadores basado en peso
- Establecer un pipeline predeterminado para todo el sitio para todos los estilos de imagen
- Asignar pipelines específicos a estilos de imagen individuales
- Integración automática con los estilos de imagen de Drupal core - las derivadas se optimizan después de aplicar los efectos
- Vaciar imágenes en caché cuando se modifican los pipelines
- Selección de pipeline de reemplazo al eliminar un pipeline
- Sistema de plugins extensible para crear procesadores de imagen personalizados
- Soporte para plugins de procesador configurables y no configurables
- Gestión de archivos temporales durante el proceso de optimización
- Integración con invalidación de caché
- Soporte para exportación/importación de entidades de configuración
Use Cases
Optimización de imágenes sin pérdida
Crea un pipeline con procesadores que eliminan metadatos innecesarios de las imágenes sin reducir la calidad. Esto es ideal para sitios en producción donde quieres tamaños de archivo más pequeños pero no puedes aceptar ninguna pérdida de calidad. Usa procesadores como jpegtran (para JPEG) y optipng (para PNG) del módulo Image Optimize Binaries.
Compresión de imágenes con pérdida
Crea un pipeline con procesadores que aplican compresión con pérdida para la máxima reducción del tamaño de archivo. Usa un servicio como TinyPNG o reSmush.it que comprime imágenes de forma inteligente. Esto es ideal para sitios con muchas imágenes donde el ancho de banda es una preocupación y algo de pérdida de calidad es aceptable.
Pipeline de optimización multi-etapa
Crea un pipeline con múltiples procesadores en secuencia. Por ejemplo, primero usa jpegtran para eliminar metadatos, luego usa jpegoptim para aplicar compresión con pérdida. El sistema de pesos asegura que los procesadores se ejecuten en el orden correcto.
Optimización diferente por estilo de imagen
Asigna diferentes pipelines a diferentes estilos de imagen. Usa compresión con pérdida agresiva para estilos de miniaturas donde la calidad es menos importante, y optimización sin pérdida para imágenes a tamaño completo donde la calidad importa.
Predeterminado del sitio con excepciones
Establece un pipeline predeterminado del sitio para optimización general, luego sobrescríbelo para estilos de imagen específicos que necesiten tratamiento diferente. Por ejemplo, usa optimización sin pérdida como predeterminado pero usa compresión agresiva para miniaturas de galerías.
Tips
- Comienza con un pipeline de optimización sin pérdida simple y mide el ahorro en tamaño de archivo antes de añadir compresión con pérdida.
- Usa la operación 'Vaciar' con moderación en sitios de producción ya que fuerza la regeneración de todas las derivadas de imagen.
- La función de pipeline predeterminado del sitio te permite cambiar tu estrategia de optimización globalmente sin editar cada estilo de imagen.
- Los procesadores se ejecutan en orden de peso - usa esto para encadenar múltiples pasos de optimización efectivamente.
- Prueba tus pipelines de optimización con imágenes representativas antes de desplegar para asegurar calidad y tamaño de archivo aceptables.
- Para desarrollo, puedes usar '- Ninguno -' como pipeline para omitir la optimización y acelerar las pruebas.
Technical Details
Admin Pages 7
/admin/config/media/imageapi-optimize-pipelines
Página principal de administración para gestionar pipelines de optimización de imágenes. Lista todos los pipelines existentes con sus nombres y proporciona operaciones para editar, eliminar o vaciar cada pipeline. La página también incluye un formulario para establecer el pipeline predeterminado del sitio que se usará cuando se seleccione 'Pipeline predeterminado del sitio' en la configuración del estilo de imagen.
/admin/config/media/imageapi-optimize-pipelines/add
Formulario para crear un nuevo pipeline de optimización de imágenes. Después de la creación, serás redirigido al formulario de edición para añadir procesadores.
/admin/config/media/imageapi-optimize-pipelines/manage/{pipeline}
Formulario para configurar un pipeline existente añadiendo, editando, eliminando y reordenando procesadores. Muestra una tabla de todos los procesadores en el pipeline con capacidad de reordenamiento mediante arrastrar y soltar.
/admin/config/media/imageapi-optimize-pipelines/manage/{pipeline}/delete
Formulario de confirmación para eliminar un pipeline. Si existen otros pipelines, puedes seleccionar opcionalmente un pipeline de reemplazo para actualizar las configuraciones dependientes.
/admin/config/media/imageapi-optimize-pipelines/manage/{pipeline}/flush
Formulario de confirmación para vaciar todas las imágenes derivadas en caché que usan este pipeline. Esto fuerza la regeneración de todas las derivadas de imagen con la configuración actual del pipeline.
/admin/config/media/image-styles
La página de listado de estilos de imagen del core se mejora para mostrar una columna 'Pipeline de Image Optimize' para cada estilo, mostrando qué pipeline (si hay alguno) está asignado a cada estilo.
/admin/config/media/image-styles/manage/{style}
El formulario de edición de estilo de imagen del core se mejora con un desplegable de Pipeline de Image Optimize que permite seleccionar qué pipeline de optimización aplicar después de procesar todos los efectos de imagen.
Permisos 1
Hooks 2
hook_imageapi_optimize_processor_info_alter
Permite a los módulos alterar las definiciones de plugins de procesador de optimización de imágenes descubiertas por el gestor de plugins.
hook_imageapi_optimize_pipeline_flush
Se invoca cuando se vacía un pipeline, permitiendo a otros módulos realizar operaciones adicionales de limpieza de caché.
Troubleshooting 5
Asegúrate de tener al menos un módulo de procesador instalado (por ejemplo, imageapi_optimize_binaries). Verifica que se haya creado un pipeline con al menos un procesador, y que el pipeline esté asignado al estilo de imagen (ya sea como predeterminado o explícitamente).
Instala un módulo de procesador como imageapi_optimize_binaries, imageapi_optimize_resmushit o imageapi_optimize_tinypng. El módulo base no incluye ningún procesador.
Después de modificar un pipeline, puede que necesites vaciar el pipeline y regenerar las derivadas de imagen. Usa la operación 'Vaciar' en la página de lista de pipelines, o vacía los estilos de imagen asociados.
Si ves errores sobre procesadores faltantes, el módulo de procesador puede necesitar ser rehabilitado. El módulo incluye un hook de actualización (8003) que intenta rehabilitar los módulos de procesador automáticamente.
Asegúrate de que el módulo imageapi_optimize esté correctamente habilitado. El módulo altera el formulario y la entidad de estilo de imagen para añadir el campo de pipeline.
Security Notes 3
- El permiso 'Administrar pipelines de Image Optimize' solo debe otorgarse a administradores de confianza ya que procesadores mal configurados podrían potencialmente afectar el rendimiento del sitio.
- Al usar servicios externos (TinyPNG, reSmush.it, Kraken), las imágenes se envían a servidores de terceros para su procesamiento. Considera esto al manejar imágenes sensibles.
- Las claves API para servicios externos deben almacenarse de forma segura en la configuración y no exponerse en el control de versiones.