Afin d’optimiser l’affichage et les temps de chargement, la notion de format d’image est importante. Le poids final d’une image dépend de sa résolution (sa qualité) et de sa taille. Pour un affichage sur un site web, il est nécessaire d’utiliser des images en basse définition (72 dpi) avec des dimensions appropriées.
Les outils automatiques de WordPress
Lors de l’ajout d’une image dans la médiathèque, WordPress génère automatiquement différentes versions de l’image, en basse définition :
- full : ratio conservée – Paysage : 1500 X h – Portrait : L X 1500
- large : ratio conservée – Paysage : 1170 X h – Portrait : L X 1170
- medium : ratio conservée – Paysage : 600 X h – Portrait : L X 600
- thumbnail : tronquée – 300 X 300
- … éventuellement des tailles supplémentaires si le paramétrage de votre site le prévoit.
Ci-dessous un schéma des différentes tailles générées à partir d’une image au format portrait ou d’une image au format paysage :
Recadrer manuellement une image
Si votre image d’origine n’est pas cadrée comme souhaité et que vous n’avez pas d’éditeur d’images à disposition (Ex: Photoshop), WordPress propose un outil pour vous permettre de le faire.
Pour modifier une image :
- Ouvrez votre médiathèque (onglet Médias). La liste des médias s’ouvre.
- Trouvez et sélectionnez votre image. Elles sont classées par date d’ajout (les plus récentes en premier), mais une recherche peut-être utile pour la retrouver rapidement (pensez à renseigner correctement le titre des médias pour rendre la recherche plus efficace).
- Lorsque vous cliquez sur une image, une fenêtre s’ouvre avec les détails du média, et les actions possibles. Cliquez sur « Modifier l’image ».
Vous accédez à l’interface de modification de l’image :
Si vous souhaitez recadrer une image, vous devez d’abord définir un gabarit de troncage sur l’image, puis le valider. Vous pouvez le faire en faisant un cliquer/glisser directement sur l’image ou en renseignant les valeurs de recadrage de l’image. Une fois le gabarit de troncage défini, appliquez-le en appuyant sur le bouton pour tronquer.
L’utilisation des images dans le site :
En fonction de l’utilisation qui en est faite, il peut être utile de savoir quel format d’image appeler.
- Lorsqu’une image est définie comme image à la une, vous n’avez pas besoin de définir une taille spécifique. Vous indiquez simplement quelle image sera utilisée en référence, et l’outil se charge de sélectionner la bonne taille en fonction du contexte (bandeau image, mosaïque de miniatures, …).
- Lorsqu’une image est appelée directement dans votre contenu (via l’éditeur par exemple), dans ce cas il vous faudra définir quel format est affiché. Sans pouvoir donner une règle universelle, puisque cela dépend du contexte, vous utiliserez le plus souvent les tailles medium et large (medium correspond à une demi-largeur de votre site, large à une largeur complète). Si vous avez un doute, privilégiez la taille large. Elle est certes plus lourde (mais sur de la basse définition et à ces dimensions c’est acceptable). Mais elle sera plus flexible.