Créer des images, des galeries photo et des diaporamas dans Kopage

Les images comptent parmi les éléments de design les plus importants d'un site web. Dans le constructeur de sites web classique de Kopage, vous pouvez utiliser vos propres images, remplacer des images existantes et présenter plusieurs clichés via des galeries photo ou des diaporamas.

Tu ne dois pas seulement prêter attention à l'apparence d'une image. La taille du fichier, les dimensions, le cadrage et l'affichage sur différentes tailles d'écran influencent également la qualité de ton site web.

Dans ce guide, nous vous montrons comment utiliser judicieusement les images dans Kopage et quand une seule image, une galerie photo ou un diaporama est adapté.

En bref : Utilisez des images individuelles pour le contenu des pages normales, une galerie photo pour plusieurs clichés associés et un carrousel si plusieurs images doivent être affichées dans une zone de présentation commune.

Utiliser des images sur un site Web Jimdo #

Les images peuvent être insérées à différents endroits de votre site web dans Kopage.

Des exemples typiques sont les images à l'intérieur de blocs de contenu, les grandes zones visuelles, les photos d'équipe ou de références, ainsi que les images au sein d'une galerie ou d'un carrousel.

La variante qui a du sens dépend de la fonction que l'image doit remplir.

Une photo à côté d'une description des prestations ne nécessite par exemple pas de galerie photo. Si, en revanche, vous souhaitez présenter plusieurs clichés d'un projet, une galerie peut s'avérer nettement plus claire.

Télécharger votre propre image #

Si tu souhaites remplacer une image d'exemple existante par ta propre image ou créer une nouvelle zone d'image, tu peux utiliser ton propre fichier image dans Kopage.

Sélectionnez pour cela la fonction d'image dans la zone de contenu concernée et téléchargez le fichier souhaité ou choisissez une image déjà existante dans votre gestionnaire de fichiers.

Avant de télécharger un fichier, vous devez vérifier s'il est adapté à une utilisation sur un site Web.

Conseil pratique : Préparez si possible les images pour leur utilisation avant même de les télécharger. De très grands originaux d'appareils photo ou de smartphones génèrent des volumes de données inutiles, bien qu'ils soient affichés beaucoup plus petit sur le site Web.

Remplacer l'image existante #

De nombreux modèles et blocs de contenu contiennent déjà des images d'exemple. Celles-ci servent de substituts et peuvent être remplacées par vos propres images.

Lors du remplacement, veillez à ce que la nouvelle image corresponde à la zone prévue.

Une image au format très vertical peut par exemple être inadaptée si la zone de contenu est prévue pour un format paysage large.

Vérifiez par conséquent toujours le cadrage réel de l'image sur le site web après le remplacement.

Quels formats d'image conviennent pour un site web ? #

Pour les images de sites Web normales, on utilise notamment des formats Web modernes ainsi que JPEG et PNG.

Le format qui a du sens dépend du contenu de l'image.

Pour les photographies, un format d'image compressé est adapté. En revanche, pour les graphiques ou les logos, un format avec transparence peut être nécessaire.

Ce qui est décisif, c'est un compromis raisonnable entre la qualité d'image et la taille du fichier.

Important : Une taille de fichier d'image aussi grande que possible ne signifie pas automatiquement une meilleure représentation. Pour les sites Web, une taille de fichier appropriée est tout aussi importante que la qualité d'image visible.

Redimensionner les images avant de les télécharger #

Les smartphones modernes et les appareils photo numériques produisent des images avec des résolutions très élevées. De tels fichiers originaux sont souvent inutilement volumineux pour une utilisation directe sur un site Web normal.

Si une image sur votre site web, par exemple, n'est affichée qu'à une largeur d'environ 1000 pixels, un fichier original large de plusieurs milliers de pixels n'apporte généralement aucun avantage correspondant pour le visiteur.

Elle peut à la place augmenter la quantité de données à transférer.

Réduisez par conséquent les images à une taille raisonnable pour leur utilisation réelle et compressez-les sans dégrader inutilement la qualité visible.

Taille de fichier et temps de chargement #

Les images font souvent partie des fichiers les plus volumineux d'un site web. Par conséquent, plusieurs photos inutilement grandes peuvent considérablement affecter le temps de chargement.

