Les images jouent un rôle crucial sur un site internet, mais il peut parfois être difficile de connaître les bonnes tailles de fichiers, de pixels et la façon de recadrer ses images. Cet article souligne les meilleures pratiques pour utiliser des images sur votre site internet.
Recommandations
Veuillez noter que les recommandations qui vont suivre sont uniquement basées sur ce que nous pensons qui fonctionne le mieux dans l’Éditeur Mono – ce ne sont pas des réponses définitives qui doivent être suivies à la lettre.
Pixels et taille du fichier (général)
Les pixels et la dimension de l’image ne sont pas seulement une question de ce qui est recommandé pour l’Éditeur mais aussi pour l’expression visuelle spécifique que vous souhaitez sur vos sites internet. Les recommandations pour les pixels et les dimensions sont donc principalement basées sur la largeur d’image puisque la largeur est importante pour un site internet au design adaptatif en fonction des appareils, tandis que la hauteur est principalement une question de préférence de design.
Pourquoi la largeur est-elle importante ?
Utiliser des images avec un certain minimum de largeur assure qu’elles s’afficheront toujours bien sur des sites internet qui s’adaptent, peu importe la taille de l’écran du visiteur. Il est donc recommandé d’utiliser une largeur d’image de 2600 pixels ou plus pour les images de couverture qui prennent une ligne entière. En fait, il faut également garder en tête le nombre 2600 si vous avez plus d’une seule image sur la même ligne, car la largeur totale de toutes les images combinées doit mesurer 2600 pixels.
Pixels quand on utilise plusieurs images en ligne
Par exemple, si vous avez trois images côte à côte, chaque image doit faire au moins 866 pixels de large (puisque 866*3 = approximativement 2600).
Largeur recommandée en pixels : 2600 pixels ou plus (72 dpi)
Largeur pour les lignes fixes
Avoir un site internet avec une disposition de lignes fixes modifie évidemment les exigences pour les dimensions de votre image, car la largeur d’une ligne fixe est de 1140 pixels pour les colonnes. Pas de panique, vous pouvez toujours utiliser les mêmes images que sur vos lignes fluides avec 2600 pixels ou plus. Incluez l’image que vous avez en 2600 pixels et l’Éditeur générera automatiquement une version optimisée pour vos lignes fixes une fois que vous aurez publié votre site internet.
Qu’en est-il de la hauteur?
La hauteur de vos images est également une dimension importante, mais c’est plus une question d’apparence et de goût que de comportement adaptatif. Le plus important à garder en tête quand vous établissez la hauteur de vos images est qu’elle soit la même pour toutes les images que vous prévoyez de placer immédiatement les unes à côté des autres. Lisez la section "utiliser deux, trois images ou plus" ci-dessous pour obtenir plus d’informations sur la hauteur d’images.
Sachez que l’apparence de la ligne change en fonction de la hauteur de votre image, car elle dicte la hauteur de la colonne dans laquelle le module image est placé. Si l’image est incluse comme arrière-plan de ligne ou de colonne, la hauteur de l’image est déterminée par les paramètres d’espacement de la ligne/colonne. Si vous voulez afficher plus de votre image choisie, ajoutez plus d’espacement à la ligne ou à la colonne.
Recadrer les images : utiliser plusieurs images dans une ligne
L’Éditeur dispose d’un Éditeur d'Images intégré qui est un excellent outil pour vous assurer que vos images ont la taille correcte en pixels sans avoir à utiliser d’applications tierces pour les recadrer et les redimensionner. L’Éditeur d’Images est facile à utiliser et dispose de tailles préétablies qui vous permettent d’enregistrer vos images dans une taille/un format spécifique.
Utiliser deux, trois images ou plus
Recommandations
Veuillez noter que les recommandations suivantes sont basées sur les images qui sont utilisées sur une disposition fluide de ligne sans aucun espacement ajoutées entre elles.
Quand vous utilisez deux, trois images ou plus sur une ligne, les exigences pour les images sont les mêmes que ci-dessus. Nous vous recommandons de suivre les règles suivantes:
Premièrement,assurez-vous que la largeur totale de vos images soit de 2600 pixels ou plus pour optimiser leur adaptabilité. Avec une largeur inférieure à 2600 pixels, l’apparence pourrait changer sur un grand écran d’ordinateur et engendrer un espace non désiré entre les images. La dimension de largeur spécifique dépend du nombre d’images (colonnes) que vous avez sur une ligne. Donc, si vous avez trois images adjacentes, chaque image devrait mesurer au moins 2600/3 = 866 pixels. Si vous avez quatre images adjacentes, chacune doit faire au moins 2600/4=650 pixels.
- Premièrement, assurez-vous que la largeur totale de vos images soit de 2600 pixels ou plus pour optimiser leur adaptabilité. Avec une largeur inférieure à 2600 pixels, l’apparence pourrait changer sur un grand écran d’ordinateur et engendrer un espace non désiré entre les images. La dimension de largeur spécifique dépend du nombre d’images (colonnes) que vous avez sur une ligne. Donc, si vous avez trois images adjacentes, chaque image devrait mesurer au moins 2600/3 = 866 pixels. Si vous avez quatre images adjacentes, chacune doit faire au moins 2600/4=650 pixels.
-
Deuxièmement, assurez-vous que vos images aient la même hauteur pour faire en sorte qu’elles s’affichent de manière cohérente et rationnalisée.
Taille du fichier image
La taille de fichier de vos images est importante pour la vitesse de chargement de la page. L’Éditeur compresse automatiquement vos images pour aider votre site internet à charger plus vite, mais nous vous recommandons tout de même de charger des images pas plus grandes que 200 kb en termes de taille.
Essayez d’utiliser des images qui n’excèdent pas 200 kb