L’optimisation des images est une étape cruciale pour améliorer les performances des sites web, notamment les blogs WordPress.

Pourquoi diminuer la taille des images

En convertissant les images dans des formats modernes comme AVIF ou WebP, on peut réduire considérablement leur taille sans sacrifier la qualité. Ces formats, plus récents et plus efficaces que les traditionnels JPEG ou PNG, permettent de diminuer le poids des images, ce qui se traduit par une réduction significative du temps de chargement des pages web. Un site web qui se charge rapidement offre une meilleure expérience utilisateur, essentielle pour maintenir l’engagement des visiteurs.

De plus, la vitesse de chargement d’un site est un facteur important pour le référencement naturel (SEO). Les moteurs de recherche, tels que Google, favorisent les sites à chargement rapide dans leurs résultats de recherche. Par conséquent, l’optimisation des images en utilisant des formats comme AVIF ou WebP est une stratégie essentielle pour améliorer les temps de réponse des blogs WordPress et, par extension, pour optimiser le positionnement SEO et la visibilité en ligne.

Pré-requis

1. Disposer de Python sur son ordinateur
2. Disposer des librairies PIL (Pillow) et Tkinker
3. Installer FFmpeg. Sous Windows le plus simple est d’utiliser winget, le gestionnaire de paquets de Microsoft :

winget install ffmpeg

Plus d’infos sur l’installation de FFMPEG ici.

Description du code

Ce script Python utilise la bibliothèque Tkinter pour créer une interface graphique utilisateur (GUI) qui permet de convertir des images dans un répertoire donné en format AVIF ou WebP. Le script est conçu pour être facile à utiliser et accessible, même pour ceux qui n’ont pas d’expérience approfondie en programmation. Voici une description détaillée du code, adaptée à des étudiants :

1. Importation des Modules Nécessaires :
   • os : Utilisé pour interagir avec le système d’exploitation, notamment pour parcourir les répertoires.
   • subprocess : Permet d’exécuter des commandes système (ici, pour utiliser ffmpeg).
   • tkinter : Une bibliothèque standard de Python pour créer des interfaces graphiques.
   • filedialog et messagebox (de tkinter) : Pour ouvrir des fenêtres de dialogue permettant de sélectionner des fichiers et d’afficher des messages.
2. Définition du Chemin vers FFmpeg :
   • ffmpeg_path : Chemin d’accès à l’exécutable FFmpeg, un outil de traitement vidéo/audio.
3. Fonction de Conversion d’Images (convert_images) :
   • Parcourt tous les fichiers dans le répertoire spécifié.
   • Convertit les fichiers d’image (.jpg, .jpeg, .png) en format AVIF ou WebP en utilisant FFmpeg.
   • Option pour supprimer les fichiers originaux après conversion.
4. Fonction de Navigation dans les Répertoires (browse_directory) :
   • Permet à l’utilisateur de sélectionner un répertoire via une fenêtre de dialogue.
   • Met à jour le champ de texte dans l’interface avec le chemin du répertoire sélectionné.
5. Fonction de Démarrage de la Conversion (start_conversion) :
   • Récupère les informations de l’interface (chemin du répertoire, format de conversion, choix de suppression des originaux).
   • Déclenche le processus de conversion avec ces paramètres.
6. Création de l’Interface Graphique :
   • root : La fenêtre principale de l’application.
   • Éléments de l’interface : étiquettes (Label), champ de saisie (Entry), boutons (Button), cases à cocher (Checkbutton), et boutons radio (Radiobutton).
   • Disposition des éléments dans la fenêtre (grid).
7. Boutons et Options de l’Interface :
   • Bouton « Parcourir » pour sélectionner le répertoire source.
   • Case à cocher pour choisir de supprimer ou non les fichiers originaux.
   • Boutons radio pour sélectionner le format de conversion (AVIF ou WebP).
   • Bouton « Démarrer la conversion » pour lancer le processus avec les options choisies.
8. Lancement de l’Interface Graphique :
   • root.mainloop() démarre l’interface et attend les interactions de l’utilisateur.

Ce script est un exemple pratique de la façon dont Python peut être utilisé pour créer des applications avec une interface graphique, en intégrant des fonctionnalités système comme la conversion de fichiers via ffmpeg. Il montre également comment automatiser des tâches répétitives et les rendre plus accessibles grâce à une interface utilisateur conviviale.

Code Python

</pre>
import os
import subprocess
import tkinter as tk
from tkinter import filedialog
from tkinter import messagebox
from PIL import Image

ffmpeg_path = r"C:\Users\user\AppData\Local\Microsoft\WinGet\Packages\Gyan.FFmpeg_Microsoft.Winget.Source_8wekyb3d8bbwe\ffmpeg-6.1.1-full_build\bin\ffmpeg.exe"

def convert_images(directory, delete_original=False, format="avif"):
try:
for root, dirs, files in os.walk(directory):
for file in files:
if file.lower().endswith(('.jpg', '.jpeg', '.png')):
file_path = os.path.join(root, file)
if format == "avif":
output_file = f"{os.path.splitext(file_path)[0]}.avif"
else: # format == "webp"
output_file = f"{os.path.splitext(file_path)[0]}.webp"

