Les images sur le web

Vous vous demandez probablement quelles images utiliser pour agrémenter votre page d'accueil, vos actualités, vos événements, l'intérieur de vos pages, etc.
Cette rubrique vous donnera quelques pistes, qui ne sont pas obligatoires mais qui peuvent vous faire gagner du temps dans la mise en page de vos contenus.

Quelles images choisir pour décorer un site ?

Dans l'ensemble, vous pouvez utiliser tous types de visuels pour animer vos pages, vos actualités, et même vos documents, vos affiches, etc. du moment que vous avez le droit de les utiliser dans ce but !

Graphiquement...

Le DCWeb préconise d'utiliser des images avec un rendu visuel qui saura attirer l'œil de l'internaute et qui puisse suggérer l'idée souhaitée. En effet, les sites web récents sont responsive, cela signifie que les contenus s'adaptent en fonction du terminal utilisé pour consulter le site (ordinateur, tablette, smartphone). Ainsi, une image a de grandes chances d'avoir un gabarit différent selon ces terminaux et il est donc déconseillé d'utiliser une affiche telle quelle, avec un titre et d'autres éléments de texte : ceux-ci ont de grande chance d'être tronqués et l'affiche pourrait être lisible sur un ordinateur mais pas sur un smartphone !

Une image suggestive (image décorative, de fond...)

Vous pouvez utiliser des images décoratives, c'est souvent ce qui est recommandé dans une actualité / un événement : mieux vaut utiliser une image qui rappelle une conférence, un colloque, une exposition, et qui, peu importe la manière dont elle pourrait être tronquée, permettra toujours de représenter le type d'événement ou l'idée à faire passer.

Une photographie / un visuel précis

Si vous souhaitez mettre en ligne une photographie (portrait, photo de groupe) ou utiliser la trame visuel d'un événement, assurez-vous que le contenu principal de l'image se trouve au milieu de celle-ci !
Exemple :

Un logotype

De la même manière qu'un portrait, si vous avez besoin de mettre un (ou plusieurs) logotypes en ligne, assurez-vous que celui-ci dispose d'un bord suffisant pour que le logo reste visible dans son intégralité, peu importe la manière dont elle pourrait être tronquée !
Exemple :

Légalement...

Si vous mettez des images en ligne, assurez-vous d'en avoir le droit :

soit vous êtes l'auteur-e d'une photographie ou d'un graphisme et son utilisation ne regarde que vous !
soit vous avez le droit d'utiliser une photographie pour animer ou décorer votre site (image libre de droit, citation de l'auteur ou autorisation écrite permettant l'utilisation de l'image).

Il existe quantité de sites proposant des images libres de droit. Parmi ceux que le DCWeb utilise le plus souvent, Pexels ou Pixabay sont intéressants car on y trouve tous types d'images, de photographies, de visuels, de trames de fond dans des thématiques très variées.

Il existe également une photothèque à l'Unistra, à laquelle vous pouvez demander un accès auprès du service de la communication si vous appartenez à la communauté Unistra. Là encore, pour chaque image souhaitée, demandez quels sont les critères d'utilisation et de citation de l'auteur.

Un portrait, un groupe de personnes : accord écrit !

Si vous prenez une photographie de vos collègues, de vos étudiants ou de toute personne reconnaissable sur une image, assurez-vous d'en avoir informé [par écrit] ces personnes et d'avoir leur accord en vue de la diffusion sur le web de ladite photographie.
Exemple : si vous souhaitez créer un trombinoscope de votre équipe, informez par courriel vos collègues (y compris les nouveaux collègues arrivant en cours d'année) que leurs informations professionnelles ainsi que leur photo d'identité apparaîtra sur le site web de la structure. Vous pouvez mentionner qu'en l'absence d'un retour de leur part, leur silence vaut accord tacite.

Format des images pour le web

Sur le web, il existe différents formats d'image (.jpg, .png, .gif...). Le poids du fichier est plus ou moins important en fonction du format choisi, et la qualité de compression de l'image va être impactée. En effet, la compression d'une image permet de réduire le poids du fichier et par conséquent de réduire le temps de chargement de votre page web.
Mais rassurez-vous : à l'œil nu, une image sur le web correctement compressée n'altère pas son rendu !

Sans rentrer dans les détails techniques, retenez que certains formats sont plus adaptés que d'autres, en fonction du type d'image à mettre en ligne :

  • une photo : utilisez un JPEG (ou JPG)
  • un graphique, un logo, un dessin réalisé sur ordinateur, une signature Unistra : utilisez un PNG (ou éventuellement un GIF). En plus, ces deux formats permettent d'utiliser de la transparence dans votre image !
  • une image animée : utilisez un GIF animé

Les autres formats d'image, comme le BITMAP (.bmp) ou le TIFF (.tiff) sont à oublier car ils ne sont pas suffisamment compressés, donc trop lourds, et donc non adaptés à un support web.