Optimiser le chargement des images avec Webp

Les images représentent souvent la majeure partie du poids d’une page web. Optimiser leur format est crucial pour améliorer la vitesse de chargement et l’expérience utilisateur. Dans cet article, nous allons voir comment convertir automatiquement les images uploadées dans WordPress en WebP et supprimer l’original pour gagner en performance.

1. Qu’est-ce qu’une image ?

Une image numérique est une représentation visuelle composée de pixels, utilisée sur les sites web pour illustrer du contenu ou enrichir l’expérience utilisateur.

Types courants sont  le JPEG , PNG, GIF, SVG

Remarque: Une image optimisée réduit le temps de chargement et améliore le référencement naturel (SEO). Google à tendance a faire dégringoler dans le classement des résultats de recherche si vos image mettent trop longtemps à charger.

2. Pourquoi utiliser le format WebP ?

Le WebP est un format d’image moderne développé par Google. il permet reduire le poids ce qui permet d’augmenter ce fameux temps de chargement

Avantages :

• Taille de fichier réduite jusqu’à 30-70% par rapport à JPEG ou PNG.
• Supporte la transparence (comme PNG).
• Qualité visuelle conservée.

Impact SEO :

• Pages plus rapides → meilleur classement sur Google.
• Meilleure expérience utilisateur → moins de rebonds.

A voir : Les tooltips une solution simple pour l’ergonomie de ton site

Conversion automatique en WebP sur WordPress avec GD

WordPress ne convertit pas nativement les images en WebP. Avec PHP et la librairie GD, il est possible d’automatiser cette conversion lors de l’upload.

Placez ce code dans votre function.php :

// Convertir automatiquement les images uploadées en WebP et supprimer l'original
add_filter('wp_handle_upload_prefilter', 'ncode_convert_to_webp');

function ncode_convert_to_webp($file) {
    $image_types = ['image/jpeg', 'image/png'];
    if (!in_array($file['type'], $image_types)) return $file;

    $image_path = $file['tmp_name'];
    $info = pathinfo($file['name']);
    $webp_file = $info['dirname'] . '/' . $info['filename'] . '.webp';

    // Charger l'image selon le type
    if ($file['type'] === 'image/jpeg') {
        $img = imagecreatefromjpeg($image_path);
    } elseif ($file['type'] === 'image/png') {
        $img = imagecreatefrompng($image_path);
    }

    if ($img) {
        imagewebp($img, $webp_file, 80); // qualité 80%
        imagedestroy($img);

        // Supprimer l'image originale et remplacer les infos du fichier
        unlink($image_path);
        $file['tmp_name'] = $webp_file;
        $file['name'] = $info['filename'] . '.webp';
        $file['type'] = 'image/webp';
    }

    return $file;
}

Des que vous verserez vos images , WordPress fera la conversion automatiquement vers du webp.