Dynamic Responsive Image
Proporciona un formateador de campo que genera dinámicamente estilos de imagen responsivos sobre la marcha basándose en las dimensiones del contenedor, eliminando la necesidad de estilos de imagen responsivos preconfigurados.
drimage
Instalar
composer require 'drupal/drimage:^2.3'
Overview
Dynamic Responsive Image (drimage) es una alternativa al módulo Responsive Image Style del núcleo de Drupal. Elimina la complejidad de configurar y mantener estilos de imagen responsivos simplemente al no requerir ninguna configuración. En lugar de predefinir puntos de ruptura y estilos de imagen, drimage calcula las dimensiones óptimas de la imagen basándose en el tamaño real del contenedor en el navegador y genera el estilo de imagen apropiado dinámicamente.
Cuando una página se carga, JavaScript mide el ancho del contenedor y solicita una imagen con el tamaño óptimo del servidor. El módulo crea y almacena en caché automáticamente los estilos de imagen según sea necesario, sirviendo imágenes perfectamente dimensionadas para cualquier tamaño de pantalla o dispositivo. Este enfoque reduce el uso de espacio en disco ya que solo se generan los tamaños de imagen realmente necesarios, mientras se asegura que las imágenes siempre coincidan con su contexto de visualización.
El módulo soporta múltiples modos de manejo de imágenes incluyendo escalado simple, recorte con relación de aspecto fija, imágenes de fondo con efectos de parallax, e integración con Image Widget Crop para áreas de recorte manuales. Incluye soporte WebP tanto a través del núcleo de Drupal como del módulo ImageAPI Optimize WebP, detección de proporción de píxeles del dispositivo para pantallas retina, y carga diferida nativa del navegador.
Features
- Genera automáticamente estilos de imagen responsivos sobre la marcha sin configuración manual
- Soporta múltiples modos de manejo de imágenes: escalar, recorte con relación de aspecto fija, imagen de fondo e integración con Image Widget Crop
- Soporte de formato de imagen WebP vía conversión de imagen del núcleo de Drupal o módulo ImageAPI Optimize WebP
- Detección de proporción de píxeles del dispositivo para optimización de pantallas de alta resolución/retina
- Umbral configurable para limitar el número de estilos de imagen generados y ahorrar espacio en disco
- Carga diferida nativa del navegador con desplazamiento configurable para precargar imágenes antes de que entren en el viewport
- Integración con el módulo Focal Point para recorte inteligente basado en coordenadas de punto focal
- Modo de imagen de fondo con efectos de parallax CSS (fijación fixed/scroll, dimensionado cover/contain)
- Reglas htaccess de Apache para servir derivados de imagen existentes sin inicializar Drupal
- Integración con Stage File Proxy para entornos de desarrollo
- Limpieza automática de estilos de imagen generados cuando cambia la configuración relacionada
- Comando Drush para eliminación masiva de estilos de imagen generados
- Oculta los estilos de imagen autogenerados del listado de administración de Image Styles para una interfaz más limpia
Use Cases
Imágenes Hero Responsivas
Usa el modo 'Fixed aspect ratio crop' con una proporción ancha como 16:9 o 21:9 para banners hero. Drimage generará versiones de tamaño apropiado para todos los anchos de pantalla mientras mantiene la relación de aspecto cinematográfica. Habilita la detección de proporción de píxeles del dispositivo para imágenes nítidas en pantallas retina.
Imágenes de Fondo de Ancho Completo con Parallax
Usa el modo 'Background image' con fijación 'fixed' para efectos de desplazamiento parallax. Establece la posición en 'center center' y el tamaño en 'cover' para imágenes que llenen su contenedor independientemente del tamaño de la pantalla. La altura de la imagen se controla mediante CSS en el elemento contenedor.
Galería de Productos con Recortes Manuales
Usa el modo 'Image widget crop' con un tipo de recorte cuadrado para miniaturas de productos consistentes. Los editores de contenido pueden posicionar manualmente el área de recorte en cada imagen, y drimage genera versiones de tamaño óptimo de esa área recortada para diferentes contextos de visualización.
Optimización de Rendimiento para Sitios con Muchas Imágenes
Establece un valor de umbral más alto (ej. 400-500 píxeles) para reducir el número de estilos de imagen generados mientras aceptas un poco más de escalado del lado del navegador. Habilita el soporte WebP para archivos 25-35% más pequeños. Usa el archivo htaccess prepend para servir derivados existentes sin inicializar Drupal.
Dirección de Arte con Focal Point
Instala el módulo Focal Point para recorte inteligente. Los editores establecen puntos focales en las imágenes, y drimage asegura que la parte importante de cada imagen permanezca visible en todos los tamaños generados, evitando recortes incómodos en dispositivos móviles.
Tips
- Habilita la detección de proporción de píxeles del dispositivo para imágenes nítidas en pantallas retina, pero ten en cuenta que esto aumenta el uso de ancho de banda para pantallas de alta resolución
- Usa la configuración 'Edad máxima de caché' solo si NO usas reglas htaccess de Apache - el enfoque htaccess es más eficiente ya que omite Drupal por completo
- El modo 'Background image' es ideal para secciones hero donde CSS controla la altura del contenedor y la imagen debe llenarlo completamente
- Cuando uses Image Widget Crop, las relaciones de aspecto deben ser consistentes en todo el tipo de recorte - drimage usa la relación de aspecto del tipo de recorte para los cálculos de tamaño
- Instala y configura el archivo htaccess prepend en producción para reducir dramáticamente la carga del servidor sirviendo derivados de imagen existentes directamente desde Apache
- Ejecuta 'drush drimage:delete-styles' después de hacer cambios significativos de configuración para asegurar que todas las nuevas imágenes usen la configuración actualizada
Technical Details
Admin Pages 1
/admin/config/media/drimage
Configura los ajustes globales para la generación dinámica de imágenes responsivas incluyendo umbrales de estilos de imagen, soporte WebP, detección de proporción de píxeles del dispositivo y comportamiento de caché.
Permisos 1
Hooks 2
hook_drimage_proxy_cache_periods_alter
Permite a los módulos modificar las opciones de período de caché disponibles que se muestran en el formulario de configuración de drimage.
hook_drimage_image_style_alter
Permite a los módulos modificar los estilos de imagen autogenerados antes de que se guarden. Útil para agregar efectos de imagen adicionales como marcas de agua, ajustes de color o tipos de recorte personalizados.
Drush Commands 1
drush drimage:delete-styles
Elimina todos los estilos de imagen generados por drimage de la base de datos. Útil para limpieza o cuando los cambios de configuración requieren regenerar todos los estilos.
Troubleshooting 6
Verifica la consola del navegador por errores de JavaScript. Asegúrate de que el campo de imagen esté usando el formateador 'Dynamic Responsive Image'. Verifica que el archivo de imagen fuente exista y sea accesible. Comprueba los permisos de archivo en el directorio de estilos.
Aumenta el umbral 'Diferencia mínima por estilo de imagen' en la configuración de drimage. Un valor más alto (300-500 píxeles) reduce significativamente el número de estilos generados mientras aumenta ligeramente el escalado del lado del navegador.
Verifica que tu toolkit de imágenes (GD o ImageMagick) soporte WebP comprobando el informe de estado en /admin/reports/status. Asegúrate de que core_webp o imageapi_optimize_webp esté habilitado en la configuración de drimage (no ambos). Para ImageAPI Optimize WebP, confirma que un pipeline predeterminado esté configurado.
Configura las reglas htaccess de Apache usando el archivo htaccess.prepend.txt proporcionado para servir derivados existentes directamente sin inicializar Drupal. Esto reduce significativamente la carga del servidor para solicitudes repetidas.
Drimage cachea los estilos de imagen agresivamente. Limpia las cachés o ejecuta 'drush drimage:delete-styles' para eliminar todos los estilos generados. Se regenerarán en la próxima solicitud con la información de recorte actualizada.
Esta advertencia es informativa. Drimage omite la protección de derivados inseguros porque usa IDs de archivo en lugar de tokens de imagen para la seguridad. El módulo maneja la seguridad a través de sus propios mecanismos.
Security Notes 3
- Drimage omite la protección allow_insecure_derivatives de Drupal pero implementa seguridad a través de validación de ID de archivo y verificación de dimensiones
- El módulo valida las dimensiones solicitadas contra los umbrales configurados para prevenir abuso a través de solicitudes de dimensiones arbitrarias
- Los encabezados de caché deben configurarse apropiadamente - deshabilita el caché si usas reglas htaccess, o establece valores max-age apropiados para caché de CDN/proxy