Voilà un sujet épineux : la taille des images de Divi. En fait, il ne s’agit pas uniquement de Divi, tous les thèmes WordPress utilisent des tailles d’images spécifiques et de nombreux utilisateurs peuvent se sentir frustrés à un moment ou à un autre.

Lorsque je donne des formations WordPress et/ou Divi, il y a de nombreuses questions qui reviennent à chaque fois :

  • pourquoi mon image est-elle rognée – coupée – recadrée ?
  • pourquoi mon image au format portrait apparait-elle au format paysage ?
  • pourquoi mon image est-elle zoomée ?

Je sais c’est assez agassant. Il y aura alors deux solutions pour remédier à cela :

  1. soit vous vous pliez à votre thème et vous utilisez le format adéquat afin que votre image ne soit pas recadrée intempestivement.
  2. soit vous effectuez quelques modifications afin que ce soit le thème qui se plie à vos exigences.

Je parie que vous préférez la seconde solution, n’est-ce pas ? Mais dans cet article, nous allons aborder tous ces points. Voici le programme :

Vous n’utilisez pas encore Divi ? Voici 10 raisons d’opter pour ce thème !

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

 

1. Comment WordPress gère vos images ?

Dans un premier temps, il va falloir comprendre ce que fait WordPress lorsque vous téléchargez une image dans la bibliothèque des médias.

Par exemple, vous téléchargez une image d’une dimension de 1280px * 720px dans votre bibliothèque => c’est le format original de votre image.

À présent, si vous observez les fichiers de votre site, via FTP (Filezilla), à l’arborescence www > wp-content > uploads > dossier année > dossier mois, vous allez vous rendre compte que WordPress à multiplié votre image en 5, 6, 7 ou 8 fichiers voire même plus ! C’est ce que l’on appelle les THUMBNAILS ou VIGNETTES.

vignettes générées lors de l'upload

10 vignettes ont été générées lors de l’upload en plus de l’originale – en jaune : l’image originale – en bleu : les images générées par WordPress – en rose : les images dont Divi a besoin

 

Pourtant, si vous vous rendez dans votre administration WordPress, à l’onglet Réglages > Médias vous ne verrez apparaître que 3 formats de vignettes : taille des miniatures, taille moyenne et grande taille. Ces trois formats sont les formats standards dont WordPress a besoin (par exemple, pour afficher les vignettes de vos médias dans la bibliothèque).

taille des médias de WordPress

Taille des médias de WordPress disponibles à l’onglet Réglages > Médias

 

D’où proviennent alors les autres vignettes qui ont été générées ? C’est le thème bien sûr ! Votre thème aussi a besoin de vignettes pour fonctionner. Chaque thème propose des visuels différents donc chaque thème aura besoin de formats d’images différents.

 

2. Comment Divi gère vos images ?

Comme on vient de le voir, WordPress a besoin de 3 formats d’images, mais le thème Divi, quant à lui, a besoin de 7 formats supplémentaires, les voici :

 

Format image n°1 : et-pb-post-main-image

module blog de Divi en mode grille

Module Blog de Divi en mode « grille »

C’est le format utilisé pour les vignettes du Module BLOG en version « grille » comme en version « diapo ». Ce format est paramétré avec les dimensions de 400px * 250px – soit un ratio de 16:10 (légèrement différent du 16:9).

 

Format image n°2 : et-pb-post-main-image-fullwidth

image à la une en haut d'un article Divi

Image à la une en haut d’un article Divi

C’est le format utilisé pour les images à la une qui apparaissent en haut de chacun de vos articles, juste en dessous du titre. Ce format est paramétré avec les dimensions de 1080px * 675px – soit toujours un ratio de 16:10.

 

Format image n°3 : et-pb-portfolio-image

module galerie en mode "grille - paysage"

Module Galerie en mode « grille – paysage »

 

Modue "Portefeuille" (porfolio / projet) en mode "grille"

Module « Portefeuille » (porfolio / projet) en mode « grille »

C’est le format utilisé pour le Module Galerie et le Module Portefeuille en mode « Grille » (Portfolio qui est apparenté au custom post type « Projet ») lorsqu’on est sur la page des vignettes (avec toutes les entrées des modules). Ce format utilise les dimensions de 400px * 284px – soit un ratio (assez bâtard, désolée du mot) de 100:71.

 