# Convertir en utilisant ffmpeg
subprocess.run([ffmpeg_path, '-i', file_path, output_file], check=True)

# Supprimer le fichier original si nécessaire
if delete_original:
os.remove(file_path)

print(f"Converted: {file_path} -> {output_file}")
except Exception as e:
messagebox.showerror("Erreur lors de la conversion", str(e))

def browse_directory():
try:
directory = filedialog.askdirectory().replace('\\', '/')
directory_entry.delete(0, tk.END)
directory_entry.insert(0, directory)
except Exception as e:
messagebox.showerror("Erreur lors de la sélection du répertoire", str(e))

def start_conversion():
try:
directory = directory_entry.get()
delete_original = delete_var.get()
format_choice = format_var.get()
convert_images(directory, delete_original, format_choice)
except Exception as e:
messagebox.showerror("Erreur lors du démarrage de la conversion", str(e))

# Créer une fenêtre Tkinter
root = tk.Tk()
root.title("Convertisseur d'images")

# Champ pour le répertoire source
tk.Label(root, text="Répertoire source :").grid(row=0, column=0)
directory_entry = tk.Entry(root, width=50)
directory_entry.grid(row=0, column=1)

# Bouton pour naviguer et sélectionner le répertoire
browse_button = tk.Button(root, text="Parcourir", command=browse_directory)
browse_button.grid(row=0, column=2)

# Checkbox pour supprimer les fichiers originaux
delete_var = tk.BooleanVar()
delete_checkbox = tk.Checkbutton(root, text="Supprimer les fichiers originaux", variable=delete_var)
delete_checkbox.grid(row=1, column=1, sticky='w')

# Option de sélection du format de conversion
format_var = tk.StringVar(value="avif")
tk.Radiobutton(root, text="AVIF", variable=format_var, value="avif").grid(row=2, column=0)
tk.Radiobutton(root, text="WebP", variable=format_var, value="webp").grid(row=2, column=1)

# Bouton pour démarrer la conversion
start_button = tk.Button(root, text="Démarrer la conversion", command=start_conversion)
start_button.grid(row=3, column=1)

# Lancer l'interface graphique
root.mainloop()
<pre>

Mise à jour de la base WordPress

Mettre à jour une base de données WordPress pour remplacer les images sources par des images converties en formats AVIF ou WebP est un processus qui nécessite une certaine prudence. WordPress stocke les informations sur les médias dans la table wp_posts et les métadonnées associées dans la table wp_postmeta.

Voici une approche générale pour effectuer cette mise à jour :

Sauvegarde de la Base de Données :

Avant de procéder à des modifications, assurez-vous de sauvegarder votre base de données. En cas d’erreur, vous pourrez ainsi la restaurer à son état initial.

Mise à Jour des Fichiers sur le Serveur :

Après avoir converti vos images en AVIF ou WebP, téléchargez-les dans le répertoire approprié de votre serveur WordPress, généralement dans wp-content/uploads.

Mise à Jour de la Base de Données :

Vous devrez mettre à jour les références aux anciens fichiers (par exemple, .jpg, .png) pour qu’elles pointent vers les nouveaux fichiers (par exemple, .avif, .webp) dans la base de données. Ceci peut être fait via une requête SQL pour remplacer les anciens chemins de fichier par les nouveaux.
Par exemple :

UPDATE wp_posts SET post_content = REPLACE(post_content, '.jpg', '.avif') WHERE post_content LIKE '%.jpg%';
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, '.jpg', '.avif') WHERE meta_value LIKE '%.jpg%';

Cette requête remplace toutes les occurrences de .jpg par .avif. Répétez pour d’autres extensions si nécessaire.

Gestion des Vignettes (Thumbnails) :

WordPress génère des vignettes pour chaque image téléchargée. Si vous remplacez des images, vous devrez peut-être régénérer ces vignettes. Des plugins comme « Regenerate Thumbnails » peuvent être utilisés pour cette tâche.

Test et Vérification :

Après la mise à jour, vérifiez soigneusement votre site pour vous assurer que toutes les images s’affichent correctement. Testez différentes pages et articles pour vous assurer qu’il n’y a pas de problèmes d’affichage.

Considérations SEO et Compatibilité :

Gardez à l’esprit que tous les navigateurs ne prennent pas en charge les formats AVIF et WebP. Pensez à utiliser des balises pour fournir des images de secours en formats plus traditionnels. De plus, assurez-vous que les nouvelles images sont bien indexées et reconnues par les moteurs de recherche.

Utiliser un Plugin :

Si cette approche manuelle semble trop complexe ou risquée, envisagez d’utiliser un plugin WordPress dédié à la gestion des images et à leur optimisation. Certains plugins peuvent automatiquement convertir les images et mettre à jour les références dans la base de données.

N’oubliez pas que la manipulation directe de la base de données peut être risquée ; si vous n’êtes pas à l’aise avec cette opération, il peut être judicieux de faire appel à un développeur WordPress expérimenté.