Comment et pourquoi convertir vos photos en format WebP?

En travaillant sur l’optimisation du site web d’un client, nous avons réalisé comment le format WebP peut faire toute la différence. C’est pour cela que dans cet article, nous vous expliquons ce que c’est, comment et pourquoi l’utiliser. Par ailleurs, nous vous donnons également quelques outils que vous pouvez utiliser.

C’est quoi le format WebP pour les photos?

C’est un format d’images créé par Google qui propose une compression de qualité supérieure des photos. Via la configuration, vous définissez à quel pourcentage vous souhaitez compresser votre photo. Il est particulièrement utile pour le web dans la mesure où il a moins d’impact sur la performance de votre site web.

D’après les explications de la documentation de Google, la taille des images WebP est 26 % inférieure à celle des images PNG. En faisant une comparaison avec le format JPG, on peut estimer cette diminution de 25 à 34 %. Cela vous donne une idée du degré d’amélioration de performance.

Comme vous pouvez le voir sur la capture d’écran ci-dessous, nous avons créé un code pour remplacer les formats png et jpg en format WebP, le résultat est incroyable. 

Si vous souhaitez en savoir plus sur la compression WebP, nous vous recommandons l’article de Google.

Pourquoi utiliser le format WebP?

À la vue de ce que nous avons abordé plus haut, assurément, l’utilisation de la compression WebP est un plus pour votre site web. En effet, elle réduit considérablement la taille de vos photos (avec perte ou sans perte). Ce qui vous permet alors d’avoir un site web beaucoup plus rapide et une meilleure expérience des utilisateurs.

Les photos ont généralement un impact considérable sur le temps de chargement des pages. Pourtant, elles sont très importantes pour présenter les produits ou services. Grâce à l’optimisation de vos photos, vous pouvez facilement réduire la taille des images et permettre à vos utilisateurs de jouir d’une bonne expérience sur votre site web.

Comment optimiser vos photos grâce à la compression WebP?

Il existe plusieurs approches pour convertir ses photos en format WebP. Parmi ces approches, on peut citer l’utilisation des extensions (si vous utilisez un gestionnaire de contenu). Vous pouvez également utiliser quelques exemples de code en ligne pour l’adapter à votre besoin. Toutefois, une autre option serait de convertir manuellement vos photos avant de les utiliser.

1 – Utilisation des extensions ;

Vous trouverez dans la librairie des gestionnaires de contenu que vous utilisez plusieurs extensions pour optimiser vos photos. D’ailleurs, nous avons particulièrement utilisé les extensions WordPress que nous vous proposons.

LiteSpeed Cache

C’est une solution qui est disponible en ligne que vous pouvez simultanément utiliser pour optimiser vos pages et vos images. Par ailleurs, vous le trouverez certainement compatible avec plusieurs CMS. Dans WordPress, il y a une option pour transformer les photos en format WebP.

« Converter for Media – Optimize images | Convert WebP & AVIF»

C’est une extension avec près de 200 000 téléchargements disponible sur WordPress. Vous pouvez la déceler en faisant la recherche directement à partir de votre onglet extensions. Alternativement, allez sur le site web wordpress.org.

Dépendamment du logiciel de conception de site web que vous utilisez, vous trouverez des extensions ou des modules pour faire la conversion de vos photos. Alors, nous vous recommandons de lire la description et les conditions avant usage.

2 – Ajouter manuellement les photos en format WebP ;

Plusieurs logiciels modernes de création de site web acceptent le WebP comme format des photos. Alternativement, il est toujours possible de faire des ajustements dans la configuration ou le serveur. Concernant WordPress, depuis la version 5.8, il est possible d’importer directement les photos WebP. Par conséquent, il est largement suffisant de convertir manuellement ses photos et de les importer.

Pour ce faire, vous devez évidemment utiliser un outil pour convertir vos photos. Je préconise deux options :

• Utiliser un logiciel ou outil en ligne, ou
• Télécharger une extension de lecture WebP sur votre ordinateur.

L’utilisation des outils en ligne peut être intéressante. Cependant, vous ne devez pas perdre de vue l’aspect confidentialité ou le risque de vol de vos photos. La seconde option est idéale, compte tenu de ce que vous pouvez convertir vos photos directement à partir de votre ordinateur avant de les importer sur votre site web.

