Image Styles in Drupal
Drupal include nativamente un sistema potente di manipolazione immagini: Image Styles. Per ogni style si definiscono effetti (scale, crop, resize) applicati on-demand al primo accesso, con cache su disco. Combinato con Responsive Image module si servono varianti ottimali per device.
Creare uno style
Da /admin/config/media/image-styles si crea un nuovo style (es. "Article hero"). Si aggiungono effetti:
- Scale: ridimensiona mantenendo aspect ratio
- Scale and crop: ridimensiona e ritaglia al centro
- Crop: ritaglia a dimensione fissa
- Convert: cambia formato (jpg, webp)
- Desaturate: bianco/nero
WebP e AVIF
Convertire a WebP riduce il peso del 25-35% rispetto a JPEG mantenendo qualità visiva. Si aggiunge un'effect Convert > WebP. Drupal 10 supporta nativamente WebP; per AVIF serve PHP con libavif.
Responsive Image module
Il modulo core Responsive Image consente di generare il tag <picture> con multipli srcset per breakpoint. Si crea uno responsive image style che mappa breakpoint a image style:
1x mobile: max-width 480px => image_style_small 1x tablet: 480-1024px => image_style_medium 1x desktop: min 1024px => image_style_large
Breakpoint del tema
I breakpoint si dichiarano in mytheme.breakpoints.yml:
mytheme.mobile: label: mobile mediaQuery: '(max-width: 480px)' weight: 0 multipliers: ['1x', '2x']
Focal Point
Il modulo focal_point (contrib) consente all'editor di cliccare sul punto focale dell'immagine (es. il viso di una persona) che diventa il centro del crop, anche in formati molto diversi (square, ultra-wide, vertical).
Crop module
Per ritagli manuali per-immagine: crop + image_widget_crop permettono di definire ritagli specifici per ogni image style direttamente sull'upload, salvati come crop entity.
Lazy loading
Drupal 9.1+ include lazy loading automatico via loading="lazy" sui tag img. Riduce il payload iniziale e migliora i Core Web Vitals (LCP).
Performance derivative
Le derivative immagini sono cache disk in sites/default/files/styles/. In ambienti multi-server condivisi tramite NFS, S3 (con modulo s3fs) o object storage. Cron image_style_flush rigenera dopo modifiche al style.
CDN
Per traffico globale servire immagini via CDN (CloudFront, Cloudflare Images). Cloudflare Images può generare le varianti on-the-fly bypassando Drupal Image Styles.
Hai bisogno di aiuto?
Se vuoi un sito Drupal performante dal team di G Tech Group, scrivici tramite il modulo di contatto.