C'est particulièrement pertinent sur les smartphones et les connexions Internet plus lentes.

Si une page contient dix grandes photos, le navigateur doit transférer beaucoup plus de données que dans le cas d'images judicieusement optimisées.

L'optimisation des images n'est donc pas seulement une mesure esthétique, mais aussi technique.

Choisir le bon cadrage #

Une bonne image de départ ne fonctionne pas automatiquement dans toutes les mises en page.

Lors de la sélection, vous devez tenir compte de l'espace prévu pour l'image et du rapport hauteur/largeur de la zone correspondante.

Un exemple :

Zone de contenu large
→ format plutôt paysage

Portrait de personne
→ format souvent portrait

Galerie uniforme
→ rapports d'image aussi cohérents que possible

Cela ne signifie pas que toutes les images doivent avoir exactement le même format. Cependant, un style d'image uniforme peut donner à une galerie ou à une page un aspect nettement plus harmonieux.

Utiliser des images dans des blocs de contenu #

Les blocs de contenu peuvent contenir différentes combinaisons de textes et d'images.

Cela vous permet par exemple d'afficher un texte à côté d'une image ou de créer une zone visuelle plus importante au sein d'une page.

Nous expliquons comment sélectionner et modifier fondamentalement les blocs de contenu sous Créer du contenu avec Kopage : modifier les blocs de contenu, les textes et les images.

Qu'est-ce que le gestionnaire de fichiers ? #

Kopage dispose d'un gestionnaire de fichiers qui vous permet de gérer les fichiers ou les images téléchargés.

C'est utile si vous souhaitez réutiliser une image déjà téléchargée à un autre endroit.

Cela vous évite de devoir télécharger à nouveau le même fichier depuis votre ordinateur pour chaque utilisation.

Une gestion claire des fichiers devient particulièrement importante lorsque votre site Web contient de nombreuses images et autres fichiers au fil du temps.

Organiser les fichiers de manière judicieuse #

Évitez de télécharger inutilement plusieurs fois les mêmes images.

Si un fichier correspondant existe déjà, tu dois si possible l'utiliser.

Des noms de fichiers compréhensibles aident également à la gestion ultérieure.

Un nom de fichier tel que :

team-curiaweb.jpg

est, par exemple, nettement plus significatif que :

IMG_839274.jpg

Cela est particulièrement vrai s'il y a plus tard de nombreux fichiers dans la gestion des médias.

Retoucher des images #

Kopage offre des possibilités de retouche d'images. Celles-ci permettent d'adapter les images pour les utiliser au sein du site web.

Néanmoins, il est judicieux d'utiliser déjà un fichier source approprié.

Un retoucheur d'images intégré ne devrait pas servir à compenser durablement des images sources trop grandes ou fondamentalement inadaptées.

Qu'est-ce qu'une galerie de photos ? #

Une galerie de photos est idéale si vous souhaitez présenter clairement plusieurs images connexes.

Les domaines d'application typiques sont par exemple :

• Références,
• Événements,
• Produits ou travaux,
• Locaux,
• Photos d'équipe ou de club.

Au lieu d'insérer chaque image comme un bloc de contenu séparé, vous pouvez afficher les clichés dans une galerie cohérente.

Créer une galerie photo dans Kopage #

Ouvrez la page sur laquelle vous souhaitez insérer votre galerie et sélectionnez la fonction de galerie correspondante ou le module prévu à cet effet.

Ajoutez ensuite les images souhaitées et vérifiez leur ordre et leur affichage.

Selon l'affichage de la galerie que vous utilisez, vous devez porter une attention particulière à la cohérence visuelle des images sélectionnées.

Conseil pratique : Une galerie de dix images soigneusement sélectionnées a souvent plus d'impact qu'une galerie de cinquante clichés très similaires. Montrez les photos qui intéressent vraiment les visiteurs.

Ordre des images de la galerie #

L'ordre peut influencer la manière dont les visiteurs perçoivent une série d'images.

Pour un projet, vous pouvez par exemple procéder de manière chronologique :

Situation initiale
       ↓
Travail
       ↓
Résultat intermédiaire
       ↓
Projet terminé

Dans une galerie générale, en revanche, l'image la plus forte ou la plus éloquente peut être judicieuse au début.

