Performance WordPress : Convertir automatiquement ses images en WebP (sans plugin)

Après avoir configuré l’Instant Click et nettoyé le Lazy Loading dans notre précédent guide, il reste un pilier incontournable pour maximiser la vitesse de votre site WordPress : le poids des images.

Uploader des fichiers au format PNG ou JPEG est aujourd’hui une mauvaise pratique pour vos scores Core Web Vitals (notamment le LCP). Google recommande massivement le format WebP, un format moderne qui réduit le poids des images de 30% à 80% sans perte de qualité visible.

Dans ce guide complet, nous allons voir comment automatiser entièrement cette conversion. Une fois ce tutoriel en place, chaque image JPG ou PNG que vous glisserez dans votre tableau de bord sera instantanément transformée en WebP par votre serveur, juste après son téléversement. Zéro plugin requis au quotidien.

1. Pourquoi le WebP est indispensable (et pourquoi bannir les plugins usines à gaz)

Le constat est simple : une page web moyenne est composée à plus de 50% d’images. Plus vos images sont lourdes, plus le smartphone de votre visiteur mettra du temps à charger la page, et plus Google pénalisera votre référencement (SEO).

Pour résoudre cela, la majorité des utilisateurs de WordPress installent des extensions lourdes qui :

  • Tournent en continu en tâche de fond.
  • Ajoutent des requêtes inutiles à votre base de données.
  • Facturent souvent un abonnement mensuel dès que vous dépassez un quota de pixels.

Pourtant, votre serveur d’hébergement sait déjà convertir les images. WordPress intègre nativement des outils de traitement d’images extrêmement puissants (GD ou Imagick). Il suffit de leur donner les bonnes instructions à l’aide d’un court snippet PHP.

2. Le plan d’action : Régler le passé, automatiser le futur

Pour que votre site soit parfaitement propre, nous allons appliquer une stratégie en deux temps :

  1. Traiter l’historique (Les anciennes images) : Pour convertir d’un coup toutes les images déjà présentes dans votre bibliothèque sans faire planter votre serveur, utilisez temporairement l’extension gratuite Converter for Media. Lancez l’optimisation globale. Une fois le travail terminé, supprimez définitivement l’extension. Votre historique est propre.
  2. Automatiser le futur : Installez le script ci-dessous. Il s’occupera d’intercepter, de convertir chaque nouveau téléversement, puis de détruire proprement le fichier lourd d’origine.

3. Le Code à copier : Le convertisseur automatique (Version Sécurisée)

Copiez ce code dans le fichier functions.php de votre thème enfant ou via votre gestionnaire de snippets favori (comme WPCode ou Code Snippets) :

PHP

/**
 * morfredus - 06p - Conversion Automatique WebP
 * Conversion des JPG/PNG en WebP après le téléversement initial.
 */

if ( ! defined( 'ABSPATH' ) ) exit;

add_filter( 'wp_generate_attachment_metadata', function ( $metadata, $attachment_id, $context ) {
    // 1. Récupération du fichier d'origine
    $file = get_attached_file( $attachment_id );
    $type = get_post_mime_type( $attachment_id );

    // 2. Ciblage des fichiers JPEG, JPG et PNG uniquement
    $allowed_types = [ 'image/jpeg', 'image/jpg', 'image/png' ];
    if ( ! in_array( $type, $allowed_types ) ) {
        return $metadata;
    }

    // 3. Vérification de la disponibilité des outils serveur
    if ( ! extension_loaded( 'gd' ) && ! class_exists( 'Imagick' ) ) {
        return $metadata;
    }

    // 4. Préparation des chemins pour le format WebP
    $pathinfo  = pathinfo( $file );
    $dirname   = $pathinfo['dirname'];
    $filename  = $pathinfo['filename'];
    $webp_file = $dirname . '/' . $filename . '.webp';

    // 5. Utilisation de l'éditeur d'image natif de WordPress
    $image = wp_get_image_editor( $file );

    if ( ! is_wp_error( $image ) ) {
        // Qualité de compression optimale
        $image->set_quality( 82 );

        // Sauvegarde au format WebP
        $saved = $image->save( $webp_file, 'image/webp' );

        if ( ! is_wp_error( $saved ) ) {
            // 6. Mise à jour de WordPress pour utiliser le WebP à la place du PNG/JPG
            update_attached_file( $attachment_id, $webp_file );

            // Ajustement des données en base de données
            wp_update_post([
                'ID'             => $attachment_id,
                'post_mime_type' => 'image/webp',
                'guid'           => str_replace( $pathinfo['basename'], $filename . '.webp', get_the_guid( $attachment_id ) )
            ]);

            // Régénération des métadonnées pour que les miniatures soient aussi créées en WebP
            $metadata['file'] = str_replace( $pathinfo['basename'], $filename . '.webp', $metadata['file'] );
            if ( isset( $metadata['sizes'] ) && is_array( $metadata['sizes'] ) ) {
                foreach ( $metadata['sizes'] as $size => $size_info ) {
                    $metadata['sizes'][$size]['mime-type'] = 'image/webp';
                }
            }

            // 7. Suppression du fichier original pour libérer l'espace disque
            if ( file_exists( $file ) ) {
                @unlink( $file );
            }
        }
    }

    return $metadata;
}, 10, 3 );

4. Explication didactique : Que fait ce script en coulisses ?

Si vous débutez en code, voici comment cette fonction sur-mesure prend soin de votre hébergement :

  • Le filtre de post-production (wp_generate_attachment_metadata) : Contrairement aux versions de scripts basiques qui essaient de modifier l’image pendant le transfert dans un dossier temporaire du serveur (ce qui provoque souvent des erreurs de droits et des échecs de téléversement), ce code attend que l’image soit bien arrivée à destination dans votre dossier uploads. C’est l’approche la plus stable.
  • Le ciblage chirurgical (Sections 2 et 3) : On indique au script de ne travailler que sur le jpg, le jpeg et le png. De plus, il vérifie que votre hébergeur web possède les outils requis pour manipuler les images. Si tout est bon, il passe à l’action.
  • La compression magique à 82% (Section 5) : C’est le réglage des professionnels de l’imagerie web. À 82% de qualité, l’œil humain est strictement incapable de voir la différence avec une image à 100%. En revanche, le fichier passe par exemple de 1,2 Mo à seulement 180 Ko.
  • La mise à jour transparente de WordPress (Section 6) : C’est la force de ce script. Non seulement il crée le fichier .webp, mais il modifie à la volée la base de données de WordPress pour remplacer l’ancienne extension. Pour votre site, l’image d’origine a toujours été un WebP.
  • Le nettoyage de sécurité (Section 7) : Une fois le fichier WebP généré et validé par WordPress, le script supprime définitivement le fichier source lourd (png ou jpg). Pas de doublons, pas de serveurs surchargés.

5. Comment vérifier que la conversion fonctionne ?

C’est très simple à valider :

  1. Prenez une image lourde au format .png ou .jpg sur votre ordinateur.
  2. Allez dans votre tableau de bord WordPress, puis dans Médias > Ajouter.
  3. Glissez votre image. Le téléversement se déroule normalement et se finalise sans erreur.
  4. Cliquez sur l’image pour ouvrir ses détails.
  5. Regardez les infos à droite : Le nom du fichier se termine désormais par .webp et son type est bien image/webp.

Vous venez de diviser le poids de vos futurs médias par quatre, le tout proprement, de manière totalement invisible et sécurisée. Vos scores de performance mobile et vos visiteurs vous remercieront !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *