Comment dimensionner vos images dans Divi ?

Objectif

Le présent article vous explique comment dimensionner vos images et illustrations dans Divi.

Pré-requis

Une base WordPress installée avec un thème-enfant de Divi.
Disposer d’une sélection d’images et d’illustrations libres de droits.

Quelles sont les dimensions utiles ?

Dimensionner les images et illustrations que vous utiliserez dans Divi revient à trouver le juste équilibre entre :

  • l’impératif de qualité qui nécessite d’accroître la taille de l’image ;
  • l’impératif de réduction du poids qui nécessite de réduire la taille de l’image…

En effet, comme vous pouvez le voir à travers l’article « Optimisez vos images », il est essentiel de minimiser le poids de vos pages afin d’en permettre le chargement rapide. Faute de quoi la navigation de votre visiteur sera entravée, ce qui le fera fuir et ce que sanctionneront Google et les autres moteurs de recherche.

Fort heureusement, Elegant Themes, l’éditeur de Divi, nous fournit ses préconisations en matière de taille d’images :

Le tableau ci-dessus vous fournit ainsi les tailles minimales requises pour disposer d’images en très bonne qualité compte-tenu de la surface qui leur sera attribuée.

Ainsi, par exemple, une image devant s’insérer dans un quart de colonne devra avoir une taille minimale de 225 pixels…

Certains modules peuvent toutefois nécessiter des tailles supérieures, et c’est le cas notamment du fullwidth slider (module que Divi traduit par « curseur de défilement plein écran »), du fullwidth header (module « en-tête plein écran ») ou encore de l’image en plein écran (ces trois modules étant intégrables dans une section de pleine largeur) :

blank

blank

blank

Pour ces différents modules, la taille optimale d’une image sera de 1920 x 1024 pixels.

Astuce

Pour gagner du temps et harmoniser l’aspect visuel de votre site, nous vous conseillons d’utiliser des masques pré-établis pour Photoshop.

L’article « Optimiser vos images avec Photoshop » vous fournit la méthode correspondante.

Pour aller plus loin…

Le blog d’Elegant Themes, l’éditeur du framework Divi, fournit nombre d’informations pratiques et d’astuces (en anglais) pour utiliser Divi :

The Ultimate Guide to Using Images within Divi

https://www.elegantthemes.com/gallery/divi/documentation/image/

blank
Cet article vous a-t-il été utile ?

N’hésitez-pas à nous faire part de vos expériences et des difficultés que vous pouvez encore rencontrer, de manière à ce que nous puissions affiner et compléter ce support…