À cet effet, vous trouverez ci-dessous quelques exemples d’applications de conversion ou d’utilisation des photos WebP sous Windows.

3 – Utiliser la programmation personnalisée pour automatiser la conversion de vos photos ;

Nous avons trouvé à GitHub, plusieurs codes relativement intéressants, que vous pouvez exploiter afin de les adapter à votre projet. Alternativement, vous pouvez vous inspirer de la documentation de php.net pour créer votre code.

Notre équipe a récemment développé un code pour convertir toutes les photos de WordPress en format WebP. Il s’agit de faire une requête dans la base de données. Ensuite de lister toutes les photos importées sur le site et les convertir en WebP. C’est un succès dans la mesure où le temps de chargement est considérablement réduit et cela nous évite une conversion manuelle.

<?php 
/** 
 * 
 *   Photo converter
 * */ 
function webpConvert2($file, $compression_quality = 80)
{
    // check if file exists
    if (!file_exists($file)) {
        return false;
    }
    $file_type = exif_imagetype($file);
    $ddd = str_replace(".png","",$file);
     $ddd = str_replace(".jpg","",$ddd);
     $ddd = str_replace(".jpeg","",$ddd);
    $output_file =  $ddd . '.webp';
    if (file_exists($output_file)) {
        return $output_file;
    }
    if (function_exists('imagewebp')) {
        switch ($file_type) {
            case '1': //IMAGETYPE_GIF
                $image = imagecreatefromgif($file);
                break;
            case '2': //IMAGETYPE_JPEG
                $image = imagecreatefromjpeg($file);
                break;
            case '3': //IMAGETYPE_PNG
                    $image = imagecreatefrompng($file);
                    imagepalettetotruecolor($image);
                    imagealphablending($image, true);
                    imagesavealpha($image, true);
                    break;
            case '6': // IMAGETYPE_BMP
                $image = imagecreatefrombmp($file);
                break;
            case '15': //IMAGETYPE_Webp
               return false;
                break;
            case '16': //IMAGETYPE_XBM
                $image = imagecreatefromxbm($file);
                break;
            default:
                return false;
        }
        // Save the image
        $result = imagewebp($image, $output_file, $compression_quality);
        if (false === $result) {
            return false;
        }
        // Free up memory
        imagedestroy($image);
        return $output_file;
    } elseif (class_exists('Imagick')) {
        $image = new Imagick();
        $image->readImage($file);
        if ($file_type === "3") {
            $image->setImageFormat('webp');
            $image->setImageCompressionQuality($compression_quality);
            $image->setOption('webp:lossless', 'true');
        }
        $image->writeImage($output_file);
        return $output_file;
    }
    return false;
}
/** 
 * 
 *   Insert into table
 * */ 



/** 
 * 
 *   Convert photo
 * */ 

function psw_photo($attachment_id, $size) {
    $para = array();
    $fullsize_path = get_attached_file($attachment_id);
    $image_attributes = wp_get_attachment_image_src( $attachment_id, $size);
    $news = "";
    if ( $image_attributes ) : 
$data2 =  explode("/wp-content/",$fullsize_path);
$data = explode("/wp-content/",$image_attributes[0]);
$absolute = $data2[0]."/wp-content/".$data[1];
$webP =  webpConvert2($absolute);
if(!empty($webP)) {
$news = home_url().str_replace($data2[0],'', sanitize_text_field($webP) );
} else {
    $news = $image_attributes[0];
}
endif; 
return $news;
}
/** 
 * 
 *   Replace previeous with webp
 * */ 

