Avec l’utilisation du Thèmes Divi et surtout le Générateur de pages Divi les images peuvent être facilement insérées aux endroits souhaités. Aussi simple que soit cette fonction, vous devez toujours vous assurer d’utiliser la bonne taille d’image.

Pourquoi la taille de l’image est-elle importante?

La taille d’image appropriée n’est ni trop petite et conduit ainsi à un affichage pixelisé et flou de l’image, ni trop grande et garantit ainsi un chargement plus lent de votre site Web.

Le but est de déterminer la taille d’image idéale que possible et d’amener l’image souhaitée à la bonne taille.

Facteurs importants

Pour déterminer la bonne taille d’image, vous devez tenir compte de trois facteurs:

  1. le Ratio d’aspect (rapport hauteur / largeur) de votre image est le rapport entre la hauteur et la largeur de l’image.
  2. le Disposition de la colonne (disposition des colonnes) détermine la largeur maximale affichée de votre image
  3. responsabilité détermine les modifications des dimensions de l’image sur différentes tailles d’écran telles que le bureau, la tablette ou le smartphone.

Dans ce qui suit, nous examinons de plus près les différents points.

Formats d’image Divi (rapport hauteur / largeur)

Le format d’une image est déterminé par son rapport hauteur / largeur. Autrement dit, le rapport de la largeur à la hauteur de l’image. Les rapports hauteur / largeur connus sont 4: 3 et 16: 9. Les anciens téléviseurs ont toujours un rapport hauteur / largeur de 4: 3, tandis que les nouveaux téléviseurs à écran plat ont généralement un rapport hauteur / largeur de 16: 9. Les photos de portrait sont généralement affichées au format 3: 4. Quiconque a déjà commandé des photos connaît certainement ces proportions.

Le Thème Divi a été conçu de telle manière que ces formats 4: 3, 3: 4 et 16: 9 ont été particulièrement pris en compte. D’autres formats peuvent être utilisés sans aucun problème, mais ces normes s’intègrent généralement très bien dans la mise en page.

Optimiser avant le téléversement

Idéalement, les images doivent d’abord être optimisées localement avant d’être téléchargées sur WordPress. Cela signifie que la section d’image et tous les réglages doivent être effectués en premier. Vous devez vous assurer que la taille du fichier des images ne dépasse pas 200 ko afin que le temps de chargement de votre site Web ne soit pas trop affecté.

Exception pour l’image vedette Divi

Addenda: Dans le texte suivant de l’article, nous expliquons tout ce que vous devez savoir sur les dimensions d’image optimales pour le thème Divi. Pendant longtemps, nous n’avons pas remarqué qu’il y avait une exception très étrange pour l’image en vedette dans le thème Divi. Étonnamment, ce n’est pas 16: 9, mais 16:dix montré. Si vous utilisez une image au format 16: 9, les bords droit et gauche de l’image seront simplement coupés un peu pour obtenir le format 16:10 utilisé par Divi. Ceci n’est pas visible avec les images au format portrait.

Habituellement, ce n’est pas perceptible sur la plupart des images. Cependant, si vous souhaitez créer un modèle, vous devrez utiliser une hauteur de 675 px avec une largeur d’image de 1080 px. Vous trouverez ci-dessous une formule permettant de calculer les bonnes tailles pour différentes exigences. Vous devez uniquement utiliser les valeurs pour un format 16:10.

Il est un peu étonnant qu’Elegant Themes utilise ce format inhabituel pour les images présentées et ne l’annonce officiellement nulle part. Cependant, la différence avec le format 16: 9 est si petite qu’elle est à peine perceptible dans la plupart des cas.

Dimensions de l’image pour la mise en page standard du thème Divi

Le graphique suivant montre la largeur d’image optimale pour chaque disposition de colonne. Le réglage standard de Divi avec 1080 pixels a été supposé pour la largeur du site Web. Si vous avez ajusté la largeur différemment, vous devez ajuster un peu la largeur de l’image.

Vous connaissez maintenant la largeur d’image idéale, mais qu’en est-il de la bonne hauteur d’image? Cela dépend à son tour du format de votre image.

Le calcul est basé sur la largeur maximale de la colonne, qui correspond alors à la largeur de l’image. Selon le rapport hauteur / largeur, la hauteur de l’image peut maintenant être calculée:

Hauteur de l’image = largeur de l’image: rapport hauteur / largeur premier numéro * rapport hauteur / largeur deuxième numéro

Cela signifie que pour une largeur d’image de 1080 pixels au format 4: 3, le calcul de la hauteur de l’image ressemble à ceci:

Hauteur de l’image = 1080: 4 * 3 = 810 pixels

Nous avons déjà calculé les hauteurs d’image correspondantes pour les paramètres du support dans Divi, si vous utilisez d’autres paramètres, vous pouvez utiliser la formule pour calculer vos propres hauteurs d’image idéales.

Important: Dans ce qui suit, nous listons les tailles d’image appropriées pour la vue du bureau. Mais avant d’optimiser vos photos pour eux, jetez un œil à nos informations sur le sujet responsabilité. Vous souhaitez probablement présenter vos images de manière optimale pour des écrans de plus petite taille. Ensuite, utilisez les tailles d’image que nous vous donnons dans la section!

Dimensions de l’image pour le format 4: 3

La liste suivante vous montre quelles sont les dimensions d’image idéales pour une image au format 4: 3 par rapport à la largeur de colonne utilisée.

1 colonne: 1080 x 810 px

¾ Colonne: 795 x 597 px

⅔ Colonne: 700 x 526 px

½ colonne: 510 x 384 px

