Le constructeur visuel intuitif de Divi qui rend l’ajout d’images à un site Web extrêmement facile. Cependant, ces images doivent être ajustées aux dimensions correctes afin qu’elles fonctionnent bien avec la conception, qui est la partie la plus difficile.

OUI, je comprends que travailler avec des images peut être accablant, en particulier lors de l’optimisation pour plusieurs écrans …

Cependant, ne vous inquiétez pas!

Dans cet article, je vais vous apprendre Utilisation et optimisation des images pour votre site Divi. Je vais laisser de côté toutes les peluches et aller au point avec les dimensions de l’image et des conseils pour améliorer la qualité de l’image. En bref, cela va être un guide ultime des tailles d’image Divi.

Comment optimiser précisément les images Divi

Alors que Divi le rend extrêmement facile Créez des sites Web sans code. Il existe de nombreuses options pour ajouter des images et cela peut certainement être ennuyeux en rendant les choses plus compliquées.

Suivez ces principes de base pour optimiser la taille de l’image:

  • Disposition de la colonne: Largeur maximale de votre image
  • Ratio d’aspect: Hauteur et largeur de votre image
  • Réactivité: Comment optimiser vos images pour différentes tailles d’écran

Utiliser les dispositions de colonnes de Divi

Divi utilise une variété de dispositions de colonnes qui prennent en charge des images de différentes tailles. Le plus dur, cependant, est de faire un zoom avant et arrière sur ces images en fonction de la taille de votre écran.

Conseil pro: En règle générale, assurez-vous que vos images sont au moins aussi larges que la colonne dans laquelle elles seront utilisées.

Tailles d’image pour les dispositions de colonnes Divi standard:

Disposition à 1 colonne

Largeur d’image recommandée: 1080px

1/2 colonne 510px

Largeur d’image recommandée: 510px

1/3 colonne 320px

Largeur d’image recommandée: 320 px

1/4 colonne 225px

Largeur d’image recommandée: 225 px

Le problème avec l’utilisation des dispositions de colonnes Divi, cependant, est qu’elles ne peuvent pas mesurer avec précision la hauteur de vos images, qui est affectée par le contenu de cette section et la taille de l’écran.

Utilisez le rapport hauteur / largeur comme référence

Le rapport hauteur / largeur est le rapport entre la largeur et la hauteur d’une image ou d’un écran. C’est une bien meilleure jauge à utiliser pour déterminer la taille de votre image pour votre site Web Divi. Quel autre rapport hauteur / largeur est-il important lors de l’optimisation des images pour les petits écrans? surtout Ordinateurs portables de 11 pouces.

Si vous utilisez le rapport hauteur / largeur 16: 9, vous pouvez utiliser les dimensions suivantes pour vos images:

  • 1 colonne: 1 080 x 608 pixels
  • 3/4 colonne: 795 x 447 pixels
  • 2/3 colonne: 700 x 394 pixels
  • 1/2 colonne: 510 x 287 pixels
  • 1/3 colonne: 320 x 181 pixels
  • 1/4 colonne: 225 x 128 pixels

Si vous utilisez le rapport hauteur / largeur 4 x 3, voici les dimensions de vos images:

  • 1 colonne: 1 080 x 810 pixels
  • 3/4 colonne: 795 x 597 pixels
  • 2/3 colonne: 700 x 526 pixels
  • 1/2 colonne: 510 x 384 pixels
  • 1/3 colonne: 320 x 241 pixels
  • 1/4 colonne: 225 x 170 pixels

Noter: Notez que ces dimensions sont fournies à titre indicatif uniquement et peuvent varier en fonction du contenu. Il est donc préférable de les utiliser comme référence et de travailler à partir de là.

Module d’image Divis

Pour le module d’image, le rapport hauteur / largeur est soit 16: 9 ou 4: 3 et peut être utilisé pour sélectionner une taille d’image pour chaque disposition de colonne.

Vous pouvez donc utiliser les mêmes dimensions que pour les dispositions de colonnes. Par exemple, si vous utilisez une mise en page à 2 colonnes, 4 sur 3, vous pouvez utiliser une image de 510 sur 384 pixels.

Conseil pro: Avec 2 mises en page de colonnes ou plus, la version mobile / tablette passe en cascade. Je recommande donc d’utiliser une image avec une largeur légèrement plus longue pour permettre un réglage plus large sur des écrans plus petits.

Divis Images d’arrière-plan

Pour les images d’arrière-plan, assurez-vous que l’image est au moins aussi large que la colonne dans laquelle vous prévoyez de l’utiliser.

  • 1 colonne: 1080px
  • 3/4 colonne: 795px
  • 2/3 colonne:700 px
  • 1/2 colonne: 320px
  • 1/4 colonne: 225 px

Module d’image d’arrière-plan pleine largeur

Si vous utilisez une image d’arrière-plan dans une section pleine largeur, les images ici devront être développées sur toute la largeur de votre navigateur. Cela signifie que vous devez rendre ces images aussi larges que l’affichage du moniteur, qui est d’environ 1920 pixels.

Les modules suivants doivent avoir une image d’arrière-plan de 1 920 px de large:

  • En-tête pleine largeur
  • Portfolio pleine largeur
  • Curseur pleine largeur
  • Titre du message en pleine largeur
  • Curseur de poteau pleine largeur
  • Image pleine largeur

Conseil pro: Assurez-vous de regarder le contenu de ces modules car cela déterminera la hauteur de votre image d’arrière-plan.

Module d’en-tête pleine largeur

Je pensais que c’était un module couramment utilisé dans Sites Web Divi Je consacrerais une section uniquement à ce module.

