Que serait le Web sans les photos et vidéos qui peuplent ses pages ? Un endroit probablement fort austère et ennuyeux. Il est donc important d’intégrer des éléments multimédias sur votre site internet. Mais pas n’importe comment !
Si vous gérez un site internet, vous savez en effet qu’il doit répondre à certaines contraintes pour être performant : rapidité d’affichage de ses pages, fluidité de navigation pour l’internaute, quota de données à respecter sur le serveur qui l’héberge…
Si vous ne respectez pas ces objectifs, les conséquences peuvent être très gênantes : lenteur d’affichage provoquant un taux de rebond important des internautes, mauvaise expérience utilisateur, ainsi qu’un faible score SEO auprès de Google.
Vidéos : rapidité, poids, bilan carbone…
Pour parvenir à limiter au maximum le poids de vos vidéos, deux solutions s’offrent à vous.
- Les héberger sur une plateforme externe (Youtube, Dailymotion, Vimeo…)
Avantage : elles impactent peu le poids de votre site internet puisqu’elles ne sont pas situées sur votre serveur.
Inconvénient : les scripts nécessaires à leur intégration ralentissent tout de même le chargement des pages web. De plus, elles sont hébergées sur des serveurs générant un nombre incalculable et permanent de requêtes. D’un point de vue écologique, ce n’est pas idéal en raison de la grande consommation d’énergie et de ressources que cela implique.
- Les intégrer au format html 5
Avantage : la balise < video > du langage html 5 permet d’intégrer une vidéo en plusieurs formats afin d’optimiser sa compatibilité, mais également de personnaliser au maximum son affichage.
Inconvénient : si les différents formats offerts par le html 5 réduisent et optimisent le poids des vidéos, ces dernières resteront tout de même forcément plus lourdes qu’en cas d’intégration depuis Youtube ou un de ses équivalents.
D’autres paramètres sont à prendre en compte pour limiter l’impact de vos vidéos, en termes de rapidité d’affichage comme de confort de navigation. Pensez par exemple à désactiver le lancement automatique, voire à intégrer des sous-titres, car beaucoup de personnes coupent par défaut le son de leur smartphone.
Images et photos : ni trop petites, ni trop grandes !
L’objectif numéro 1 à respecter lors de l’intégration d’une image sur votre site internet : adapter sa largeur à la taille maximale du conteneur de vos pages (espace dédié au contenu texte, image, vidéo). Dans le cas d’un site responsive, cette taille varie en fonction de la taille de l’écran ou du modèle de smartphone / tablette utilisé pour l’afficher.
Ce besoin de compatibilité inclut également les écrans Retina, créés par Apple et se distinguant par leur très haute résolution.
Leur principe : une densité de pixels extrêmement élevée, grâce à laquelle l’œil n’est plus capable de les distinguer (les pixels).
Le problème : cette caractéristique multiplie au minimum par deux la valeur de chaque pixel (le degré de multiplication peut varier en fonction de la résolution d’écran).
Pour vous assurer que vos photos s’afficheront correctement sur les écrans Retina les plus exigeants, il vaut donc mieux les dimensionner au double de la largeur du conteneur, voire davantage.
Heureusement, les CMS prévoient généralement ce cas de figure.
- Dans notre CMS WebGazelle, les photos peuvent être directement intégrées en HD (grand format).
Elles sont alors automatiquement converties en Webp (format d’images dédié au Web qui réduit fortement leur poids).
L’image source de haute qualité étant conservée sur le serveur, le CMS est capable, grâce au paramètre « srcset », d’adapter son format en fonction des caractéristiques de l’écran détecté.
- WordPress, pour ne citer que lui, dispose de plugins tels que Perfect Images, qui remplissent des rôles similaires.
Un réflexe à avoir lors du développement d’un site internet : mettre en place le « lazy loading », grâce auquel le contenu d’une page web est chargé au fur et à mesure du scroll. Les images situées sous la zone de visualisation n’étant pas chargées dès l’ouverture de la page, cette dernière gagne en performance d’affichage.
UX Design, éco-conception web ?
La limitation du nombre et du poids des photos et vidéos de votre site internet correspond également aux bonnes pratiques recommandées dans le cadre de l’UX Design et l’éco-conception web.
L’UX Design vise à offrir aux internautes une expérience utilisateur agréable. Pour y parvenir, votre site internet doit être à la fois beau, ergonomique, rapide et accessible à tous. Si les éléments multimédias sont indispensables pour atteindre ces objectifs, il est important de ne pas en abuser.
L’éco conception web est quant à elle destinée à réduire l’impact du numérique sur l’environnement, et en particulier les ressources nécessaires pour héberger les sites web. Pour disposer d’un site internet moins énergivore, plusieurs actions sont recommandées, dont la mise en place d’un design épuré et d’un contenu léger (sans trop de photos et de vidéos), stockés sur le serveur d’un hébergeur soucieux de l’environnement.
Le serveur web, indispensable à la rapidité d’affichage
Vous avez besoin d’inclure sur votre site internet de nombreuses photos et vidéos, notamment en raison de la présence d’une boutique en ligne ou d’une médiathèque ?
Dans ce cas, veillez à ne pas sous-estimer la taille, la puissance et la configuration du serveur web qui héberge votre site internet. Sans cela, vous vous exposez à des crashs réguliers, qui peuvent être dus à un trop grand volume de données ou à un flux de transfert trop important à un moment X ou Y.
Vous accordez de l’importance à l’impact environnemental de votre site internet, ainsi qu’à la sécurité des données qu’il contient ?
Il est alors important qu’il ne soit pas hébergé sur un serveur trop éloigné de ses visiteurs. Vous vous adressez à des clients français mais votre serveur est situé au fin fond des Etats-Unis ou de la Chine ? Certes, la fibre optique facilite les choses, mais…
- Son affichage en France nécessitera des transferts de données plus longs (en termes de distance comme de temps) que s’il était hébergé localement.
- Ces longs transferts de données font appel à de nombreuses infrastructures et consomment beaucoup d’énergie. Ils génèrent donc de la pollution et impactent le bilan carbone de votre site web. En matière numérique aussi, les circuits courts ont du bon !
- L’hébergement de vos données sur un serveur à l’étranger peut les soumettre à la législation locale. C’est par exemple le cas au USA, en raison de l’extraterritorialité du droit américain.