⅓ Colonne: 320 x 241 px

¼ colonne: 225 x 170 px

Dimensions de l’image pour le format 16: 9

La liste suivante vous montre quelles sont les dimensions d’image idéales pour une image au format 16: 9 par rapport à la largeur de colonne utilisée.

1 colonne: 1080 x 608 px

¾ Colonne: 795 x 447 px

⅔ Colonne: 700 x 394 px

½ colonne: 510 x 287 px

⅓ Colonne: 320 x 181 px

¼ colonne: 225 x 128 px

Dimensions de l’image pour le format 3: 4

La liste suivante vous montre quelles sont les dimensions d’image idéales pour une image au format 3: 4 (format portrait typique) en fonction de la largeur de colonne utilisée. Vous devez garder à l’esprit que, en particulier avec des colonnes larges, la hauteur de l’image sera extrêmement grande et cela sera généralement moins beau dans votre mise en page. Le format 3: 4 convient généralement mieux aux ½ colonnes ou moins.

1 colonne: 1080 x 1440 px

¾ Colonne: 795 x 1060 px

⅔ Colonne: 700 x 933 px

½ colonne: 510 x 680 px

⅓ Colonne: 320 x 427 px

¼ colonne: 225 x 300 px

responsabilité

Avec ces connaissances, vous pouvez préparer vos photos de manière appropriée. Cependant, l’ajustement automatique réellement souhaitable de Divi à différentes tailles d’écran telles que les tablettes ou les smartphones peut contrecarrer vos calculs.

Si la taille de l’écran est inférieure à 1080 pixels, Divi adapte son affichage et transforme automatiquement une disposition à 4 colonnes en une disposition à 2 colonnes afin que le contenu soit mieux présenté sur une tablette, par exemple. Dans le cas des images que vous avez réellement créées dans une taille adaptée à la vue du bureau, elles apparaissent malheureusement un peu petites dans la mise en page à 2 colonnes.

Avec ce type d’affichage, une largeur d’image de 370 px est idéale. Ensuite, l’espace disponible est mieux utilisé.

Dans la vue du bureau, les images de 370 pixels de large sont toujours affichées dans la vue à 4 colonnes, mais réduites à 225 pixels. C’est une bonne solution, car de cette façon vous obtenez un bon affichage des images sur toutes les tailles d’écran et la taille du fichier est toujours dans des limites raisonnables.

Ainsi, afin de créer des images idéales pour toutes les tailles d’appareils, vous devez utiliser les tailles d’image suivantes:

Pour les formats 4: 3:

1 colonne: 1080 x 810 px

⅔ Colonne: 770 x 578 px

¾ Colonne: 770 x 578 px

½ colonne: 770 x 578 px

⅓ Colonne: 770 x 578 px

¼ colonne: 370 x 278 px

Pour les formats 16: 9:

1 colonne: 1080 x 608 px

⅔ Colonne: 770 x 433 px

¾ Colonne: 770 x 433 px

½ colonne: 770 x 433 px

⅓ Colonne: 770 x 433 px

¼ colonne: 370 x 208 px

Pour les formats 3: 4:

1 colonne: 1080 x 1440 px

⅔ Colonne: 770 x 1027 px

¾ Colonne: 770 x 1027 px

½ colonne: 770 x 1027 px

⅓ Colonne: 770 x 1027 px

¼ colonne: 370 x 493 px

Fonds d’écran Slider

Les images d’arrière-plan des curseurs doivent être au moins aussi larges que la colonne dans laquelle se trouve le curseur. Cela vous permet d’utiliser simplement les tailles d’image déjà répertoriées pour les différents formats. Et si vous souhaitez que votre curseur s’adapte de la manière la plus optimale possible à différentes tailles d’écran, recherchez les tailles d’image répertoriées sous la rubrique Responsabilité.

Cependant, la hauteur du curseur dépend du contenu affiché sur le curseur, il peut donc être nécessaire de modifier la hauteur de l’image. Vous pouvez en savoir plus sur ce sujet dans notre article « Ajuster la hauteur du Divi Slider« .

Images d’arrière-plan pour les curseurs pleine largeur

Une largeur d’image de 1920 pixels est recommandée ici.

La largeur réellement requise de l’image dépend de la largeur de la fenêtre du navigateur utilisée. Pour la plupart des visiteurs, une largeur d’image de 1280 pixels sera suffisante, mais vous êtes mieux préparé pour des moniteurs plus grands avec une largeur d’image de 1920 pixels. Ici aussi, la hauteur du curseur est basée sur le contenu des diapositives et il se peut donc que la hauteur de l’image doive être ajustée.

Images sur films de glissement

Vous pouvez également afficher des images sur les diapositives individuelles de votre curseur. Contrairement aux images d’arrière-plan, celles-ci ne remplissent pas tout l’affichage. Ces images ne sont affichées que dans les curseurs qui sont dans ¾ colonnes, ⅔ colonnes ou une colonne complète. Les largeurs d’image optimales suivantes s’adaptent ici.

1 colonne: 450 px

¾ Colonne: 330 px

⅔ Colonne: 320 px

Vous n’avez pas à vous soucier de la réactivité ici, car à partir du point de rupture pour les tablettes à 768 pixels, seul le texte et aucune image sont affichés dans les diapositives.

Encore plus de recommandations pour des tailles d’image optimales

Cet article est basé sur l’article en anglais « Le guide ultime de l’utilisation des images dans Divi«Dans lequel vous pouvez trouver de nombreuses autres recommandations pour des tailles d’image appropriées pour divers modules Builder.



Source link

Recent Posts