Comment et pourquoi convertir vos photos en format WebP?
Nous avons récemment travaillé sur l’optimisation du site web d’un client et avons vu comment le format WebP peut faire toute une différence. Dans cet article, nous vous expliquons ce que c’est, comment et pourquoi l’utiliser. Nous vous donnerons également quelques outils que vous pouvez utiliser.
C’est quoi le format WebP pour les photos?
C’est un format d’image créé par Google qui propose une compression supérieur des photos. Via la configuration, vous pouvez définir à quel pourcentage vous souhaitez compresser votre photo. Il est particulièrement utile pour le web dans la mesure où cela affecte moins la performance de votre site web.
D’après les explications de la documentation de Google, la taille des images WebP est 26 % inférieur à celle des images PNG. En faisant une comparaison avec le format JPG, on peut estimer de 25 à 34 %. Cela vous donne une idée à quel point cela peut améliorer la 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, cela réduit considérablement la taille de vos photos (avec perte ou sans perte). Cela vous permet d’aussi 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 mieux présenter ses produits ou services. Grâce à l’optimisation de vos photos, vous pouvez facilement réduire la taille des images et permettre à vos utilisateurs d’avoir 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. Une autre option pourrait être 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. 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. 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épendant du logiciel de conception de site web que vous utilisez, vous trouverez des extensions ou des modules pour faire la conversion de vos photos. 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 l’importer.
Pour ce fait, vous devez évidemment utiliser un outil pour convertir vos photos. Je préconiserai deux options:
- Utiliser un logiciel ou outil en ligne
- ou télécharger une extension de lecture WebP sur votre ordinateur.
Utiliser les outils en ligne peuvent être intéressants. 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 du fait que vous pouvez convertir vos photos directement à partir de votre ordinateur avant de l’importer sur votre site web.
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 trouvez sur GitHub plusieurs codes relativement intéressant que vous pouvez exploiter pour l’adapter à votre projet. Alternativement, vous pouvez vous inspirer de la documentation de php.net pour créer votre code.
Notre équipe s’est récemment lancée dans le développement d’un code pour convertir toutes les photos de WordPress en format WebP. L’idée est de faire une requête dans la base de données. Ensuite liste toutes les photos importées sur le site et les convertir en WebP. Cela est plutôt un succès dans la mesure où cela permet de réduire considérablement le temps de chargement tout en nous évitant de faire 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
Vous pouvez code le fichier dans votre thème courant et utiliser la fonction « include » de WordPress pour l’ajouter à votre fichier functions.php. Nous utilisons un cron job pour exécuter le code. Cela permet de ne pas avoir à 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. En gros. Si vous incluez le code dans votre fichier functions.php et utilisez le lien ci-dessous, vous allez être en mesure de faire la conversion.
Important:
- Nous vous recommandons d’utiliser le code avec précaution. En effet, nous l’avons testé sur trois sites internet. Mais, cela ne garantit pas que cela marchera sur tous les sites web.
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 sites web sur mesure, Contactez-nous.
