L’optimisation des images pour un site WordPress est essentielle pour garantir une performance optimale et un affichage visuellement harmonieux. Voici les étapes clés à suivre :
1. Téléchargement et stockage des fichiers sources
- Il est crucial de conserver une version haute résolution de chaque image dans un espace de stockage organisé (Google Drive, Dropbox, disque dur externe). Cela permet de réutiliser ou de modifier les images sans perte de qualité en cas de besoin.
- De plus, notez systématiquement la source de chaque image (site d’origine, auteur, licence) dans un fichier texte ou une feuille de calcul. Cette bonne pratique garantit le respect des droits d’auteur et facilite la gestion des ressources visuelles à long terme.
2. Détermination de la taille d’affichage
- Avant d’ajouter une image à votre site, identifiez la taille exacte à laquelle elle sera affichée.
- Examinez le design du site (via les outils de développement ou la documentation du thème) pour connaître les dimensions idéales.
- Par exemple, une image de bannière pleine largeur peut nécessiter une résolution de 1920×1080 pixels, tandis qu’une vignette pourrait suffire en 300×300 pixels.
3. Choix du format d’image approprié
Le format d’image dépendra de l’utilisation :
- JPEG (.jpg) : Idéal pour les photos et les images riches en couleurs. Il offre un bon rapport qualité/taille. Choisissez le niveau de compression de l’image mais évitez de descendre à une qualité inférieure à 60%.
- PNG (.png) : Format sans compression avec transparence, idéal pour les logos, icônes et photos détourées.
- GIF (.gif) : Adapté aux images animées, mais limité en qualité. Avec transparence.
- WebP (.webp) : Format moderne offrant une excellente compression sans perte de qualité visible, recommandé pour WordPress.
4. Recadrage de l’image et ajustement de la taille
- Une fois la taille définie (en pixels), utilisez un logiciel comme Photoshop, GIMP ou Figma pour recadrer l’image en respectant le ratio d’origine, en évitant à tout prix de déformer (squisshh) l’image.
- Assurez-vous de centrer les éléments importants de l’image pour une composition équilibrée.
- Ajuster la taille finale désirée en pixels
5. Exportation de la version finale optimisée pour le web
Avant de téléverser l’image sur WordPress, optimisez-la pour réduire sa taille sans sacrifier la qualité. Utilisez des outils comme :
- Photoshop: Option « Exporter sous » ou « Exporter pour le web » en choisissant le format et le taux de compression.
- Attention, pour le format WEBP, vous devez d’abord convertir votre image en 8bits et utiliser la fonction « Sauvegarder sous »
- Gimp (logiciel desktop gratuit à installer sur votre ordinateur presqu’aussi puissant que Photoshop): Permet d’exporter dans tous les formats, incluant WEBP
- Figma: fonction EXPORT, avec réglages de format (png ou jpg).
- Attention, pour exporter au format WEBP, utiliser le plugin WebP Exporter.
- Application web Squoosh (en ligne) : permet d’exporter au format PNG, JPG et WEBP