Qu’elles proviennent de banques d’images ou d’un appareil, les photos brutes sont toujours trop lourdes pour être intégrées directement dans un site. En les cumulant, on ralentit le temps de chargement du site, ce qui impacte l’expérience utilisateur et potentiellement le référencement.
Des extensions (Smush par exemple) permettent d’optimiser les images après qu’elles aient été importées sur le site, mais l’idéal reste de les préparer aussi en amont.
On peut le faire sur Photoshop, ou sur Photopea, comme dans la vidéo, un logiciel gratuit en ligne qui propose la plupart des outils de Photoshop.
Tailles d’image recommandées :
Image horizontale/paysage : largeur max 1920px
Image verticale/portrait : hauteur max 700px
Format de fichier :
JPG : photos
WEBP : photos, mieux compressées sans perte de qualité
PNG : logos, illustrations, fond transparent (ou non)
GIF : animation, illustrations en aplat de couleur (pas de dégradé, ça pixelise)
SVG : images vectorielles (attention, on ne peut pas toujours les importer dans WordPress)
PDF : ne s’affichera pas automatiquement dans la page, il faudra créer un lien qui s’ouvre dans un nouvel onglet avec Adobe Reader.
Dans Photopea :
- Ouvrir le fichier
- Fichier > Exporter en tant que > JPG (si c’est une photo) ou WEBP pour une meilleure optimisation
- Réduire la taille de l’image (largeur ou hauteur)
- Réduire la qualité à 60% (JPG) ou 70% (WEBP)
- Enregistrer
Dans Photoshop :
En WEBP :
- Ouvrir le fichier
- Image > Taille de l’image : réduire la largeur ou la hauteur
- Fichier > Enregistrer une copie > Sélectionner le format WEBP
- Enregistrer
En JPG :
- Ouvrir le fichier
- Fichier > Exportation > Enregistrer pour le Web
- Réduire la taille de l’image, largeur ou hauteur (tout en en bas à droite)
- Sélectionner le type de fichier : JPEG si c’est une photo
- Réduire la qualité à 60 ou 70
- Enregistrer
Renommer l’image :
IMPORTANT : sans accent, sans espace, sans majuscule. Seulement des lettres, chiffres et tirets.
Le nom du fichier permet d’optimiser le référencement de l’image dans Google Images : penser à y mettre des mot-clés.