Évitez autant que possible un ordre totalement aléatoire si les images doivent raconter ensemble une histoire ou montrer une évolution.

Qu'est-ce qu'un curseur ? #

Un curseur affiche plusieurs contenus ou images successivement dans une zone commune.

Cela permet de présenter plusieurs images sans avoir à les afficher toutes en même temps les unes sous les autres.

Les curseurs peuvent être utilisés, par exemple, pour des références sélectionnées ou des impressions visuelles.

Quand est-ce qu'un slider est judicieux ? #

Un curseur doit remplir un objectif précis et ne pas être utilisé simplement parce que la fonctionnalité est disponible.

Si une seule image forte transmet déjà le message souhaité, cela peut être plus simple et plus efficace.

Un curseur est plutôt indiqué lorsque plusieurs images vont effectivement ensemble et doivent être affichées dans la même zone.

Remarque : Plus d'animation ne signifie pas automatiquement un meilleur design web. N'utilisez un curseur que là où plusieurs contenus changeants offrent une réelle valeur ajoutée au visiteur.

Galerie ou carrousel – qu'est-ce qui est le mieux ? #

Les deux fonctions poursuivent des objectifs différents.

Galerie de photos
→ visualiser plusieurs images de manière claire

Diaporama
→ afficher plusieurs images dans la même zone de présentation

Image unique
→ appuyer spécifiquement un message précis

Si les visiteurs doivent comparer plusieurs photos entre elles ou faire un choix libre, une galerie est souvent plus adaptée.

Si, en revanche, il s'agit de présenter seulement quelques impressions visuelles dans un espace compact, un curseur peut s'avérer judicieux.

Chaque page n'a pas besoin d'une galerie ou d'un slider #

Les fonctions visuelles supplémentaires doivent toujours correspondre au contenu.

Sur une page de contact, par exemple, un grand carrousel d'images n'est généralement pas nécessaire. Sur une page de références ou de projets, en revanche, une galerie peut s'avérer très utile.

Utilisez donc de telles fonctions de manière ciblée et non pas automatiquement sur chaque page.

Qualité d'image au sein d'une galerie #

Dans une galerie, les différences entre les différents tableaux se voient particulièrement vite.

Des résolutions, des formats d'image ou des styles visuels radicalement différents peuvent donner à l'affichage un aspect instable.

Si possible, préparez donc les images de galerie associées avec une qualité similaire et un format d'image adapté.

Éviter trop d'images #

Une galerie d'images volumineuse peut non seulement devenir confuse, mais aussi transférer des données supplémentaires.

Réfléchissez donc aux images qui sont réellement nécessaires.

Pour une page de référence, il n'est par exemple pas nécessaire de montrer vingt clichés presque identiques du même sujet.

Une sélection ciblée facilite l'orientation des visiteurs tout en réduisant les volumes de données inutiles.

Vérifier les photos sur le smartphone #

Une image peut paraître superbe sur un écran d'ordinateur de bureau et présenter un cadrage défavorable sur un smartphone.

Vérifiez par conséquent en particulier :

• grandes images de titre et d'arrière-plan,
• Blocs de contenu texte-image,
• Galérien,
• Curseur,
• et des images avec des motifs importants sur le bord.

Vous trouverez d'autres informations sur l'affichage mobile sous Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes.

Ne pas intégrer le texte sous forme d'image #

Les informations importantes doivent si possible figurer sous forme de vrai texte sur le site web et ne pas faire exclusivement partie d'une image.

Cela concerne par exemple les titres, les informations de contact ou les descriptions plus longues.

Le texte réel peut être affiché plus facilement sur différentes tailles d'écran et peut être mieux traité par les moteurs de recherche et les technologies d'assistance.

Images et optimisation pour les moteurs de recherche #

Les images peuvent également être importantes pour l'optimisation des moteurs de recherche. Ce qui est décisif, c'est surtout qu'elles soient intégrées de manière pertinente dans le contenu de la page et utilisées de façon techniquement correcte.

Utilisez des noms de fichiers explicites et, si la fonction correspondante est disponible dans la zone concernée, une description judicieuse ou un texte alternatif pour les images pertinentes sur le plan du contenu.

Un texte alternatif doit décrire ce qui est pertinent pour la compréhension de l'image ou du contenu de la page, et non être rempli d'une liste de termes de recherche.