Format image n°4 : et-pb-portfolio-module-image

Ce format utilise les dimensions 510px * 382px. Au delà vos images seront rognées.

 

Format image n°5 : et-pb-portfolio-image-single

Image à la une des Projet Divi

Image à la une des Projets Divi

C’est le format utilisé pour l’image à la une qui s’affiche en haut de chacun de vos projets (Portfolio) mais également pour les images de la page des projets du Module Portefeuille en mode « Plein écran ». Ce format utilise les dimensions de 1080px * 9999px. Généralement, aucune de vos images n’aura cette dimension mais cela signifie que votre image ne sera recadrée que si elle a une hauteur supérieure à 9999px.

En d’autres termes, ces images pourront conserver leur ratio que ce soit en portrait ou en paysage. Ce sont les seules images de Divi qui ne subissent pas de recadrage.

 

Format image n°6 : et-pb-gallery-module-image-portrait

Module Galerie en mode "grille - portrait"

Module Galerie en mode « grille – portrait »

C’est le format utilisé pour le Module Galerie positionné sur le « Mode Portrait ». Ce format utilise les dimensions de 400px * 516px – soit un ratio de 100:129.

 

Format image n°7 : et-pb-post-main-image-fullwidth-large

Module Image en pleine largeur

Module Image en pleine largeur

C’est le format utilisé pour le module « Image en pleine largeur ». Il utilise les dimensions 2880px * 1800px. Au delà de ces dimensions, votre image sera rognée.

 

3. Comment obtenir des images correctes en conservant la taille des images de Divi ?

Maintenant que nous avons fait le tour des différentes tailles d’images utilisées par le thème Divi, cela va vous aider à comprendre quelles sont les images à utiliser si vous souhaitez conserver les tailles proposées par Divi…

 

3.1 Comprendre l’importance du RATIO (ou RAPPORT)

Si on regarde bien, le plus important pour obtenir des résultats corrects pour l’affichage de vos images dans WordPress, c’est de prendre en compte le ratio. En fait, les dimensions n’ont que peu d’importance et c’est souvent ce qui est le plus difficile à comprendre. Voici des exemples :

 

Le ratio 1:1

Ration 1:1

Ce rapport 1/1 signifie que la largeur est équivalente à la hauteur. Donc une image 1000*1000px, une image 750px*750px ou même une image 500px*500px aura toujours le même ratio.

 

Le ratio 3:2

Ration 3:2

Ce rapport signifie que la largeur est équivalente à 3 tiers et que la hauteur est équivalente à 2 tiers. Donc une image de 900px de largeur devra avoir une hauteur de 600px pour conserver un ration de 3:2. Idem pour les images de 1800px*1200px, elles auront toujours un ratio de 3:2.

 

Le ratio 4:3

Ration 4:3

Ces images auront une largeur de 4 quarts pour une hauteur de 3 quarts. Par exemple : 1000px*750px ou bien 1600px*1200px etc…

 

Le ratio 16:9

Ration 16:9

Cela fonctionne bien évidement comme les autres rapports, sauf que l’on aura certainement besoin d’une calculette pour faire ce calcul : [(largeur d’une image)/16*9 = hauteur]. Ce format est très utilisé en vidéo : 1920px * 1080px.

 

Le ratio 16:10

Ration 16:10

Ce format est moins connu, il est proche du 16:9 et c’est le format utilisé par Divi, notamment pour les « images à la une » des articles et des vignettes du « module blog en mode grille ».

Le ratio ou rapport, ce n’est ni plus ni mois que des mathématiques et il existe un site qui vous permettra de connaitre le ratio de vos images en renseignant simplement le largeur et la hauteur de celle-ci.

 

3.2 Redimensionner ses images avant le téléchargement dans WordPress

Bon, je crois que là, tout devient plus clair. Nous savons que les dimensions sont importantes seulement car elles agissent sur le poids des images mais que le ratio est bien plus important. Donc si vous voulez conserver les tailles des images de Divi, vous devrez recadrer vos images en fonction du ratio adéquat.

Tout a été dit plus haut : si vous voulez que Divi ne recadre plus les images à la une de vos articles, n’utilisez pas des images avec un ratio non adéquat, comme les images en mode portrait ou les images panoramiques par exemple.

 

