La Fibre

Télécom => Télécom => Numérique responsable Numérique responsable => Discussion démarrée par: vivien le 16 octobre 2023 à 22:15:38

Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 16 octobre 2023 à 22:15:38
Exemples de pages web non éco-conçues

Le référentiel général de l’écoconception des services numériques a un critère 4.7 qui est Le service numérique utilise-t-il uniquement du contenu vidéo, audio et animé porteur d’informations ?, (voir page 65 (https://lafibre.info/images/environnement/202310_referentiel_general_ecoconception_services_numeriques_consultation.pdf#page=65))

On me demande comment une vidéo peut en pas être porteur d'information, c'est-à-dire à but uniquement esthétique ?

Des exemples :
- CEA - 118 Mo H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1039278/#msg1039278)
- Mr-MultiServices - H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1039279/#msg1039279)
- Motion Pictures - 27 Mo H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1062324/#msg1062324)
- Apple - 7 Mo H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1064732/#msg1064732)
- Orne THD - 4 Mo H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1103701/#msg1103701)
- Idea Optical - 71 Mo H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1104854/#msg1104854)
- Center Parcs - 10 Mo (page d'accueil) puis 6 à 23 Mo par page H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1107337/#msg1107337)
- INA Campus - 6 Mo H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1107477/#msg1107477)
- Scaleway - 1,1 Mo - VP9 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1110161/#msg1110161)
- Shopify - 0,9 Mo - AV1 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1110162/#msg1110162)
- vivatechnology.com - 34 Mo H.264 (https://lafibre.info/numerique-responsable/pages-web-non-eco-concues/msg1118101/#msg1118101)



CEA une page web qui pése 120 Mo !

Le CEA (Commissariat à l'énergie atomique et aux énergies alternatives) est un site sérieux qui fait un rapport annuel conséquent. Ce rapport annuel est mis en valeur avec la page https://www.cea.fr/multimedia/Lists/StaticFiles/rapports/annuel/fr/index.html qui est mise à jour chaque année pour la nouvelle version du rapport.

Pour présenter son rapport annuel 2021, le CEA, affiche un fond vidéo illustrant présentant les 6 domaines d’intervention du CEA. Pas de son, pas d’explication, c’est uniquement décoratif.

Cette vidéo, lancée automatiquement au chargement de la page, va alourdir la page de 118 Mo (mode paysage) ou 82 Mo (mode portrait), y compris sur un smartphone en 4G.
La vidéo est encodée en H.264 à 7,8 Mb/s (paysage) et 5,4 Mb/s (portrait) ! Si le codec VP9 (CRF 32) avait été choisi, on serait à 1,7 Mb/s (paysage) et 0,5 Mb/s (portrait).
En mode Paysage, en réduisant à 1280 pixels de large + encodage VP9, on passe à 1,0 Mb/s.

(https://lafibre.info/images/environnement/202207_ecoconception_cea_page_rapport_2021_1.webp)

(https://lafibre.info/images/environnement/202207_ecoconception_cea_page_rapport_2021_2.webp)

Les points problématiques :
- L’objectif principal de la vidéo est décoratif
- Lancement automatique de la vidéo, sans action de l’utilisateur
- Codec vidéo peu efficace (H.264)
- Définition trop importante (1920 pixels de large en portrait)
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 16 octobre 2023 à 22:19:34
Rapport 2022 du CEA

Pour le rapport du CEA 2022, le maitre mot est la sobriété : Toujours une vidéo purement esthétique, mais avec un encodage à 2,5 Mb/s, il y a eu un effort vs le rapport de 2021 qui était à 7,8 Mb/s.

Taille de la vidéo : 30 Mo en mode paysage.

La définition est de 1888 x 544 en mode portrait et elle est toujours encodée en H.264.

L'URL est toujours https://www.cea.fr/multimedia/Lists/StaticFiles/rapports/annuel/fr/index.html

(https://lafibre.info/images/environnement/202307_ecoconception_cea_page_rapport_2022.webp)

La vidéo est bien sûr chargée et lancée sans action de l’utilisateur, y compris sur un mobile.

Voici la vidéo en question :

https://lafibre.info/videos/environnement/202307_ecoconception_cea_page_rapport_2022.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 16 octobre 2023 à 22:29:58
Une page web qui demande 15 Mb/s pour être vu, c'est possible ? Oui avec mr-multiservices !

Cette page https://www.mr-multiservices.fr ne charge pas une vidéo à but uniquement esthétique, mais 3 sur la même page et lancées en même temps.

L'effet est superbe. La vidéo centrale est un test nPerf à 2 Gb/s et en dessous, on voit une autre vidéo avec des ondulations.

Le texte jaune est le texte du site avec en fond la vidéo...

(https://lafibre.info/images/environnement/202310_ecoconception_mr-multiservices_accueil.webp)

Voici les 3 vidéos utilisées.

Vidéo 1 : nPerf 1524 x 720 à 30 images par seconde, encodé à 3,0 Mb/s + 129 Kb/s de son

https://lafibre.info/videos/environnement/202310_ecoconception_mr-multiservices_accueil_video1.mp4

Vidéo 2 : effet de vagues 1920 x 1080 à 30 images par seconde, encodé à 6,2 Mb/s

https://lafibre.info/videos/environnement/202310_ecoconception_mr-multiservices_accueil_video2.mp4

Vidéo 3 : centrale électrique fonctionnant à l'énergie solaire via des miroirs (on trouve ce type de centrale dans le désert) 1920x 1080 à 5,7 Mb/s


https://lafibre.info/videos/environnement/202310_ecoconception_mr-multiservices_accueil_video3.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 16 octobre 2023 à 22:33:42
Certaines pages du sites sont plus vertes, avec une seule vidéo !

(https://lafibre.info/images/environnement/202310_ecoconception_mr-multiservices_partenaires.webp)

Vidéo 1080 x 1080 à 60 images par seconde encodée à 3,7 Mb/s pour la vidéo + 127 Kb/s pour l'audio !


https://lafibre.info/videos/environnement/202310_ecoconception_mr-multiservices_partenaires.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 16 octobre 2023 à 22:36:56
N'hésitez pas à partager, vous aussi, les pages web non optimisées que vous découvrez sur le net !
Titre: Exemples de pages web non éco-conçues
Posté par: Kana-chan le 17 octobre 2023 à 01:21:15
Bonsoir,
Vidéo 1 : nPerf 1524 x 720 à 30 mages par seconde, encodé à 3,0 Mb/s + 129 Kb/s de son
Cela en fait du monde et de la magie ! :D

Edit Vivien : Corrigé
Titre: Exemples de pages web non éco-conçues
Posté par: Jiajo le 17 octobre 2023 à 01:25:26
non mais serieux c'est un prank ce site Mr multiservice

tente vivien  ;D
Description du service
Vous souhaitez l'avis d'un professionnel sur l'installation d'équipement optique.
* Les frais de déplacement pour le devis sont déductible de la facture final.

(https://media.tenor.com/2H4iq6bT12sAAAAM/risitas-dentadura-excited.gif)
Titre: Exemples de pages web non éco-conçues
Posté par: Free_me le 17 octobre 2023 à 08:54:39
Le CEA (Commissariat à l'énergie atomique et aux énergies alternatives) est un site sérieux qui fait un rapport annuel conséquent. Ce rapport annuel est mis en valeur avec la page https://www.cea.fr/multimedia/Lists/StaticFiles/rapports/annuel/fr/index.html qui est mise à jour chaque année pour la nouvelle version du rapport.

c'est celle là la page de 100Mo ? Car je la vois a 3.3Mo moi.
Ou alors tu attends 15min pour avoir regardé la video en entier ? Ce que 90% des gens ne font pas, et qui de toute façon correspond grosso-modo au trafic que tu aurai generé si tu avais navigué normalement sur d'autres pages du site ou d'un autre.

J'aimerai pas etre a ta place, vouloir mettre une note 'ecologique' sur des sites, c'est le bon chantier qui pue et on pourra toujours te renvoyer dans la gueule que ta notation c'est n'importe quoi. Sans compter qu'un site internet se change en 5sec, c'est pas comme une maison ou une bagnole. Et peut-etre pire, certains risquent de poser la question si c'est vraiment c'est a 'ca' que sert l'arcep. Enfin j'espere au moins qu'en interne vous realisez la bêtise du truc. Moi en tout cas je me rassure en me disant que de façon publique tu ne peux pas avouer "ouais on sait que c'est un chantier complètement débile, mais bon les ordres viennent d'en haut, donc...".

Les points problématiques :
- L’objectif principal de la vidéo est décoratif
- Lancement automatique de la vidéo, sans action de l’utilisateur
- Codec vidéo peu efficace (H.264)
- Définition trop importante (1920 pixels de large en portrait)[/size]

- c'est vrai. Et toutes ces images de merde qu'ils ont foutu partout là, ca aussi c'est decoratif. Revenons au minitel brdl ! Ou meme mieux, au papier !
- oui bien, encore heureux.
- bof
- ouais, si tu veux. Ca m'en touche une mais pas l'autre ;) Et puis selon le trafic de la page, faut voir. S'il y a 10 visites par jour sur cette page, est ce que avoir 3 ou 4 autres résolutions supplémentaire vaut le cout que ca engendre (payer un clampin pour faire ca, stocker, ...) ?
Titre: Exemples de pages web non éco-conçues
Posté par: trekker92 le 17 octobre 2023 à 09:24:22
Certaines pages du sites sont plus vertes, avec une seule vidéo !
https://forum.hardware.fr/hfr/Graphisme/Webdesign/besoin-sites-moches-sujet_7938_1.htm

:)
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 18 octobre 2023 à 10:21:05
c'est celle là la page de 100Mo ? Car je la vois a 3.3Mo moi.
L'année dernière, cette même page web pesait 120 Mo (la page est mise à jour chaque année et garde la même URL).

Cette année, il y a eu un travail d'optimisation, la vidéo ne fait que 30 Mo.

Si tu vois 3 Mo pour la page, c'est que tu ne comptes pas tout ce que charge le navigateur web.
La vidéo étant assez courte (c'est une boucle qui se répète), elle est rapidement chargée en intégralité par le navigateur.

Je ne suis pas contre la présence d'une vidéo qui aurait une utilité, la vidéo est un moyen qui permet de toucher un public que l'écrit ne permet pas, mais là, c'est purement décoratif et c'est chargé sans le consentement de l'utilisateur (si tu es en itinérance à l'étranger, tu apprécies d'avoir 120 Mo de perdu dans cette page dans sa version de l'année dernière).

J'aimerai pas etre a ta place, vouloir mettre une note 'ecologique' sur des sites, c'est le bon chantier qui pue et on pourra toujours te renvoyer dans la gueule que ta notation c'est n'importe quoi.
C'est dans l'autre sens : de plus en plus d'acteurs souhaitent pouvoir adresser le sujet de l'éco-conception, on regroupe donc les bonnes pratiques dans un document.

Il y a deux ans, quand le législateur nous a demandé de travailler sur le sujet, j'ai été très étonné : Mon domaine d'expertise, c'est la mesure de débit, la neutralité, l'IPv6, pas l'environnement ! Curieux, j'ai cherché à faire un document avec quelques pratiques d'éco-conception et on a été aidé par de nombreuses personnes qui ont de l'expertisent sur le sujet. Aujourd'hui, on a de nombreuses entités qui viennent nous voir, nous félicitent et veulent nous aider.

Après cette mise en consultation publique, il y a peu de personnes qui disent que "c'est n'importe quoi", on est étonné par un retour aussi positif, toutefois il faut attendre les ateliers de travail avec l'écosystème et la fin de la consultation publique pour se faire une idée.
Titre: Exemples de pages web non éco-conçues
Posté par: Free_me le 18 octobre 2023 à 10:26:38

Si tu vois 3 Mo pour la page, c'est que tu ne comptes pas tout ce que charge le navigateur web.
La vidéo étant assez courte (c'est une boucle qui se répète), elle est rapidement chargée en intégralité par le navigateur.


3.3Mo pour le chargement et l'affichage initial de la page
plus la video avance, plus ca charge, donc apres 15sec on est a 5Mo, encore 15sec plus tard, 8Mo, etc...
C'est facilement visible dans l'outil de dev de chrome ou fiefox, onglet network.
Titre: Exemples de pages web non éco-conçues
Posté par: Free_me le 18 octobre 2023 à 10:41:25
C'est dans l'autre sens : de plus en plus d'acteurs souhaitent pouvoir adresser le sujet de l'éco-conception, on regroupe donc les bonnes pratiques dans un document.

Il y a deux ans, quand le législateur nous a demandé de travailler sur le sujet, j'ai été très étonné : Mon domaine d'expertise, c'est la mesure de débit, la neutralité, l'IPv6, pas l'environnement ! Curieux, j'ai cherché à faire un document avec quelques pratiques d'éco-conception et on a été aidé par de nombreuses personnes qui ont de l'expertisent sur le sujet. Aujourd'hui, on a de nombreuses entités qui viennent nous voir, nous félicitent et veulent nous aider.

Après cette mise en consultation publique, il y a peu de personnes qui disent que "c'est n'importe quoi", on est étonné par un retour aussi positif, toutefois il faut attendre les ateliers de travail avec l'écosystème et la fin de la consultation publique pour se faire une idée.

mouais
je ne suis pas vraiment convaincu mais bon on verra bien ce que ca donne.
Titre: Exemples de pages web non éco-conçues
Posté par: Free_me le 18 octobre 2023 à 10:47:52
Cette année, il y a eu un travail d'optimisation, la vidéo ne fait que 30 Mo.

La dessus le juge de paix reste quand meme google :

Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 18 octobre 2023 à 11:13:52
Google s'intéresse au temps de chargement de la page.

De mon côté, je m'intéresse à l'impact environnemental (et le poids n'est qu'un des nombreux aspects, il ne faut pas faire l'erreur de se limiter à l'analyse contenu lourd = contenu qui demande beaucoup d'énergie)

Encore un site avec une vidéo : https://lora-alliance.org/
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 08 mars 2024 à 18:03:03
Je vais donner encore un site web pour montrer ce qu'il ne faut pas faire

C'est la Motion Picture Association : https://www.motionpictures.org/

Page d'accueil : vidéo décorative de 27,4 Mo, 1440 x 1080, encodage H.264 en profil "Main" (moins efficace que le High) à 7,7 Mb/s, sans piste audio.

La vidéo (comme celle des autres pages ci-dessous) se lance toute seule, sans action de l'utilisateur.

(https://lafibre.info/images/environnement/202403_ecoconception_motionpictures_page_1.webp)

La vidéo en question :


https://lafibre.info/videos/environnement/202403_ecoconception_motionpictures_page_1.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 08 mars 2024 à 18:05:35
Page "Who We Are" : vidéo décorative de 7,2 Mo, 1440 x 580, encodage H.264 en profil "Main" (moins efficace que le High) à 2,6 Mb/s, sans piste audio

(https://lafibre.info/images/environnement/202403_ecoconception_motionpictures_page_2.webp)

La vidéo en question :

https://lafibre.info/videos/environnement/202403_ecoconception_motionpictures_page_2.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 08 mars 2024 à 18:07:34
Page "What We Do" : vidéo décorative de 9,5 Mo, 1440 x 580, encodage H.264 en profil "Main" à 5,9 Mb/s, avec une piste audio encodée à 317 Kb/s mais qui est vide (pas de son) !

(https://lafibre.info/images/environnement/202403_ecoconception_motionpictures_page_3.webp)

La vidéo en question :

https://lafibre.info/videos/environnement/202403_ecoconception_motionpictures_page_3.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 08 mars 2024 à 18:10:17
Page "Research & Policy" : vidéo décorative de 12,1 Mo, 1440 x 580, encodage H.264 en profil "Main" à 10,3 Mb/s, sans piste audio.

(https://lafibre.info/images/environnement/202403_ecoconception_motionpictures_page_4.webp)

La vidéo en question :

https://lafibre.info/videos/environnement/202403_ecoconception_motionpictures_page_4.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 08 mars 2024 à 18:11:42
Page "Film Ratings" : vidéo décorative de 14,7 Mo, 1440 x 580, encodage H.264 en profil "Main" (moins efficace que le High) à 10,3 Mb/s, sans piste audio.

(https://lafibre.info/images/environnement/202403_ecoconception_motionpictures_page_5.webp)

La vidéo en question : Oui, 10 Mb/s pour cette vidéo qui ne montre rien....

https://lafibre.info/videos/environnement/202403_ecoconception_motionpictures_page_5.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: jeannot le 14 mars 2024 à 10:21:58
indicateurs de l'opulence de la MPAA?  ;D
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 14:44:16
Un autre site à avoir une vidéo décorative, lancée par défaut : Apple

C'est sur la page https://www.apple.com/mac/
- Vidéo de 6,8 Mo
- Durée : 13 secondes
- Définition : 1440 x 1080 à 30 images par seconde
- Codec : H.264 High, débit de 4,2 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_mac.webp)

La vidéo en question :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_mac.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 15:08:34
Site d'Apple, page iPhone

- Vidéo de 6,4 Mo
- Durée : 7 secondes
- Définition : 1440 x 1080 à 30 images par seconde
- Codec : H.264 High, débit de 4,2 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_iphone.webp)

La vidéo en question :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_iphone.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 15:11:19
Site d'Apple, page Apple Vision Pro

- Vidéo de 2,4 Mo
- Durée : 4 secondes
- Définition : 1426 x 1550 à 30 images par seconde
- Codec : H.264 High, débit de 5,0 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_vision_pro.webp)

La vidéo en question :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_vision_pro.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 15:14:00
Site d'Apple, page AirPods

- Vidéo de 5,3 Mo
- Durée : 5 secondes
- Définition : 1520 x 704 à 30 images par seconde
- Codec : H.264 High, débit de 7,9 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_airpods.webp)

La vidéo en question :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_airpods.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 15:15:18
Site d'Apple, page Apple TV

- Vidéo de 2,4 Mo
- Durée : 5 secondes
- Définition : 1200 x 674 à 30 images par seconde
- Codec : H.264 High, débit de 3,8 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_tv.webp)

La vidéo en question :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_tv.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 15:19:13
Site d'Apple, le pire, c'est la page divertissements : 4 vidéos sont chargées !

Page : https://www.apple.com/fr/services/
- Vidéo N° 1 de 3,1 Mo
- Durée : 6 secondes
- Définition : 1440 x 550 à 30 images par seconde
- Codec : H.264 High, débit de 4,0 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_services_1.webp)

La 1ère vidéo :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_services_1.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 15:20:23
Vidéo N° 2 de 21,6 Mo
- Durée : 20 secondes
- Définition : 1440 x 550 à 30 images par seconde
- Codec : H.264 High, débit de 8,6 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_services_2.webp)

La 2ème vidéo :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_services_2.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 15:21:44
Vidéo N° 3 de 3,0 Mo
- Durée : 12 secondes
- Définition : 1440 x 550 à 30 images par seconde
- Codec : H.264 High, débit de 1,9 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_services_3.webp)

La 3ème vidéo :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_services_3.mp4
Titre: Exemples de pages web non éco-conçues
Posté par: vivien le 24 mars 2024 à 15:22:44
Vidéo N° 4 de 3,8 Mo
- Durée : 15 secondes
- Définition : 1440 x 550 à 30 images par seconde
- Codec : H.264 High, débit de 2,0 Mb/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202403_ecoconception_site_apple_services_4.webp)

La 4ème vidéo de la page :
https://lafibre.info/videos/environnement/202403_ecoconception_site_apple_services_4.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 26 janvier 2025 à 10:55:17
Site d'Orne THD, page d'accueil

Page : https://ornethd.net/
- Vidéo N° 1 de 3,4 Mo
- Durée : 27 secondes
- Définition : 1280 x 720 à 60 images par seconde
- Codec : H.264 High, débit de 1,0 Mbit/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202501_ecoconception_site_ornethd_paris2024.avif)

La 1ère vidéo :
https://lafibre.info/videos/environnement/202501_ecoconception_site_ornethd_paris2024.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 26 janvier 2025 à 10:56:44
Vidéo N° 2 de 4,0 Mo
- Durée : 27 secondes
- Définition : 1920 x 1080 à 25 images par seconde
- Codec : H.264 High, débit de 1,2 Mbit/s
- Pas de piste audio


(https://lafibre.info/images/environnement/202501_ecoconception_site_ornethd_on_est_a_cote.avif)

La seconde vidéo :
https://lafibre.info/videos/environnement/202501_ecoconception_site_ornethd_on_est_a_cote.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 04 février 2025 à 22:45:07
Idea Optical, l'expert français des solutions de raccordement et de brassage des câbles à fibres optiques a, lui aussi, une vidéo en page d'accueil

Page : https://www.idea-optical.com/
- Vidéo de 70,8 Mo (alors que YouTube, à la même vidéo 1080p H.264 50 images par seconde en seulement 49,9 Mo)
- Durée : 1 minute et 45 secondes
- Définition : 1920 x 1080 à 50 images par seconde
- Codec : H.264 High, débit de 5,2 Mbit/s
- Piste audio présente (téléchargée, mais non utilisée) : 192 Kb/s en AAC LC


(https://lafibre.info/images/environnement/202501_ecoconception_site_idea-optical.avif)

La vidéo (plutôt réussie, mais si c'est un désastre en termes de consommation de données) :

https://lafibre.info/videos/environnement/202209_idea_optical_film_institutionnel.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: trekker92 le 05 février 2025 à 00:31:06
Entre l'alourdissement gargantuesque des pages web et le remplacement des interfaces client vers de l'appli exclusivement, c'est sur que tous les témoins sont écarlate pour faire regretter les années 2000..
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 24 février 2025 à 09:34:19
On continue dans les vidéos décoratives avec Center Parcs

Page : https://www.centerparcs.fr/
- Vidéo de 9,5 Mo (en version haute qualité, deux autres définitions sont disponibles sur l'hébergeur Vimeo, je ne sais pas si elles sont utilisées)
- Durée : 25 secondes
- Définition : 1920 x 530 à 30 images par seconde
- Codec : H.264 High, débit de 2,7 Mbit/s
- Piste audio présente, mais sans son (téléchargée, mais non utilisée) : 192 Kb/s en AAC LC

(https://lafibre.info/images/environnement/202502_centerparcs_page_accueil.avif)

La vidéo :

https://lafibre.info/videos/environnement/202502_centerparcs_page_accueil.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 24 février 2025 à 09:39:25
Page : https://www.centerparcs.fr/fr-fr/france/fp_VN_vacances-domaine-villages-nature-paris
- Vidéo de 18,8 Mo (en version haute qualité, deux autres définitions sont disponibles sur l'hébergeur Vimeo, je ne sais pas si elles sont utilisées)
- Durée : 77 secondes
- Définition : 1366 x 342 à 25 images par seconde
- Codec : H.264 High, débit de 1,6 Mbit/s
- Piste audio présente mais sans son (téléchargée, mais non utilisée) : 192 Kb/s en AAC LC

(https://lafibre.info/images/environnement/202502_centerparcs_page_villages_nature_paris.avif)

La vidéo :

https://lafibre.info/videos/environnement/202502_centerparcs_page_villages_nature_paris.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 24 février 2025 à 09:42:11
Page : https://www.centerparcs.fr/fr-fr/france/fp_LA_vacances-domaine-le-lac-d-ailette
- Vidéo de 22,2 Mo (en version haute qualité, deux autres définitions sont disponibles sur l'hébergeur Vimeo, je ne sais pas si elles sont utilisées)
- Durée : 83 secondes
- Définition : 1366 x 342 à 25 images par seconde
- Codec : H.264 High, débit de 1,9 Mbit/s
- Piste audio présente, mais sans son (téléchargée, mais non utilisée) : 192 Kb/s en AAC LC

(https://lafibre.info/images/environnement/202502_centerparcs_page_lac_ailette.avif)

La vidéo :

https://lafibre.info/videos/environnement/202502_centerparcs_page_lac_ailette.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 24 février 2025 à 09:44:01
Page : https://www.centerparcs.fr/fr-fr/france/fp_CH_vacances-domaine-les-hauts-de-bruyeres
- Vidéo de 14,0 Mo (en version haute qualité, deux autres définitions sont disponibles sur l'hébergeur Vimeo, je ne sais pas si elles sont utilisées)
- Durée : 42 secondes
- Définition : 1366 x 342 à 25 images par seconde
- Codec : H.264 High, débit de 2,5 Mbit/s
- Piste audio présente, mais sans son (téléchargée, mais non utilisée) : 125 Kb/s en AAC LC

(https://lafibre.info/images/environnement/202502_centerparcs_page_hauts_de_bruyeres.avif)

La vidéo :

https://lafibre.info/videos/environnement/202502_centerparcs_page_hauts_de_bruyeres.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 24 février 2025 à 09:45:27
Page : https://www.centerparcs.fr/fr-fr/france/fp_BD_vacances-domaine-le-bois-aux-daims
- Vidéo de 22,6 Mo (en version haute qualité, deux autres définitions sont disponibles sur l'hébergeur Vimeo, je ne sais pas si elles sont utilisées)
- Durée : 71 secondes
- Définition : 1366 x 342 à 25 images par seconde
- Codec : H.264 High, débit de 2,2 Mbit/s
- Piste audio présente, mais sans son (téléchargée, mais non utilisée) : 192 Kb/s en AAC LC

(https://lafibre.info/images/environnement/202502_centerparcs_page_bois_aux_daims.avif)

La vidéo :
https://lafibre.info/videos/environnement/202502_centerparcs_page_bois_aux_daims.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 24 février 2025 à 09:47:57
Page : https://www.centerparcs.fr/fr-fr/france/fp_BF_vacances-domaine-les-bois-francs
- Vidéo de 15,7 Mo (en version haute qualité, deux autres définitions sont disponibles sur l'hébergeur Vimeo, je ne sais pas si elles sont utilisées)
- Durée : 52 secondes
- Définition : 1366 x 342 à 25 images par seconde
- Codec : H.264 High, débit de 2,4 Mbit/s
- Pas de piste audio  (pour une fois, comme quoi c'est possible)

(https://lafibre.info/images/environnement/202502_centerparcs_page_les_bois-francs.avif)

La vidéo :
https://lafibre.info/videos/environnement/202502_centerparcs_page_les_bois-francs.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 24 février 2025 à 09:49:36
Page : https://www.centerparcs.fr/fr-fr/france/fp_TF_vacances-domaine-les-trois-forets
- Vidéo de 5,9 Mo (en version haute qualité, deux autres définitions sont disponibles sur l'hébergeur Vimeo, je ne sais pas si elles sont utilisées)
- Durée : 26 secondes
- Définition : 1366 x 342 à 25 images par seconde
- Codec : H.264 High, débit de 1,7 Mbit/s
- Piste audio présente, avec de la musique (téléchargée, mais non utilisée quand la vidéo est lue sur la page) : 125 Kb/s en AAC LC

(https://lafibre.info/images/environnement/202502_centerparcs_page_les_trois_forets.avif)

La vidéo :
https://lafibre.info/videos/environnement/202502_centerparcs_page_les_trois_forets.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 24 février 2025 à 09:51:27
Page : https://www.centerparcs.fr/fr-fr/france/fp_LG_vacances-domaine-les-landes-de-gascogne
- Vidéo de 9,6 Mo (en version haute qualité, deux autres définitions sont disponibles sur l'hébergeur Vimeo, je ne sais pas si elles sont utilisées)
- Durée : 42 secondes
- Définition : 1366 x 342 à 24 images par seconde (c'est la seule vidéo décorative de Center Parcs analysées à être à 24 images par seconde, les autres sont à 25 images par seconde)
- Codec : H.264 High, débit de 1,8 Mbit/s
- Pas de piste audio  (pour une fois, comme quoi c'est possible)

(https://lafibre.info/images/environnement/202502_centerparcs_page_landes_de_gascogne.avif)

La vidéo :
https://lafibre.info/videos/environnement/202502_centerparcs_page_landes_de_gascogne.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: Optix le 25 février 2025 à 10:53:02
INA Campus

Page : https://campus.ina.fr/
- Vidéo de 5.80 Mo
- Durée : 35 secondes
- Définition : 1280x720 à 25 images par seconde
- Codec : H.264, débit de 1,4 Mbit/s
- Pas de piste audio

(https://lafibre.info/images/environnement/202502_ina_campus.avif)

La vidéo :
https://lafibre.info/videos/environnement/202502_ina_campus.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 15 mars 2025 à 16:01:35
Ci-dessous, nous avons voir deux acteurs qui ont une vidéo décorative, mais qui sont meilleurs que les autres, avec une taille d'environ 1 Mo et l'utilisation de codecs efficaces.



Scaleway

Page : https://www.scaleway.com/
- Vidéo de 1,1 Mo
- Durée : 10 secondes
- Définition : 1680 x 1050 à 30 images par seconde
- Codec : VP9, débit de 0,8 Mbit/s
- Conteneur : WebM
- Piste audio absente

Pour une raison que j'ignoe la vidéo VP9 est incompastible avec Safari. Ce serait lié à l'absence de piste audio ?


(https://lafibre.info/images/environnement/202503_scaleway_page_accueil_support_vp9.avif)

Avec Safari sur iPhone, c'est une image fixe qui rempalce la vidéo.

Sur un vieux navigateur PC sans support de VP9 (ci-dessous Firefox avec VP9 désactivé), pas d'image :
(https://lafibre.info/images/environnement/202503_scaleway_page_accueil_sans_vp9.webp)

La vidéo :

https://lafibre.info/videos/environnement/202503_scaleway_vp9.webm
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 15 mars 2025 à 16:07:01
Shopify

Page : https://www.shopify.com/fr
- Vidéo de 887 Ko (AV1) 1,8 Mo (H.264)
- Durée : 11,3 secondes
- Définition : 1920 x 1080 à 24 images par seconde
- Codec : AV1, débit de 587 Kbit/s si le navigateur supporte AV1. Sinon (iPhone sans AV), fallback en H.264 : 1273 Kbit/s
- Conteneur : WebM pour AV1 (donc incompatible Safari qui ne supporte AV1 que dans du MP4) et MP4 pour H.264
- Piste audio absente

(https://lafibre.info/images/environnement/202502_shopify_page_accueil_av1.avif)

Dans le cas, très rare, où un navigateur n'a pas de prise en charge du VP9 (des iPhone avec une veille version d'iOS), la vidéo ne s'affiche pas :

Sur un vieux navigateur, j'ai égaement eu le droit à une image PNG qui remplace la vidéo :

(https://lafibre.info/images/environnement/202502_shopify_page_accueil_png.avif)

La vidéo AV1 : (incompatible Safari, car utilisation d'un conteneur WebM)


https://lafibre.info/videos/environnement/202502_shopify_page_accueil_av1.webm

La vidéo H.264 :

https://lafibre.info/videos/environnement/202502_shopify_page_accueil_h264.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: turold le 15 mars 2025 à 17:49:15
Bonjour,

Je vous propose une petite parenthèse... et un retour vers le passé, pour souligner que ces pratiques en HTML5 ne datent pas du HTML5.

En effet, du temps du plugin Flash, il y avait déjà parfois du Flash... alors qu'on pouvait déjà largement s'en passer.
Il me reste cet exemple, encore d'actualité (impossible sans Flash): http://www.lagoonb.com/francais/main.php
C'est un jeu par navigateur.
Quelques soit la page entièrement en Flash, il n'y a que:
- des images (animées ou non, peut être au format vidéo quand c'est animé en permanence)
- des formulaires
- des textes (cliquables ou non)

Spoiler: je peux encore y accéder avec un Flash pas à jour, un navigateur pas à jour, sous un Windows 7 pas à jour... et depuis des années, je vois toujours 0 connecté en simultané à ce jeu. Je ne m'y connecte plus moi-même, je me contente de la page du lien ci-dessus.

Bref, on peut mettre le langage qu'on veut pour coder une page internet. Temps que celle-ci permet des abus, il y en aura.
Titre: Exemples de pages web avec vidéo décorative
Posté par: Cochonou le 15 mars 2025 à 22:28:38
Pour le coup, ce jeu est un peu un contre-exemple non ?
Parce que s'il y avait quelque chose dont les capacités étaient inégalées à l'époque, c'était bien le flash... surtout pour faire un jeu sur le web.
Le HTML5 en était très loin.

Combien du temps youtube a-t-il utilisé le flash pour diffuser ses vidéos ?
Titre: Exemples de pages web avec vidéo décorative
Posté par: turold le 15 mars 2025 à 22:38:42
Pour le coup, ce jeu est un peu un contre-exemple non ?
Non.

Pour le dire autrement:
- Lagoon B n'est pas un jeu vidéo. C'est un jeu non-vidéo par navigateur.
- formulaires : faisable en HTML4
- images, même animées: faisable en HTLM4 avec du PNG, JPG, ou GIF, au choix.
- des textes: faisable en HTML4
Titre: Exemples de pages web avec vidéo décorative
Posté par: Cochonou le 15 mars 2025 à 22:56:38
Du coup tu m'as donné envie d'aller voir !
Ça marche avec un navigateur à jour en installant Ruffle (https://ruffle.rs/) (installé pour l'occasion).

Alors visiblement tu en as fait une pub efficace puisqu'il y a un peu plus que 0 joueurs désormais (voir plus bas).

Après en regardant très rapidement : c'est vrai que comme jeu c'est très statique, mais il y a quand même beaucoup d'animations vectorielles. C'est "imitable" en HTML4 avec des des images animées oui, mais pour le coup c'est beaucoup moins efficace, ça demande beaucoup plus d'efforts (et c'est moins éco-concept d'ailleurs, d'un point de vue encodage ?)
Même si toutes ces animations ne servent pas à grand chose pour le jeu.
Titre: Exemples de pages web avec vidéo décorative
Posté par: turold le 15 mars 2025 à 23:16:51
Alors visiblement tu en as fait une pub efficace puisqu'il y a un peu plus que 0 joueurs désormais (voir plus bas).
Dommage que je ne touche pas de commission dessus. :P Je n'ai plus de compte dans ce jeu depuis très longtemps.

Après en regardant très rapidement : c'est vrai que comme jeu c'est très statique, mais il y a quand même beaucoup d'animations vectorielles. C'est "imitable" en HTML4 avec des des images animées oui, mais pour le coup c'est beaucoup moins efficace, ça demande beaucoup plus d'efforts (et c'est moins éco-concept d'ailleurs, d'un point de vue encodage ?)
Même si toutes ces animations ne servent pas à grand chose pour le jeu.
Pour les animations dans ce jeu, nous sommes d'accord.

Concernant le vectoriel dans HTML4, c'est possible avec SVG (mais c'est un peu plus compliqué que les autres formats d'images).
Même si comme WebP/Avif de nos jours, le SVG a surtout mis beaucoup de temps à se démocratiser.
Mais le SVG est disponible depuis les années 2000 dans les navigateurs.

Le jeu est surtout à l'abandon (contrairement au domaine) pour garder du Flash encore aujourd'hui, pour du grand publique.
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 17 mars 2025 à 13:41:28
Autre retour vers le passé, les sites web avec de la musique (un fichier .midi)

Par exemple sur ce site web https://web.archive.org/web/20030923181805/http://matthewsplace.com/

Il y a un fichier audio Midi de 7,6 Ko :
<p><embed src="/web/20030923181805oe_/http://matthewsplace.com/matthewsplace.mid" width="2" height="0" autostart="true" loop="1"> </p>
J'ai l'impression que les navigateurs actuels ne sont plus compatibles avec la lecture de musique midi en fond.

Il faudrait que je teste avec Internet Explorer, vu que le site mentionne "Best viewed with Internet Explorer"

Sur des versions plus anciennes (mai 2000) de la même page web (https://web.archive.org/web/20000511000245/http://www.matthewsplace.com/), c'est un autre code :
<bgsound src="images/cannon.mid" loop="1">
Titre: Exemples de pages web avec vidéo décorative
Posté par: turold le 17 mars 2025 à 17:18:36
Ah, l'audio MIDI, je l'avais oublié, celui-là.
N'empêche, en éco-conception à l'époque, c'était l'audio WAV/WAVE qui était (et reste) le pire.

D'ailleurs, ces 2 formats ont été implémentés avec le HTML5.
Côté navigateurs de bureau:
- WAV/WAVE (natif): tout les navigateurs sauf IE (très peu de HTML5).
- MIDI (via API): tout les navigateurs sauf IE et Safari.

Hors HTML5, je ne connais pas les implémentations. Mais je ne connais pas de site qui les utilise en HTML5.
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 21 mars 2025 à 22:15:29
Image 5512 % de la taille visualisée !

Ce n'est pas une vidéo, mais sur la page https://www.avicca.org/actualite/ztd-vers-une-fermeture-du-cuivre-en-2032 on a une image annexe "TRIP de printemps 2025 Les 13 et 14 mai" qui apparait en petite taille (150x208 pixels), mais sa taille réelle est de 8268x118111 pixels et une taille de près de 9 Mo !

(https://lafibre.info/images/environnement/202403_avicca_image_trop_grande.webp)

Voici l'image avec 150 pixels de large. Cliquer pour agrandir. Pour voir la taille réelle de 8268 pixels, il faut la télécharger ou faire bouton droit "ouvrir l'image dans un nouvel onglet " et cliquer pour afficher en taille 100%.

(https://lafibre.info/images/environnement/202403_avicca_image_trop_grande_jpeg.jpg)
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 15 mai 2025 à 22:02:29
vivatechnology.com : Un exemple de ce qu'il ne faut pas faire

Quand vous avez de nombreuses petites images de 168 pixels x 168 pixels, comment faire pour que cela soit le plus lourd possible à être téléchargé ?

Vous mettez des images bien trop grandes de  3000 pixels x 3000 pixels conjugué à un format d'image totalement inadapté pour des photos : le PNG.

On se retrouve avec des dizaines de Mo à télécharger pour quelques petites images !

(https://lafibre.info/images/environnement/202505_vivatechnology_images_png_3000x3000_0.avif)

Les images téléchargées sont au format PNG, avec une taille de 3000 x 3000 pixels avant que le navigateur réduise leur taille :


(https://lafibre.info/images/environnement/202505_vivatechnology_images_png_3000x3000_1.avif)

(https://lafibre.info/images/environnement/202505_vivatechnology_images_png_3000x3000_2.avif)
Titre: Exemples de pages web avec vidéo décorative
Posté par: vivien le 15 mai 2025 à 22:03:46
Pour alourdir la page https://vivatechnology.com/ on peut aussi rajouter une vidéo décorative

- Vidéo de 33,9 Mo
- Durée : 60 secondes
- Définition : 1920 x 1080 à 25 images par seconde
- Codec : H.264 High, débit de 4,4 Mbit/s


(https://lafibre.info/images/environnement/202505_vivatechnology_page_accueil.avif)

La vidéo en question :

https://lafibre.info/videos/environnement/202505_vivatechnology_video_page_accueil.mp4
Titre: Exemples de pages web avec vidéo décorative
Posté par: Florian le 16 mai 2025 à 13:51:12
C'est malheureusement à la mode depuis un bail les vidéos lancées depuis youtube/googlevideos insérées dans la page  >:(

Titre: Exemples de pages web avec vidéo décorative
Posté par: guiest63 le 23 mai 2025 à 09:56:40
Sur le site de XP fibre il y a aussi une vidéo sur toutes les pages web en auto lecture sur plusieurs pages

Titre: Exemples de pages web avec vidéo décorative
Posté par: timpera le 03 juin 2025 à 21:21:38
Pourquoi le toit de la maison au milieu en bas "vibre" ? Problème de compression ?  ;D
Titre: Exemples de pages web avec vidéo décorative
Posté par: MaxLebled le 03 juin 2025 à 21:41:06
Oui, mauvaise estimation du vecteur de mouvement ou trop d'aggressivité pour garder le macrobloc existant malgré une longue distance.

Il est à noter qu'ils ne se sont pas foulés pour encoder leur vidéo : ils sont juste pris le fichier généré par YouTube, mdr.

Dédicace spéciale aux 882 KiB de la piste audio complètement vide.