Générer des styles d'images automatiquement avec Drupal 8

Drupal 8 permet de générer des styles d'images selon de nombreux effets (réduction, découpe, noir et blanc, etc) pour chaque image téléversée. Vous pouvez avoir très rapidement de nombreux styles d'images, et d'autant plus si vous utilisez un rendu responsive pour celles-ci, permettant de proposer des dimensions différentes en fonction du terminal utilisé pour consulter votre site Internet.

Ces styles d'images sont générés lors d'une première consultation d'une page utilisant ceux-ci, ce qui peut être pénalisant en terme de performances, voire de rendu, quand vous avez de nombreux médias, avec autant de styles d'images que de points de rupture, comme par exemple sur une page d'atterrissage ou une page de listing.

Le snippet ci-dessous va vous permettre de générer automatiquement tous les styles d'images possibles, au moment du téléversement de l'image source.

use Drupal\image\Entity\ImageStyle;
use Drupal\Core\Entity\EntityInterface;

/**
 * Implements hook_entity_insert().
 * Generate all image styles once an Image is uploaded.
 */
function MYMODULE_entity_insert(EntityInterface $entity) {
  /** @var \Drupal\file\Entity\File $entity */
  if ($entity instanceof FileInterface) {
    $image = \Drupal::service('image.factory')->get($entity->getFileUri());
    /** @var \Drupal\Core\Image\Image $image */
    if ($image->isValid()) {
      $styles = ImageStyle::loadMultiple();
      $image_uri = $entity->getFileUri();
      /** @var \Drupal\image\Entity\ImageStyle $style */
      foreach ($styles as $style) {
        $destination = $style->buildUri($image_uri);
        $style->createDerivative($image_uri, $destination);
      }
    }
  }
}

Le résultat sera un délai légèrement plus important pour le rédacteur, au moment de l'enregistrement de son contenu, mais un gain conséquent pour les visiteurs, en terme de performance et de vitesse de chargement des pages, car alors toutes les versions possibles d'une image source auront déjà été générées, évitant alors de nombreux appels PHP lors de la première consultation d'une page, surtout si celle-ci contient de nombreuses images.

Pour améliorer l'expérience utilisateur, il est aussi possible d'utiliser la Cron API de Drupal 8 pour mettre en file d'attente la génération de ces styles d'images au moment de l'enregistrement d'une image source, réduisant le temps d'enregistrement initial. Mais ceci pourra faire l'objet d'un autre billet.

Vous avez des problématiques de performances sur votre site Drupal 8 ? N'hésitez pas à consulter un freelance spécialiste Drupal 8.