# Un bloc et Cloudflare Images : redimensionnement à la volée sans plugin

> Un bloc image personnalisé qui délègue le redimensionnement à Cloudflare Images via son URL de variantes, plutôt que d'ajouter un plugin d'optimisation classique.

- Auteur : WordPress Développement
- Publié le : 2022-11-14
- Mis à jour le : 2022-11-14
- Catégorie : Blocs Gutenberg
- URL : https://www.wpmoderne.fr/blocs/bloc-cloudflare-images-redimensionnement-sans-plugin/

## L’essentiel

- Aucune génération locale de tailles d'image sur le serveur WordPress
- Les variantes sont définies une fois côté Cloudflare, réutilisées partout
- Le poids des pages baisse sans plugin supplémentaire à maintenir

« combien de tailles d'image WordPress génère-t-il par défaut à chaque upload ? » La réponse, sur une installation standard sans personnalisation, tourne autour de six à huit variantes différentes, stockées physiquement sur le serveur, pour un usage qui ne couvre pourtant souvent que deux ou trois formats réellement affichés sur le site. Sur un hébergement mutualisé à l'espace disque limité, ce gaspillage finit par coûter cher.

Le bloc image développé pour ce projet ne génère plus aucune taille localement : il délègue entièrement le redimensionnement à Cloudflare Images, en construisant une URL de variante à la volée, calculée en fonction du contexte d'affichage du bloc.

## Le principe des variantes Cloudflare Images

Une fois une image envoyée sur Cloudflare Images, chaque variante définie côté tableau de bord (par exemple `vignette`, `pleine-largeur`) devient accessible via une URL dédiée, générée à la demande par Cloudflare et mise en cache sur son réseau de diffusion :

```
https://imagedelivery.net/{identifiant-compte}/{identifiant-image}/pleine-largeur
```

Aucun fichier redimensionné n'est stocké sur le serveur WordPress : seule l'image source et l'identifiant retourné par Cloudflare lors de l'upload sont conservés en métadonnée d'article.

## Structure du bloc image personnalisé

Le bloc remplace le bloc image natif pour les contenus qui passent par ce flux, avec un attribut qui stocke l'identifiant Cloudflare plutôt que l'identifiant de média WordPress classique :

```
{
  "apiVersion": 2,
  "name": "wpmoderne/image-cloudflare",
  "title": "Image (Cloudflare Images)",
  "attributes": {
    "cloudflareImageId": { "type": "string" },
    "variante": { "type": "string", "default": "pleine-largeur" },
    "alt": { "type": "string", "default": "" }
  },
  "render_callback": "wpmoderne_render_image_cloudflare"
}
```

> L'essentiel à retenir : Aucune génération locale de tailles d'image sur le serveur WordPress ; Les variantes sont définies une fois côté Cloudflare, réutilisées partout ; Le poids des pages baisse sans plugin supplémentaire à maintenir

## Le rendu côté serveur

Le `render_callback` construit simplement l'URL de la variante demandée, sans aucun traitement d'image local :

```
function wpmoderne_render_image_cloudflare( $attributes ) {
    $compte_id = CLOUDFLARE_IMAGES_ACCOUNT_ID;
    $image_id  = esc_attr( $attributes['cloudflareImageId'] );
    $variante  = esc_attr( $attributes['variante'] );
    $alt       = esc_attr( $attributes['alt'] );

    $url = "https://imagedelivery.net/{$compte_id}/{$image_id}/{$variante}";

    return sprintf(
        '<img src="%s" alt="%s" loading="lazy" />',
        esc_url( $url ), $alt
    );
}
```

L'attribut `loading="lazy"`, supporté nativement par les navigateurs modernes, complète naturellement cette approche : il évite de charger les images hors champ, en complément du gain déjà obtenu sur le poids de chaque image individuelle.

## Définir les variantes une seule fois

Contrairement à une génération de tailles WordPress classique, où chaque nouveau format nécessite de régénérer les miniatures de tous les médias existants, une nouvelle variante Cloudflare s'applique immédiatement à toutes les images déjà envoyées, sans traitement de masse à relancer :

- Une variante `vignette` à largeur fixe de 320 pixels, utilisée dans les listes d'articles.
- Une variante `pleine-largeur` avec une largeur maximale de 1600 pixels, adaptée au contenu principal.
- Un format de sortie automatique choisi par Cloudflare selon le navigateur du visiteur (WebP ou AVIF quand c'est supporté), sans configuration supplémentaire côté bloc.

## Ce que cet article ne couvre pas

L'upload direct des images vers Cloudflare Images depuis l'éditeur, avec une interface de téléversement personnalisée qui remplace la médiathèque WordPress, demande un développement complémentaire non traité ici, qui se contente de consommer des images déjà envoyées. La facturation du service, basée sur le nombre d'images stockées et le volume de livraisons, dépend du plan souscrit et se négocie indépendamment de cette implémentation technique.

## En résumé

Déléguer le redimensionnement à un service dédié plutôt que de le laisser à la charge du serveur WordPress allège nettement l'espace disque utilisé et le temps de traitement à l'upload, sans plugin d'optimisation supplémentaire à maintenir. Le compromis reste une dépendance à un service externe, mais celui-ci publie une documentation stable et un format d'URL prévisible, ce qui limite le risque de rupture future.