Nous traitons des paramètres généraux de référencement (SEO) sous SEO avec Kopage : titres de pages, métadonnées, URL et optimisation pour les moteurs de recherche.

Respecter les droits d'auteur des images #

Ce n'est pas parce qu'une image peut être trouvée sur Internet que tu as le droit de l'utiliser sur ton propre site web.

Utilisez par conséquent vos propres images ou fichiers dont vous détenez les droits nécessaires.

Pour les images provenant de bases de données d'images, vous devez respecter les conditions de licence respectives et vérifier si, et sous quelle forme, une mention de la source ou de l'auteur est requise.

Important : Ne téléchargez pas d'images de la recherche d'images Google ou de sites web tiers pour les utiliser sans vérification sur votre site web. Le fait qu'une image puisse être trouvée ne préjuge en rien de vos droits d'utilisation.

Remplacer les images plus tard #

Vous pourrez mettre à jour ou remplacer des images sur votre site CoPage plus tard.

C'est par exemple utile lorsqu'il y a de nouvelles photos d'équipe, que les références sont mises à jour ou qu'une image utilisée jusqu'à présent ne correspond plus à l'apparence de ton site web.

Vérifiez après le remplacement si le nouveau cadrage correspond toujours au bloc de contenu concerné ou à la galerie.

Supprimer des images #

Si vous n'avez plus besoin d'un fichier image, vous devez vérifier avant de le supprimer définitivement s'il est encore utilisé à un autre endroit sur le site web.

C'est particulièrement important si tu as utilisé des fichiers plusieurs fois via une gestion centralisée des fichiers.

Attention : Ne supprimez pas précipitamment un fichier de la gestion des fichiers si vous n'êtes pas sûr qu'il est encore utilisé sur une autre page, dans une galerie ou dans une autre zone.

Erreurs typiques dans les images #

Des problèmes fréquents surviennent en raison de fichiers inutilement volumineux, de cadrages inadaptés, d'images floues ou de styles d'images très différents sur une même page.

Trop de curseurs et de galeries peuvent également surcharger un site web.

Un autre problème concerne les images qui ont un aspect décoratif mais qui ne correspondent pas au contenu réel.

Utilisez donc les images de manière ciblée et considérez-les comme faisant partie intégrante de votre communication, et non pas seulement comme de la décoration.

Vérification avant publication #

Après des modifications importantes de l'image, un bref contrôle en vaut la peine :

Toutes les images de substitution ont-elles été remplacées ?
        ↓
Les images sont-elles nettes ?
        ↓
Les fichiers sont-ils dimensionnés de manière judicieuse ?
        ↓
Les cadrages des images sont-ils corrects ?
        ↓
La galerie et le slider fonctionnent-ils ?
        ↓
L'ordre est-il logique ?
        ↓
Vérifier l'affichage sur smartphone
        ↓
Tester la page dans un navigateur normal

Quelle est la suite ? #

Après avoir pu gérer des pages, des blocs de contenu et des images, une autre fonctionnalité fréquemment requise est le formulaire de contact.

Cela permet aux visiteurs d'envoyer des demandes et d'autres informations directement via votre site web.

C'est pourquoi nous continuons avec Créer des formulaires et des formulaires de contact avec Kopage.

Résumé #

Dans le constructeur de sites Web classique de Kopage, vous pouvez utiliser des images individuelles dans vos pages et présenter plusieurs images via des galeries photo ou des diaporamas.

Préparez les images de manière aussi adaptée que possible à leur utilisation réelle. Veillez à une qualité suffisante, à des tailles de fichier raisonnables et à un cadrage approprié.

Une galerie de photos convient à plusieurs images associées, tandis qu'un diaporama peut présenter plusieurs images dans un espace de présentation commun. En revanche, pour de nombreux contenus, une seule image bien choisie suffit amplement.

Vérifiez toujours les images, les galeries et les diaporamas sur les écrans de plus petite taille et n'utilisez que des images pour lesquelles vous possédez les droits d'utilisation nécessaires.

Une bonne mise en image ne signifie pas d'utiliser le plus d'images possible. Ce qui est décisif, ce sont des motifs adaptés, une bonne qualité, des tailles de fichiers raisonnables et un objectif clair au sein de chaque page.