Sur ce blog, par exemple, je n’ai pas modifié la taille de mes images à la une, j’ai tout simplement adapté mes visuels. Pour ce faire, je retaille toutes mes images à la une à la dimension de 1000*625px (ratio 16:10) mais j’aurais très bien pu utiliser d’autres diemensions tout en conservant le même ratio, comme par exemple : 800*500px ou même 1200*750px.

Effectuer un redimensionnement de ses images avant le téléchargement dans WordPress est inévitable :

  • si l’on veut obtenir un poids d’image adapté pour améliorer la performance d’un site
  • si l’on souhaite adapter le format de l’image aux dimensions utilisées par le thème
  • si l’on ne veut pas que les images affichées soient rognées

Pour retoucher vos images, vous pourrez utiliser des logiciels comme Photoshop, Affinity Photo, Affinity Designer, Gimp etc… et je vous conseille de lire ce guide dédié à l’optimisation des images pour le web.

 

4. Comment modifier la taille des images de Divi pour customiser son site ?

Évidemment, selon votre projet, il est fortement possible que vous ayez envie de modifier la taille des images de Divi.

Vous aimeriez que les images à la une de vos articles soit carrées pour être en adéquation avec vos images Instagram ou bien vous souhaitez qu’elles soient au format portrait pour être en adéquation avec Pinterest ???

C’est faisable et facile ! Nous allons voir une méthode qui ne nécessitera aucun codage particulier. De ce fait, même les débutants pourront y parvenir !

 

4.1 – Installer et activer l’extension Simple Media Sizes

simple media sizes plugin

Simple Media Sizes est une extension gratuite disponible sur le répertoire officiel de WordPress, c’est à dire, directement depuis votre administration à l’onglet Extensions > Ajouter ou bien en téléchargement ici. Vous n’avez qu’à l’installer et l’activer.

 

4.2 – Modifier la tailles des images de Divi

Une fois l’extension activée, il vous suffira de vous rendre à l’onglet Réglages > Médias pour y trouver une belle surprise : toutes les tailles d’images utilisées par Divi sont apparues.

tailles images Divi

Tout ce que vous aurez à faire, c’est saisir la nouvelle largeur ou la nouvelle hauteur de la vignette que vous souhaitez modifier.

Par exemple :

  • si vous voulez que vos images à la unes soient carrées : modifiez la vignette et-pb-post-main-image ainsi que et-pb-post-main-image-fullwidth avec des dimension comme 400*400px et 1080*1080px (respectivement).
  • si vous souhaitez que vos images à la unes soient au format portrait : faites la même chose avec un ratio 3:4 par exemple.
  • etc…

Enfin, cliquez sur le bouton bleu « mettre à jour ».

 

4.3 – Régénérer les miniatures

Vous êtes à présent en possession d’un nouveau format d’image. Il sera parfait pour les futures images que vous téléchargerez dans WordPress, mais en attendant, pour que vos anciennes images (celles déjà présentes dans la bibliothèque de médias) fonctionnent, vous devez régénérer les vignettes.

regénérer les vignettes

C’est très simple mais ça peut être long si votre bibliothèque est très chargée. N’oubliez pas d’enregistrer vos modifications.

 

4.4 – Vérifier le résultat

taille des images de Divi personnalisées pour le module blogVoici un exemple du Module Blog dont les vignettes on été modifiées pour afficher des images au format carré.

Découvrir Divi maintenant !

 

5. En conclusion…

J’espère que cet article vous aura aidé à comprendre le fonctionnement des images dans WordPress ainsi que la taille des images de Divi. Si vous avez envie de vous lancer dans ce genre de modifications, je vous conseille fortement de dupliquer votre site en local pour faire vos expérimentations afin d’éviter de rencontrer des problèmes (que je ne pourrais vous aider à résoudre simplement en laissant un commentaire sur cet article).

modifier la taille des images de Divi - pinterest

Comment modifier la taille des images de Divi ?
3.7 pour 3 votes

D'autres Tips pour Divi :

nunc Lorem elit. tristique Phasellus ut consectetur dolor. odio elit.

Pin It on Pinterest

Shares
Share This