function update_attachment_filename($post_ID, $image) {
global $wpdb;
        $file = $image;
$file_headers = @get_headers($file);
if(!$file_headers || $file_headers[0] == 'HTTP/1.1 404 Not Found') {
 
}
else {
 


            // Get path to existing attachment
            $file = get_attached_file( $post_ID );
            $path = pathinfo( $file );

 
 $ddddd = explode("/", $image);
 $toa = count($ddddd); 
 $poart = $ddddd[$toa - 1];
            // Create new attachment name
       $file_updated = $path['dirname'] . '/' . $poart;
       
 

         // Update the attachment name
          //  rename( $file, $file_updated );
            update_attached_file( $post_ID, $file_updated );
if ( ! function_exists( 'wp_crop_image' ) ) {
	include( ABSPATH . 'wp-admin/includes/image.php' );
}
            // Update attachment meta data
            $file_updated_meta = wp_generate_attachment_metadata( $post_ID, $file_updated );
       //     print_r($file_updated_meta);
           wp_update_attachment_metadata( $post_ID, $file_updated_meta );
           
            $basename = $path['basename']; 
            
      
            
            
          $query1 = "UPDATE $wpdb->postmeta SET meta_value = REPLACE(meta_value,'$basename','$poart');";
           $wpdb->query($query1); 
           $query2 = "UPDATE $wpdb->posts SET post_content = REPLACE(post_content,'$basename','$poart');";
           $wpdb->query($query2); 
           $query3 = "UPDATE $wpdb->posts SET guid = REPLACE(guid,'$basename','$poart');";
           $wpdb->query($query3); 
           
            $query3 = "UPDATE $wpdb->posts SET post_title = REPLACE(post_title,'$basename','$poart');";
           $wpdb->query($query3); 
           

           
            $query4 = "UPDATE  $wpdb->postmeta SET meta_value = REPLACE(meta_value,'$basename','$poart') WHERE post_id = $post_ID AND meta_key = '_wp_attached_file' ;";
           $wpdb->query($query4); 

$url = sanitize_title($poart);
$url2 = sanitize_title($basename);
$my_post = array(
      'ID'           => $post_ID,
      'post_name'   => $url,
      'post_mime_type' => 'image/webp',
  );

// Update the post into the database
  wp_update_post( $my_post );
    }
}
/** 
 * 
 *   Process data
 * */ 
    

function psw_create_converted_version() {
    global $wpdb;
    if(isset($_GET)  && !empty($_GET['cronss']) && strcmp($_GET['cronss'], 'idppdldllglglglgdpd') === 0) { 
    $query = get_posts(  array(
	'post_type'      => 'attachment',
	'orderby'          => 'ID',
	'order'            => 'DESC',
	'posts_per_page' =>  5,
//	'post_status'    => 'inherit',
  //  'post_parent' => 61682,
	'meta_query' => array(
    array(
     'key' => 'already_converted_pictures',
     'compare' => 'NOT EXISTS' // this should work...
    ),
)
) );

$sizes = array("full"); 
$attachments = $query;
if ( $attachments ) {
	foreach ( $attachments as $post ) {
	    
	  $image_attributes = wp_get_attachment_image_src($post->ID);
	    $id = $post->ID; 
 $image_attributes = wp_get_attachment_image_src( $id );
if ( $image_attributes ) :
if (strpos($image_attributes[0], '.webp') === false) {
    $new = psw_photo($id, "full"); 
update_attachment_filename($id, $new);

echo $new, " ", $image_attributes[0], "<br/>";
}
endif;
add_post_meta($id, 'already_converted_pictures', 'red', true );
}
}
exit;
}

}
add_action('init', 'psw_create_converted_version', 1000);

Mode de fonctionnement du code

Codez le fichier dans votre thème courant et utilisez la fonction « include » de WordPress pour ajouter le code à votre fichier functions.php. Nous utilisons un cron job pour exécuter le code. Cela permet ainsi de ne pas passer le temps à refaire les mêmes actions. Simultanément, nous avons ajouté un paramètre qui aide à identifier quand le code doit s’exécuter.  Succinctement, si vous avez inclus le code dans votre fichier functions.php, utilisez le lien ci-dessous pour faire la conversion.

Important:

• Nous vous recommandons d’utiliser le code avec précaution. En effet, nous l’avons testé sur trois sites internet. Toutefois, rien ne garantit que cela marchera sur tous les sites web.

Conclusion

En conclusion, vous avez tous les outils qu’il vous faut pour optimiser vos images. Que vous soyez un amateur en développement web, un expert ou un propriétaire d’entreprise, vous pouvez choisir les options qui cadrent avec votre besoin. Si vous souhaitez travailler avec des experts en création de site web sur mesure, contactez-nous.