{"id":5238,"date":"2023-06-15T14:16:31","date_gmt":"2023-06-15T12:16:31","guid":{"rendered":"https:\/\/www.editions-eni.fr\/blog\/?p=5238"},"modified":"2024-12-31T16:09:56","modified_gmt":"2024-12-31T15:09:56","slug":"comment-minimiser-limpact-des-videos-dans-nos-sites-web","status":"publish","type":"post","link":"https:\/\/www.editions-eni.fr\/blog\/comment-minimiser-limpact-des-videos-dans-nos-sites-web\/","title":{"rendered":"Comment minimiser l\u2019impact des vid\u00e9os dans nos sites web\u00a0?"},"content":{"rendered":"\n[et_pb_section fb_built=”1″ _builder_version=”4.9.0″ _module_preset=”default” custom_margin=”-13px|||||” custom_padding=”6px|||||”][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” custom_padding=”0px||0px||false|false”][et_pb_column type=”4_4″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||”]Pour limiter l\u2019impact de nos pratiques num\u00e9riques, il existe de nombreux leviers et parmi les plus importants, celui des usages autour de la vid\u00e9o. Les moyens de production \u00e9tant de plus en plus simples et la communication, par l\u2019image toujours plus importante, les vid\u00e9os ont envahi nos sites web dans une tendance loin de la sobri\u00e9t\u00e9 num\u00e9rique. Il existe pourtant des moyens de limiter l\u2019impact environnemental de ces contenus.<\/strong>[\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||”]Article \u00e9crit par Herv\u00e9 Boisgontier (voir son interview<\/a><\/em>) et <\/em>Boris Butaeye,<\/em> paru dans le magazine <\/a><\/em>Programmez <\/em><\/a>n\u00b0257<\/a>.<\/em><\/strong>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.9.7″ _module_preset=”default” custom_padding=”||0px|||”][et_pb_row _builder_version=”4.9.7″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”||||false|false”]\u00c0 l\u2019heure o\u00f9 la transition \u00e9cologique est sur toutes les l\u00e8vres, le num\u00e9rique reste tr\u00e8s g\u00e9n\u00e9ralement envisag\u00e9 comme facilitateur des futurs changements \u00e0 op\u00e9rer dans nos soci\u00e9t\u00e9s.\n\nSeulement, les \u00e9missions du secteur du num\u00e9rique repr\u00e9sentent d\u00e9j\u00e0 le double de celles du transport a\u00e9rien<\/strong> (4% des \u00e9missions mondiales de gaz \u00e0 effet de serre selon le Shift Project), et elles sont en croissance de 8% par an, ce qui pr\u00e9dit un doublement de ces \u00e9missions tous les 10 ans…tout simplement insoutenable !\n\nNos vies num\u00e9riques portent leur part de ces \u00e9missions, \u00e0 travers la consommation de services sans cesse croissants. Parmi ces pratiques, la consommation de m\u00e9dias vid\u00e9os occupe aujourd\u2019hui une part tr\u00e8s importante<\/strong>, boost\u00e9e par les changements d\u2019usages tr\u00e8s rapides de ces derni\u00e8res ann\u00e9es.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.9.7″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]Les usages du web sont en effet de plus en plus d\u2019ordre \u201ct\u00e9l\u00e9visuels\u201d<\/strong>, cela se ressent tant dans la tendance croissante de tous les r\u00e9seaux sociaux \u00e0 recourir \u00e0 la vid\u00e9o, que dans les contenus m\u00eame de ces vid\u00e9os, avec des cr\u00e9ateurs qui se professionnalisent et adoptent des processus de production de plus en plus semblables \u00e0 ceux des production t\u00e9l\u00e9visuelles classiques\n\nLa d\u00e9mocratisation des outils de cr\u00e9ation vid\u00e9o permise par la massification de la production de smartphones et d\u2019appareils photos (bien souvent tr\u00e8s dou\u00e9s en vid\u00e9os) a particip\u00e9 \u00e0 la baisse des co\u00fbts de production des supports vid\u00e9os, et \u00e0 leur adoption croissante en tant que support de communication.\n\nLa vid\u00e9o est aujourd\u2019hui largement utilis\u00e9e dans tous les secteurs d\u2019activit\u00e9 et les chiffres de consultation explosent…tout comme les infrastructures r\u00e9seaux et les serveurs n\u00e9cessaires \u00e0 soutenir la demande croissante.[\/et_pb_text][et_pb_image src=”https:\/\/www.editions-eni.fr\/blog\/wp-content\/uploads\/2023\/12\/repartition_flux_donnees.webp” alt=”R\u00e9partition des flux de donn\u00e9es en ligne” title_text=”R\u00e9partition des flux de donn\u00e9es en ligne” align=”center” _builder_version=”4.9.7″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_image][et_pb_text quote_border_color=”#3BB6D5″ _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||” custom_padding=”||0px|||”]Selon le Shift Project, les flux vid\u00e9o sur internet repr\u00e9sentent environ 80% de l’ensemble des flux de donn\u00e9es mondiaux !\n\nBien \u00e9videmment, les vid\u00e9os de nos sites internet n’en repr\u00e9sentent qu’une infime partie mais, il faut \u00eatre conscient que, de par leur nature, les vid\u00e9os constituent des fichiers volumineux sollicitant fortement les r\u00e9seaux.[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_row _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”-25px|auto||auto||”][et_pb_column type=”4_4″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]

1 – La strat\u00e9gie de l\u2019\u00e9vitement<\/h2>[\/et_pb_text][et_pb_text quote_border_color=”#3BB6D5″ _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||” custom_padding=”||0px|||”]Dans l\u2019objectif de d\u00e9ployer une communication num\u00e9rique sobre, le premier r\u00e9flexe \u00e0 avoir est donc l’\u00e9vitement.\n\nLa question \u00e0 se poser est la suivante : \u201cla vid\u00e9o est-elle la forme la plus adapt\u00e9e pour v\u00e9hiculer mon message ?\u201d<\/strong>\n\nSi le contenu est jug\u00e9 suffisamment indispensable, il faut alors se poser la question de l’importance des images. Est-ce qu’une version audio n’est pas suffisante ? Qu\u2019apporte l\u2019image en plus de l\u2019audio dans la transmission de ce contenu ?\n\nLe podcast \u00e9tant une solution nettement moins consommatrice de donn\u00e9es et d\u2019\u00e9nergie, il peut souvent \u00eatre favorablement substitu\u00e9 \u00e0 une vid\u00e9o.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”-25px|auto||auto||”][et_pb_column type=”4_4″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]

2 – La strat\u00e9gie de l\u2019all\u00e8gement<\/h2>[\/et_pb_text][et_pb_text quote_border_color=”#3BB6D5″ _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||” custom_padding=”||0px|||”]Si la mise en ligne d\u2019un support vid\u00e9o s\u2019av\u00e8re bel et bien n\u00e9cessaire et pertinent, il reste possible de limiter l\u2019impact de votre vid\u00e9o sur les infrastructures serveur\/r\u00e9seau\/client. Plusieurs leviers sont disponibles, et bonne nouvelle : ils sont tous activables simultan\u00e9ment et permettent de limiter consid\u00e9rablement cet impact ![\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]

2.1.Diminuer le poids des vid\u00e9os par la d\u00e9finition<\/h3>\nLa d\u00e9finition est, sans l’ombre d’un doute, le facteur permettant les plus gros gains<\/strong> d’un point de vue taille de fichier et donc de sollicitation du r\u00e9seau lors de son chargement. Est-il n\u00e9cessaire d\u2019avoir une r\u00e9solution HD (ou pire 4K ou 8K) pour regarder cela sur un \u00e9cran d\u2019un smartphone sachant que seules les plus grandes salles de cin\u00e9ma projettent une image en 4K (la majorit\u00e9 des salles utilisent des projecteurs 2K, r\u00e9solution proche du FullHD) ?\n\nIl est possible de pr\u00e9senter des vid\u00e9os sobres et efficaces en s\u2019interrogeant sur les conditions de diffusion de ces supports afin de limiter la r\u00e9solution finale du fichier au minimum n\u00e9cessaire.\n\nVoici un comparatif du poids des fichiers pour un enregistrement d’une minute \u00e0 trente images par secondes sans compression<\/strong> :[\/et_pb_text][et_pb_image src=”https:\/\/www.editions-eni.fr\/blog\/wp-content\/uploads\/2023\/12\/comparatif_enregistrement-1.webp” alt=”Comparatif enregistrement” title_text=”Comparatif enregistrement” align=”center” _builder_version=”4.9.7″ _module_preset=”default” width=”70%” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_image][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]Une bonne r\u00e8gle peut \u00eatre d’utiliser une d\u00e9finition de 480p pour les smartphones et de 720px pour les ordinateurs, et de ne passer au 1080p que pour des \u00e9crans de 50 pouces ou plus de diagonale.<\/strong> Le 4K est \u00e0 r\u00e9server uniquement \u00e0 la vid\u00e9o-projection sur des images de tr\u00e8s grande taille (plus de 10m de base)\n\nIl est possible de mettre en place des m\u00e9dia queries pour d\u00e9livrer une vid\u00e9o adapt\u00e9e \u00e0 la taille d\u2019\u00e9cran de l\u2019utilisateur :[\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” header_text_color=”#000000″ background_color=”#f9f9f9″ filter_brightness=”96%” box_shadow_style=”preset1″ box_shadow_blur=”12px”]

<video controls><\/p>\n

          <source src=”video480p.mp4″ type=”video\/mp4″ media=”(max-width: 1024px)”><\/p>\n

          <source src=”video720p.mp4″ type=”video\/mp4″><\/p>\n

<\/video><\/p>[\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]\u2192 Il est important de bien r\u00e9fl\u00e9chir \u00e0 la d\u00e9finition souhait\u00e9e avant de tourner les images : cela permet non seulement d’utiliser du mat\u00e9riel plus simple (un smartphone par exemple) et d’utiliser moins de puissance de calcul (et donc d\u2019\u00e9nergie) pour le montage.<\/strong><\/em>\n\n\u2192 Dans le cas de vid\u00e9os diffus\u00e9es sur les r\u00e9seaux sociaux, pensez aux formats vid\u00e9o carr\u00e9s (720×720 pixels) ! Ils sont tr\u00e8s adapt\u00e9s \u00e0 la consultation sur smartphones et consomment jusqu\u2019\u00e0 40% de donn\u00e9es en moins par rapport aux formats 16\/9 classiques.<\/strong><\/em>[\/et_pb_text][et_pb_code _builder_version=”4.9.7″ _module_preset=”default”][\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” custom_padding=”||0px|||”][et_pb_column type=”4_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text quote_border_color=”#3BB6D5″ _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||”]

2.2 Diminuer le poids des vid\u00e9os par la dur\u00e9e<\/h3>\nCela semble une \u00e9vidence mais il faut bien avoir en t\u00eate que plus une vid\u00e9o est courte moins elle est lourde.<\/strong> Il est donc int\u00e9ressant avant le tournage de la vid\u00e9o de la concevoir le plus efficacement possible. Bien penser aux messages que vous souhaitez faire passer, bien ordonner et structurer les id\u00e9es, les rendre compr\u00e9hensibles sont les clefs du succ\u00e8s. En plus votre vid\u00e9o sera plus attractive et efficace qu’une vid\u00e9o trop longue !\n\nSachez que le temps moyen de visionnage d\u2019une vid\u00e9o sur les r\u00e9seaux sociaux exc\u00e8de rarement la minute,<\/strong> et ce quelle que soit la plateforme examin\u00e9e. Chaque seconde au-del\u00e0 de cette premi\u00e8re minute devient donc potentiellement une seconde de trop si vous tenez \u00e0 d\u00e9livrer l\u2019ensemble de votre message au spectateur de la vid\u00e9o.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.9.7″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]ENI : Au-del\u00e0 des managers, n\u2019est-ce pas le monde du travail tel qu\u2019on l\u2019a connu qui se retrouve challeng\u00e9 ?<\/span><\/strong>\n\nDP :<\/strong> C\u2019est le rapport au travail qui est challeng\u00e9. Et cela concerne tout le monde. Chacun individuellement est acteur de ce changement de cosmogonie. \u00c0 nous d\u2019en \u00eatre les promoteurs.[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_row _builder_version=”4.9.7″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]

2.3 Diminuer le poids des vid\u00e9os par la compression<\/h3>[\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]

2.3.1 Les codecs de compression<\/span><\/h4>\nIl existe \u00e9galement diff\u00e9rents algorithmes de compression pour les vid\u00e9os. \u00c0 l’heure actuelle, le H264 (ou Mpeg4) est le codec (COmpression \u2013 DECompression) le plus utilis\u00e9.<\/strong> Il a pour avantage d’\u00eatre support\u00e9 par la quasi-totalit\u00e9 des navigateurs et d’\u00eatre le codec le mieux d\u00e9cod\u00e9 nativement par les cartes graphiques, diminuant ainsi fortement les ressources n\u00e9cessaires \u00e0 la lecture c\u00f4t\u00e9 client. Il n\u2019est toutefois pas exempt d\u2019inconv\u00e9nients car il produit des fichiers plus volumineux que ses concurrents plus r\u00e9cents.<\/strong>\n\nLe H265 est le successeur d\u00e9sign\u00e9 du H264. Il a pour avantage de produire des fichiers deux fois plus l\u00e9gers que son pr\u00e9d\u00e9cesseur mais n’\u00e9tant pas libre de droit, il n’est support\u00e9 que par Safari. Il est aujourd\u2019hui d\u00e9cod\u00e9 en hardware par la majorit\u00e9 du mat\u00e9riel r\u00e9cent.\n\nLe codec le plus prometteur est l\u2019AV1 propos\u00e9 par l’Alliance for Open Media.<\/strong> Celui-ci est bas\u00e9 sur les m\u00eames algorithmes que le format AVIF pour les images. Il a des taux de compression encore meilleurs que ceux du H265 et est mieux support\u00e9 par les navigateurs (Firefox, Chrome, Edge, Opera mais pas Safari). Le second inconv\u00e9nient, en plus de sa non prise en charge par le navigateur d’Apple, est qu’il demande de tr\u00e8s fortes ressources pour \u00eatre lu et que tr\u00e8s peu de mat\u00e9riels sont capable de le d\u00e9coder nativement. Cela sollicite donc beaucoup le processeur.\n\nIl semble donc plus sage pour le moment de s\u2019en tenir au H264 pour la compression de ses vid\u00e9os, mais cette situation est amen\u00e9e \u00e0 \u00e9voluer dans les ann\u00e9es \u00e0 venir.\n\nPour compresser sa vid\u00e9o, il existe des solutions destin\u00e9es \u00e0 un public professionnel comme HandBrake (open source) ou des solutions hyper faciles d’utilisation comme Shrink my video!.[\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]

2.3.2 Mono ou st\u00e9r\u00e9o ?<\/span><\/h4>\nUn son en mono n’est constitu\u00e9 que d’une seule piste diffus\u00e9e aussi bien \u00e0 gauche que \u00e0 droite alors qu’un son st\u00e9r\u00e9o est constitu\u00e9 de deux pistes l’une destin\u00e9e \u00e0 l’oreille gauche et l’autre pour la droite. Un son st\u00e9r\u00e9o est donc deux fois plus volumineux que son \u00e9quivalent mono.<\/strong>\n\nIl est n\u00e9cessaire de se poser la question d’utiliser une ou deux pistes son. Pour r\u00e9pondre \u00e0 cette question, il est n\u00e9cessaire de prendre en compte deux \u00e9l\u00e9ments :\n