Noter: Notez que toutes les images ci-dessous sont spécifiquement pour le module d’en-tête pleine largeur.

Image de fond:

Ne confondez pas cela avec le fond d’écran pleine largeur Ces instructions sont spécifiques au module d’en-tête pleine largeur, qui permet à votre en-tête de couvrir tout l’écran de votre moniteur.

Tu dois partir Paramètres du module> Conception> Créer un plein écran: et activez « OUI » pour diffuser l’image de fond sur l’écran.

Étant donné que la plupart des moniteurs utilisent un format d’image 4: 3 ou 16: 9, vos images doivent avoir une largeur de 1 280 pixels ou 1 920 pixels. Les dimensions recommandées sont données ci-dessous:

  • Rapport hauteur / largeur 4: 3 – 1 280 x 960 pixels
  • Format d’image 16: 9 – 1920 x 1080 pixels

Image logo:

Le module d’en-tête pleine largeur vous permet de placer un logo à l’intérieur de la zone de contenu de l’en-tête. Le logo Divi mesure 93 x 43 pixels et sert de référence parfaite.

Il existe de nombreux autres modules, mais ces directives devraient suffire pour la plupart des sites Web si vous souhaitez accéder à plus de contenu sur le même. Je recommande de vérifier ceci Ressources Divis.

Réactivité: comment optimiser les images pour différentes tailles d’écran

Vous pouvez simplement utiliser la vue mobile / tablette de Divi pour voir à quoi ressembleront vos photos sur des écrans plus petits

Même sur des écrans plus petits, la plupart des dispositions de colonnes sont affichées dans un style en cascade. Donc, si vous voulez que vos images apparaissent plus grandes sur des écrans plus petits, il est préférable d’utiliser des images plus larges pour éviter que les côtés ne soient moins écartés.

Pourquoi est-il important d’optimiser les images?

L’avantage d’utiliser certaines dimensions et tailles pour vos images est que cela réduira la taille du fichier de votre image pour occuper moins d’espace sur votre site Web et, en fin de compte, accélérer le chargement.

Un site Web qui se charge plus rapidement peut signifier beaucoup de choses pour un MNC qui peuvent se traduire par des millions de dollars de plus en ventes ou des conversions plus élevées pour un blogueur affilié.

Approches générales de l’optimisation des images:

1. Redimensionner les images en fonction de leur taille réelle

L’un des principaux facteurs qui affectent la taille du fichier est les dimensions de l’image. J’ai déjà parlé de ce qui devrait suffire pour redimensionner correctement les images ci-dessus.

2. Compressez les images avant de les télécharger

En utilisant un outil de compression de qualité comme Imagify ou Compress PNG, vous pouvez réduire la taille de votre fichier d’une tonne sans sacrifier la qualité.

Certains des outils que je recommande sont les suivants:

  • Imaginer – Un outil premium qui compresse à la fois PNG et JPG à l’aide de la compression intelligente des pertes et est considéré comme la meilleure compression de l’industrie
  • Compresser PNG / JPEG – Un outil de compression gratuit qui peut compresser à la fois PNG et JPG et est l’un des meilleurs outils de compression gratuits du secteur

3. SEO d’image

En ce qui concerne le référencement d’images, Google s’appuie sur les noms de fichiers d’image, le texte «  alt  », les légendes, le type de fichier, etc. Je peux entrer beaucoup plus en détail, mais je vous recommande de vérifier ceci Guide de référencement d’image pour un guide plus détaillé.

Noter: Divi a la possibilité d’ajouter un texte alternatif dans les paramètres du module image, qui écrase les sections WordPress.

4. Utilisez les formats de fichier corrects

La plupart des images sont au format JPEG ou PNG (parfois même GIF) et elles conviennent à la plupart des situations en raison de leur compatibilité généralisée. Il est recommandé de procéder comme suit:

  • JPEG (JPG) – Idéal pour les photos
  • PNG – Ce sont mieux pour les petites images avec plus de détails

5. N’allez pas trop loin avec beaucoup de photos

Beaucoup de gens trouvent qu’il est bon d’utiliser beaucoup d’images dans leurs photos Site Web et blog Cependant, les publications peuvent ajouter du gonflement et ralentir le chargement de la page.

En fait, dans la plupart des cas, il n’est pas intuitif d’utiliser plus d’images car c’est juste déroutant et la signification est faible. Moins c’est mieux, et parfois il est préférable de n’utiliser que quelques photos mais importantes pour garder les choses propres et efficaces.

Par exemple, lorsque vous en écrivez un Note sandale, Vous souhaitez équilibrer le contenu avec des images de produits plutôt que d’utiliser simplement plusieurs images de sandales. En bout de ligne? Équilibrez la bonne quantité de contenu avec des images pour assurer un bon équilibre pour le lecteur.

Réflexions finales: optimiser les images pour Divi

Cependant, les images sont une partie importante de tout site Web pour qu’il fonctionne efficacement doivent non seulement avoir l’air bien, mais aussi avoir la bonne taille Sinon, le site Web se chargera extrêmement lentement et vos visiteurs / clients visiteront les sites Web de vos concurrents avec des images mieux optimisées.

Il n’y a pas de taille parfaite. Alors ne vous attardez pas trop sur l’optimisation des images. Assurez-vous simplement qu’ils ont l’air bien sur le visualiseur réactif de Divi et que vous êtes dans le vert.

Si vous avez des questions, faites-le moi savoir dans les commentaires ci-dessous et je vous répondrai dans les plus brefs délais. Vous pouvez également contacter le mien directement





Source link

Recent Posts