[et_pb_section fb_built=”1″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” custom_padding=”||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=”||||||||” custom_padding=”||0px|||”]<\/p>\n
Paru dans le magazine <\/em>Programmez n\u00b0251<\/em><\/span><\/p>\n Le d\u00e9veloppement durable<\/strong> est d\u00e9fini par le rapport Brundtland de la Commission Europ\u00e9enne en 1987 de la mani\u00e8re suivante : \u00ab\u00a0Un d\u00e9veloppement qui r\u00e9pond aux besoins des g\u00e9n\u00e9rations pr\u00e9sentes sans compromettre la capacit\u00e9 des g\u00e9n\u00e9rations futures \u00e0 r\u00e9pondre aux leurs<\/em>\u00a0<\/strong>\u00bb. Cette d\u00e9finition, donn\u00e9e il y a plus de trente ans, est plus que jamais d’actualit\u00e9. Il est urgent d’agir, si nous souhaitons continuer \u00e0 profiter des bienfaits que nous apporte notre plan\u00e8te sans que cela ne remette en cause la qualit\u00e9 de vie des g\u00e9n\u00e9rations futures.<\/p>\n Souvent, nous avons l’impression que nous n’avons pas le pouvoir de changer les choses car nous ne sommes ni dirigeant d’un pays ni PDG d’une grande entreprise. N\u00e9anmoins, ces derni\u00e8res ann\u00e9es ont montr\u00e9 que lorsque les citoyens du monde changent de regard, changent leurs habitudes, prennent conscience des enjeux, alors c’est toute notre soci\u00e9t\u00e9 qui \u00e9volue. \u00c0 nous<\/strong>, donc, de<\/strong> changer nos pratiques<\/strong>, dans notre vie de tous les jours mais \u00e9galement dans notre vie de d\u00e9veloppeur<\/strong> !<\/p>\n [\/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” custom_padding=”20px||20px||false|false”][et_pb_row column_structure=”1_3,2_3″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_column type=”1_3″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_image src=”https:\/\/www.editions-eni.fr\/blog\/wp-content\/uploads\/2022\/03\/2022-03-ecoconception-carre01.jpg” alt=”culture num\u00e9rique responsable” title_text=”2022-03-ecoconception-carre01″ _builder_version=”4.9.7″ _module_preset=”default” animation_style=”slide” animation_direction=”bottom” animation_duration=”950ms” animation_intensity_slide=”10%” animation_starting_opacity=”10%” custom_css_main_element_last_edited=”on|phone” custom_css_main_element_phone=”display:none;”][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_3″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n [\/et_pb_text][et_pb_text quote_border_color=”#3BB6D5″ _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||”]<\/p>\n Le num\u00e9rique semble \u00e0 tort ne pas avoir de cons\u00e9quences \u00e9cologiques,<\/strong> car il semble immat\u00e9riel. Il n\u00e9cessite n\u00e9anmoins des \u00e9quipements informatiques \u00e0 la fois chez les utilisateurs (ordinateurs, tablettes, smartphones et box internet), au niveau des r\u00e9seaux informatiques (switches, routeurs, antennes\u2026) ainsi que dans les datacenters (serveurs, climatiseurs, onduleurs\u2026). [\/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” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]<\/p>\n Cette d\u00e9marche vise \u00e0 rendre plus vert, plus \u00e9cologique le monde num\u00e9rique<\/strong>. Il y a diff\u00e9rentes facettes qui permettent cela :<\/p>\n Dans cet article, le focus est fait sur la partie \u00e9coconception web<\/strong>.<\/p>\n [\/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” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]<\/p>\n Le num\u00e9rique est \u00e9galement une formidable opportunit\u00e9 pour r\u00e9duire notre empreinte \u00e9cologique.<\/strong> Il peut permettre d’\u00e9viter des d\u00e9placements. Par exemple, une plateforme de covoiturage<\/strong> permet d’\u00e9viter que des voitures ne circulent pour une seule personne. Une solution de vid\u00e9oconf\u00e9rence<\/strong> est un autre exemple permettant d’\u00e9viter un certain nombre de d\u00e9placements. Le num\u00e9rique peut \u00e9galement \u00e9viter du gaspillage. Par exemple avec une solution permettant une meilleure gestion des stocks<\/strong> ou d’optimiser l’utilisation de ressources\u2026<\/p>\n [\/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” custom_padding=”20px||20px||false|false”][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_column type=”2_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n [\/et_pb_text][et_pb_text quote_border_color=”#3BB6D5″ _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||”]Cette \u00e9tape est cruciale<\/strong> pour cr\u00e9er un service num\u00e9rique avec une faible empreinte environnementale. Les plus gros leviers de gain green IT<\/strong> sont accessibles durant cette \u00e9tape. Par la suite, il est possible d’effectuer des am\u00e9liorations mais celles-ci auront des impacts beaucoup plus faibles.<\/p>\n La conception d’un service num\u00e9rique peut aboutir \u00e0 des solutions utilisant peu de technologie<\/strong> ou des technologies anciennes et avec un faible impact \u00e9cologique. Ces solutions se nomment low-tech<\/strong> en opposition \u00e0 la high-tech. Cela peut par exemple aboutir \u00e0 un service num\u00e9rique consultable m\u00eame sur un mat\u00e9riel ancien ou avec un r\u00e9seau de faible d\u00e9bit\u2026<\/p>\n Il est \u00e9galement possible d’utiliser des solutions n’utilisant pas du tout de technologie<\/strong>, c’est la no-tech<\/strong>. Par exemple, l’utilisation de chiens pour d\u00e9tecter pr\u00e9cocement \u00e0 l’odeur certains cancers permet d’obtenir de meilleurs r\u00e9sultats qu’avec une Intelligence artificielle.[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_image src=”https:\/\/www.editions-eni.fr\/blog\/wp-content\/uploads\/2022\/03\/2022-03-ecoconception-carre02.jpg” alt=”culture num\u00e9rique responsable” title_text=”2022-03-ecoconception-carre02″ _builder_version=”4.9.7″ _module_preset=”default” animation_style=”slide” animation_direction=”bottom” animation_duration=”950ms” animation_intensity_slide=”10%” animation_starting_opacity=”10%” custom_css_main_element__hover_enabled=”on|desktop” custom_css_main_element_last_edited=”on|phone” custom_css_main_element_phone=”display:none;”][\/et_pb_image][\/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 quote_border_color=”#3BB6D5″ _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||”]<\/p>\n Bien souvent, les meilleures solutions allient plusieurs niveaux technologiques <\/strong>parmi les trois (no-tech, low-tech et high-tech). Il existe au Rwanda et au Ghana des livraisons de sang, m\u00e9dicaments et vaccins par drone vers des communaut\u00e9s \u00e9loign\u00e9es. Les commandes sont pass\u00e9es par SMS, ce qui est une bonne solution puisque ces pays n’ont pas une couverture suffisante pour utiliser internet. La solution alliant high-tech (drone) et low-tech (SMS) est une solution tr\u00e8s \u00e9cologique puisqu’elle a une empreinte \u00e9cologique bien moindre que l’acheminement par voie terrestre et permet de sauver beaucoup de vies gr\u00e2ce \u00e0 sa bien meilleure rapidit\u00e9 d’acheminement.<\/p>\n Lorsque le service num\u00e9rique est repens\u00e9 de fond en comble pour trouver une solution novatrice et \u00e0 fort impact \u00e9cologique, cela se nomme une action de facteur 4 par opposition \u00e0 celles ayant un impact plus faible nomm\u00e9es facteur 1.<\/p>\n Pour illustrer cela de mani\u00e8re imag\u00e9e, prenons l’exemple de la r\u00e9alisation d’un d\u00e9placement avec un v\u00e9hicule. La solution de la voiture thermique correspond \u00e0 une solution qui n’a pas \u00e9t\u00e9 \u00e9cocon\u00e7ue. La solution d’une voiture \u00e9lectrique est une solution de facteur 1 : elle n’a pas remis en question l’utilisation de la voiture, mais a cherch\u00e9 \u00e0 optimiser \u00e9cologiquement parlant cette solution. Enfin, l’utilisation d’un v\u00e9lo est une solution de facteur 4 : l’impact est r\u00e9duit drastiquement.<\/p>\n Dans nos choix, il faut se m\u00e9fier des reports<\/strong>. Cela peut se produire lorsqu’une solution permet de r\u00e9duire l’empreinte environnementale directe<\/strong> mais augmente son empreinte indirecte. C’est par exemple le cas d’un v\u00e9hicule \u00e9lectrique. \u00c0 l’usage, son empreinte est bien moindre par rapport \u00e0 un v\u00e9hicule thermique mais il faut cr\u00e9er et recycler les batteries de ces v\u00e9hicules, ce qui est plus polluant que la cr\u00e9ation et le recyclage d’un r\u00e9servoir de carburant.<\/p>\n Enfin, une solution peut \u00eatre globalement meilleure, mais cela d\u00e9cuple son utilisation et au final a une empreinte \u00e9cologique plus importante. C’est par exemple ce qui s’est pass\u00e9 avec la mise en place de la 5G en Cor\u00e9e du Sud.<\/p>\n<\/details>\n [\/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” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]Aliz\u00e9e Colin, dans un article de son blog lebondigital.com<\/a> indique\u00a0: \u00ab\u00a0un site est fini lorsqu\u2019il n\u2019y a plus rien \u00e0 enlever et non \u00e0 ajouter\u00a0<\/em><\/strong>\u00bb. Cette phrase surprenante r\u00e9sume tr\u00e8s bien la qualit\u00e9 premi\u00e8re attendue pour un site internet \u00e9cocon\u00e7u : la frugalit\u00e9. Nous avons tous tendance \u00e0 vouloir enrichir nos sites internet de nouvelles fonctionnalit\u00e9s, de nouvelles pages. Le terme enrichir fait penser que le site s’am\u00e9liore, mais en fait c’est comme des aliments trop riches : ils nous font grossir et nous nous retrouvons en surcharge pond\u00e9rale ! Il en va de m\u00eame pour les logiciels et en particulier les sites internet, certaines personnes parlent d’ob\u00e9siciel ou de gras num\u00e9rique<\/strong> ! Il est donc n\u00e9cessaire de commencer une cure d’amincissement pour nos sites existants et de faire attention au r\u00e9gime alimentaire de nos futures cr\u00e9ations<\/strong>.<\/p>\n Pr\u00e8s de la moiti\u00e9 (45%) des fonctionnalit\u00e9s<\/strong> d’une application ne sont jamais ou tr\u00e8s rarement utilis\u00e9es<\/strong>. Il est donc strat\u00e9giquement plus int\u00e9ressant de se concentrer sur les fonctionnalit\u00e9s vraiment utiles<\/strong>. Moins de lignes de code \u00e0 produire, cela a pour cons\u00e9quence plus de temps \u00e0 consacrer \u00e0 la qualit\u00e9 du code, \u00e0 l’accessibilit\u00e9, \u00e0 la s\u00e9curit\u00e9, au respect des r\u00e8gles du green IT\u2026 [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]Le design d’un site est un \u00e9l\u00e9ment tr\u00e8s important pour le marketing, pour l’image de marque, pour donner envie au visiteur\u2026 Et les graphistes effectuent souvent un travail tr\u00e8s esth\u00e9tique et attrayant. N\u00e9anmoins, il faut bien \u00eatre conscient que le style appliqu\u00e9 \u00e0 une page doit \u00eatre consid\u00e9r\u00e9 comme un plus, permettant d’embellir la page, mais ne doit en aucun cas \u00eatre essentiel pour la consultation ou l’interaction avec la page.<\/p>\n Pour concevoir une interface \u00e9l\u00e9gante et \u00e0 la fois l\u00e9g\u00e8re, il est important que les graphistes sachent ce qui est techniquement possible de faire pour donner du style uniquement avec du CSS sans avoir recours \u00e0 des images. S’il est possible de se passer d’images pour styliser une bordure par exemple, cela permet d’\u00e9conomiser des ressources. [\/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” custom_padding=”20px||20px||false|false”][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_column type=”2_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n [\/et_pb_text][et_pb_text quote_border_color=”#3BB6D5″ _builder_version=”4.9.7″ _module_preset=”default” text_font=”||||||||”]<\/p>\n Les images sont un \u00e9l\u00e9ment fondamental pour un site internet<\/strong>. Elles permettent de lui donner une identit\u00e9 graphique et de le rendre attrayant. N\u00e9anmoins, il faut \u00eatre attentif \u00e0 deux choses : d’une part, le poids qu’elles repr\u00e9sentent et d’autre part, l’information qu’elles apportent.<\/p>\n Concernant le poids<\/strong>, les images sont beaucoup plus volumineuses que le contenu textuel \u00e9voqu\u00e9 jusqu’\u00e0 pr\u00e9sent (HTML, CSS et Javascript). Il va donc \u00eatre n\u00e9cessaire de choisir attentivement leur nombre<\/strong> (lesquelles sont r\u00e9ellement n\u00e9cessaires ?), leur taille et leur format<\/strong>.<\/p>\n Concernant l’accessibilit\u00e9<\/strong>, il faut \u00eatre attentif \u00e0 ce que l’image soit correctement<\/strong> retranscrite<\/strong> aux internautes utilisant un lecteur d’\u00e9cran.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_image src=”https:\/\/www.editions-eni.fr\/blog\/wp-content\/uploads\/2022\/03\/2022-03-ecoconception-carre03.jpg” alt=”culture num\u00e9rique responsable” title_text=”2022-03-ecoconception-carre03″ _builder_version=”4.9.7″ _module_preset=”default” animation_style=”slide” animation_direction=”bottom” animation_duration=”950ms” animation_intensity_slide=”10%” animation_starting_opacity=”10%” custom_css_main_element_last_edited=”on|phone” custom_css_main_element_phone=”display:none;”][\/et_pb_image][\/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” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]Le premier r\u00e9flexe \u00e0 avoir pour un site \u00e9cocon\u00e7u est l’\u00e9vitement. Il faut donc se poser la question de l’apport d’une image pour le site. Si elle n’a pas une plus-value importante, il peut \u00eatre judicieux de ne pas la mettre ! De plus, de nos jours, une charte graphique simple, \u00e9pur\u00e9e et avec seulement quelques images bien mises en valeur est beaucoup plus tendance qu’un site surcharg\u00e9 d’images.[\/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” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_padding=”||0px|||”]<\/p>\n Il existe une multitude de formats d’images support\u00e9s par le web. D’une part les formats matriciels<\/strong> (PNG, JPEG, GIF\u2026) et de l’autre les formats vectoriels<\/strong> (SVG principalement). Les formats matriciels d\u00e9finissent la couleur de chaque pixel de l’image alors que les formats vectoriels d\u00e9finissent des formes g\u00e9om\u00e9triques (rectangles, ellipses, segments de droite, courbes\u2026).<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_4,1_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_column type=”3_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”||19px|||”]<\/p>\n Le SVG<\/strong> (Scalable Vector Graphics) est un format vectoriel. L’avantage de ce format est que, quel que soit le facteur de zoom<\/strong>, l’image est toujours parfaite sans aucun effet de pix\u00e9lisation<\/strong>. Ce format est donc bien adapt\u00e9 pour un logo, un sch\u00e9ma, un dessin ou une ic\u00f4ne<\/strong> mais il n’est pas adapt\u00e9 pour une photo puisque celle-ci peut difficilement \u00eatre r\u00e9duite \u00e0 des formes g\u00e9om\u00e9triques \u00e0 moins de souhaiter un effet artistique particulier ! Le SVG est un langage utilisant des balises comme le HTML. Il est donc possible de l’\u00e9diter \u00e0 l’aide d’un \u00e9diteur de texte.<\/p>\n Exemple : [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_image src=”https:\/\/www.editions-eni.fr\/blog\/wp-content\/uploads\/2021\/06\/eni.svg” alt=”logo eni svg” title_text=”eni” _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”30px||||false|false”][\/et_pb_image][\/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” background_color=”#EEEEEE” custom_padding=”10px|10px|10px|10px|false|false” animation_style=”slide” animation_direction=”left” animation_intensity_slide=”6%” animation_starting_opacity=”11%” border_width_all=”1px”]<\/p>\n <svg xmlns<\/span>=”http:\/\/www.w3.org\/2000\/svg” viewBox<\/span>=”0 0 184.25 184.25″> [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default”]<\/p>\n Ce fichier peut sembler complexe, mais il possible de le comprendre dans les grandes lignes<\/strong>. Tout d’abord, il contient une balise racine <svg><\/span>. Celle-ci contient une balise <defs><\/span> incluant une balise <style><\/span> d\u00e9finissant deux styles :\u00a0ap qui est utilis\u00e9 pour l’arri\u00e8re plan et pp pour le premier plan. La premi\u00e8re balise <rect><\/span> d\u00e9fini un rectangle couvrant toute l’image et permet de colorier tout le fond avec la couleur bleu. La seconde balise <rect><\/span> permet de dessiner le rectangle blanc du bas du logo. Enfin les balises <path><\/span> d\u00e9finissent des chemins constitu\u00e9s de courbes (\u00e0 l’aide de points de contr\u00f4le de courbes de B\u00e9zier), d’arcs de cercle et de segments de droite.<\/p>\n Cette image ne p\u00e8se que 1\u00a0959 octets<\/strong>, soit moins de 2Ko. Une image au format PNG \u00e9quivalente avec un format de 100\u00d7100 pixels p\u00e8se 4 093 octets, soit plus de deux fois plus<\/strong>, avec l’inconv\u00e9nient d’obtenir une image pix\u00e9lis\u00e9e si elle est zoom\u00e9e.<\/p>\n Il est possible de cr\u00e9er des images vectorielles<\/strong> avec des outils tels que Inkscape<\/strong> (sous licence GNU GPL), Adobe Illustrator<\/strong> (propri\u00e9taire) ou d’utiliser des convertisseurs en ligne<\/strong>.<\/p>\n Le format PNG<\/strong> (Portable Network Graphics) est un format d’image ouvert contrairement au GIF (Graphics Interchange Format) qui est propri\u00e9taire. Il utilise une compression sans perte et est bien adapt\u00e9 aux images ayant de grands aplats de couleurs unies<\/strong> (permettant une compression efficace). M\u00eame si la r\u00e8gle d’utiliser le format SVG pour les logos, sch\u00e9mas et ic\u00f4nes fonctionne plut\u00f4t bien, il se peut qu’une image PNG soit plus l\u00e9g\u00e8re si l’image est tr\u00e8s complexe et requiert la d\u00e9finition d’un tr\u00e8s grand nombre de chemins en SVG<\/strong>. Il ne faut donc pas h\u00e9siter \u00e0 comparer.<\/p>\n Les fonts ic\u00f4nes sont une police de caract\u00e8res o\u00f9 chaque caract\u00e8re repr\u00e9sente une ic\u00f4ne<\/strong> \u00e0 la place d’un caract\u00e8re. Cela a l’avantage de ne n\u00e9cessiter le t\u00e9l\u00e9chargement que d’un seul fichier, la font, pour l’ensemble des ic\u00f4nes du site. Les caract\u00e8res d’une police sont toujours d\u00e9finis vectoriellement afin de pouvoir parfaitement s’afficher quelle que soit la taille de la police<\/strong><\/p>\n<\/details>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”||19px|||”]<\/p>\n Il y a quelques d\u00e9cennies, le GIF anim\u00e9 \u00e9tait la grande tendance des sites internet : le site \u00e9tait actif et donnait une image dynamique\u2026 De nos jours, c’est beaucoup moins \u00e0 la mode et c’est une bonne chose ! D’une part, cela constitue un \u00e9l\u00e9ment de distraction qui est perturbant pour la plupart des personnes et qui peut rendre le reste du contenu inaccessible pour des personnes ayant des troubles de l’attention par exemple. D’autre part, un GIF anim\u00e9 est plus consommateur de ressources qu’une courte vid\u00e9o \u00e9quivalente, qu’un PNG anim\u00e9<\/strong> (Animated Portable Network Graphics) ou qu’un SVG anim\u00e9<\/strong>. Ce dernier est \u00e0 privil\u00e9gier car, en plus d’\u00eatre tr\u00e8s l\u00e9ger, il n’est pas toujours parfaitement lisse quelle que soit la taille d’affichage.<\/p>\n Dans un SVG anim\u00e9, les \u00e9l\u00e9ments graphiques qui doivent bouger ensemble doivent \u00eatre regroup\u00e9s \u00e0 l’aide d’une balise <\/strong><g><\/strong><\/span>.<\/strong> Au sein de celle-ci, une balise <animateTransform><\/span> est ajout\u00e9e. Celle-ci est param\u00e9tr\u00e9e avec diff\u00e9rents attributs<\/strong>. L’attribut type pour indiquer le type de mouvement<\/strong> :<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”#C3DB58″ custom_padding=”10px|10px|10px|10px|false|false” animation_style=”slide” animation_direction=”left” animation_intensity_slide=”6%” animation_starting_opacity=”11%” border_width_all=”1px”]<\/p>\n Type de mouvement : Valeur de l’attribut<\/strong> [\/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” custom_margin=”||19px|||”]<\/p>\n Les attributs begin<\/span> et dur<\/span> d\u00e9finissent respectivement le moment du commencement du mouvement et sa dur\u00e9e. Ces deux valeurs sont indiqu\u00e9es en secondes avec un s derri\u00e8re. Exemple : 2s<\/span> pour deux secondes.<\/p>\n Les attributs from<\/span> et to<\/span> permettent de d\u00e9finir la position initiale et la position finale pour la transformation.<\/p>\n Par exemple, en reprenant le logo de l’ENI, il est possible de l’animer en ajoutant une rotation.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_4,1_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_column type=”3_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”#EEEEEE” custom_padding=”10px|10px|10px|10px|false|false” animation_style=”slide” animation_direction=”left” animation_intensity_slide=”6%” animation_starting_opacity=”11%” border_width_all=”1px”]<\/p>\n <svg xmlns<\/span>=”http:\/\/www.w3.org\/2000\/svg” viewBox<\/span>=”0 0 184.25 184.25″> [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_image src=”https:\/\/www.editions-eni.fr\/blog\/wp-content\/uploads\/2021\/06\/eni-rotation.svg” alt=”logo eni animation svg” title_text=”eni-rotation” _builder_version=”4.9.7″ _module_preset=”default”][\/et_pb_image][\/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” custom_margin=”||19px|||”]<\/p>\n Les appareils photos ont des capteurs de plus en plus performants<\/strong> et produisent donc des photographies avec une meilleure r\u00e9solution<\/strong>. Le probl\u00e8me est que ces fichiers images<\/strong> sont \u00e9galement de plus en plus volumineux<\/strong>. Il est donc important de faire un choix quant au format utilis\u00e9, au taux de compression, \u00e0 la taille et \u00e0 la r\u00e9solution<\/strong> pour ces photographies.<\/p>\n Le format JPEG<\/strong> (Joint Photographic Experts Group) utilise une compression avec perte ou sans perte<\/strong>. Il est donc n\u00e9cessaire de choisir le bon compromis entre une image parfaite et un poids d’image faible. N\u00e9anmoins la perte de qualit\u00e9 de l’image due \u00e0 sa compression permet d’obtenir pour une photo des fichiers moins volumineux qu’avec du PNG. L’avantage de ce<\/strong> format<\/strong> est qu’il est support\u00e9 parfaitement par tous les navigateurs<\/strong>.<\/p>\n Ces derni\u00e8res ann\u00e9es, de nouveaux formats d’images ont fait leur apparition. Ils ont pour objectif de proposer des alternatives au format JPEG en corrigeant ses d\u00e9fauts (artefacts visibles avec une forte compression et non support de la transparence).<\/p>\n Le format WebP est un format propos\u00e9 par Google<\/strong> permettant une meilleure compression<\/strong> que le JPEG \u00e0 qualit\u00e9 \u00e9quivalente. Le gain est d’environ 30%<\/strong>. Le probl\u00e8me<\/strong> est que ce format n’est support\u00e9 que r\u00e9cemment par la plupart des navigateurs<\/strong>.<\/p>\n Le format AVIF est un format \u00e0 usage gratuit<\/strong> propos\u00e9 par une alliance de grosses entreprises (Microsoft, Google, Vimeo, Amazon, Netflix\u2026). Il est encore plus performant<\/strong> que le WebP (gain de l’ordre de 20%) mais n’est \u00e0 l’heure actuelle support\u00e9 que part les navigateurs<\/strong> Chrome, Op\u00e9ra et Firefox.<\/strong><\/p>\n Avec les derni\u00e8res versions de GIMP, il est possible d’exporter une image dans le format WebP ou AVIF. Il est \u00e9galement possible d’utiliser un convertisseur en ligne ou install\u00e9 sur votre machine.<\/p>\n Exemple :<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin_tablet=”” custom_margin_phone=”||||true|false” custom_margin_last_edited=”on|phone” custom_padding=”0px||0px||true|false” custom_css_main_element=”display:flex;”][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”#C3DB58″ custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n Format<\/strong><\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”#C3DB58″ custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n Poids<\/strong><\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”#C3DB58″ custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n Gain par rapport au JPEG<\/strong><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ custom_padding_last_edited=”on|phone” _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”0px||0px||false|false” custom_margin_last_edited=”off|phone” custom_padding=”||||false|false” custom_padding_tablet=”” custom_padding_phone=”0px||0px||false|false” custom_css_main_element=”display:flex;” custom_padding__hover_enabled=”on|desktop” custom_margin__hover_enabled=”off|desktop”][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n JPEG<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n 872 Ko<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n 0 %<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ custom_padding_last_edited=”on|phone” _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_padding_tablet=”” custom_padding_phone=”0px||0px||true|false” custom_css_main_element=”display:flex;”][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n Webp<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n 479 Ko<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n 45 %<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ custom_padding_last_edited=”on|phone” _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_padding_tablet=”” custom_padding_phone=”0px||0px||true|false” custom_css_main_element=”display:flex;”][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n AVIF<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n 218 Ko<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.7″ _module_preset=”default”][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”RGBA(0,0,0,0)” custom_margin=”||||true|false” custom_padding=”9px||9px||true|false” border_width_all=”1px”]<\/p>\n 75 %<\/span><\/p>\n [\/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” custom_margin=”||19px|||”]<\/p>\n Il est possible de proposer plusieurs formats d’image afin de limiter l’utilisation du r\u00e9seau et que n’importe quel navigateur puisse afficher l’image.<\/strong> Pour cela, la balise <picture><\/span> permet de lister les fichiers \u00e0 utiliser par ordre de pr\u00e9f\u00e9rence. Si le navigateur ne supporte pas le format, alors il passe au suivant. \u00c0 la fin, une balise <img><\/span> permet d’afficher une image si aucun des formats pr\u00e9c\u00e9dents n’est support\u00e9. C’est sur cette balise <img><\/span> que doit \u00eatre positionn\u00e9e l’alternative textuelle \u00e0 l’image et le type de chargement qui sont utilis\u00e9s quel que soit le format d’image utilis\u00e9 par le navigateur.<\/p>\n Syntaxe :<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”||19px|||” custom_padding=”||0px|||”]<\/p>\n <picture><\/em> Exemple :\u00a0<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”#EEEEEE” custom_padding=”10px|10px|10px|10px|false|false” animation_style=”slide” animation_direction=”left” animation_intensity_slide=”6%” animation_starting_opacity=”11%” border_width_all=”1px”]<\/p>\n <picture> [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”||19px|||”]<\/p>\n Seule l’image support\u00e9e par le navigateur est t\u00e9l\u00e9charg\u00e9e. Dans cet exemple, Chrome t\u00e9l\u00e9charge l’image au format AVIF. Une ancienne version de Firefox t\u00e9l\u00e9charge l’image au format WebP et Internet Explorer t\u00e9l\u00e9charge l’image au format JPEG. Il est possible de v\u00e9rifier cela en consultant l’onglet r\u00e9seau des outils du d\u00e9veloppeur de chaque navigateur.<\/p>\n Le fait de stocker plusieurs images sur le serveur \u00e0 la place d’une seule est \u00e9cologiquement tr\u00e8s vite rentabilis\u00e9 car il faut deux fois plus d’\u00e9nergie pour transporter une donn\u00e9e que pour la stocker<\/strong> pendant un an (source GreenIT.fr<\/a>).<\/p>\n Pour utiliser diff\u00e9rents formats pour une image de fond, cela est plus compliqu\u00e9<\/strong>. Avec les CSS 4 (encore \u00e0 l’\u00e9tat de brouillon), il devrait \u00eatre possible d’utiliser \u00e9galement un ensemble d’images pour que le navigateur utilise celle qu’il est capable d’afficher. Firefox est le premier et le seul navigateur \u00e0 le proposer pour le moment.<\/strong><\/p>\n Exemple :<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” background_color=”#EEEEEE” custom_padding=”10px|10px|10px|10px|false|false” animation_style=”slide” animation_direction=”left” animation_intensity_slide=”6%” animation_starting_opacity=”11%” border_width_all=”1px”]<\/p>\n .fondImage\u00a0{ [\/et_pb_text][et_pb_text _builder_version=”4.9.7″ _module_preset=”default” custom_margin=”||19px|||”]<\/p>\n La premi\u00e8re r\u00e8gle background-image<\/span> est d\u00e9finie pour les navigateurs ne supportant pas encore image-set<\/span> et la seconde r\u00e8gle background-image<\/span> \u00e9crase celle-ci si le navigateur le supporte.<\/p>\n1. Le green IT<\/h2>\n
Tous ces \u00e9quipements ont une empreinte \u00e9cologique due \u00e0 leur utilisation, mais \u00e9galement au niveau de leur production (la production repr\u00e9sente les 3\/4 des impacts environnementaux globaux).
Les impacts \u00e9cologiques sont de plusieurs ordres : la consommation d’\u00e9lectricit\u00e9, l’utilisation de minerais rares, la pollution de grande quantit\u00e9 d’eau mais \u00e9galement du sol et de l’air, la production de nombreux d\u00e9chets<\/strong>\u2026 Cela a entre autres pour cons\u00e9quence une production de 4% des gaz \u00e0 effets de serre<\/strong> et cela cro\u00eet d’environ 6 \u00e0 9% par an ! Ces chiffres proviennent de l’Ademe<\/a> et du Shift Project<\/a>.<\/p>\n1.1 Le green for IT<\/h3>\n
\n
1.2 L’IT for Green<\/h3>\n
2. La conception du service num\u00e9rique<\/h2>\n
lire la suite<\/summary>\n
2.1. Les fonctionnalit\u00e9s utiles<\/h3>\n
lire la suite<\/summary>\n
\nCette bonne pratique est difficile \u00e0 mettre en \u0153uvre, car il faut convaincre ses clients, sa hi\u00e9rarchie et ses coll\u00e8gues et faire preuve de beaucoup de p\u00e9dagogie ! Pourtant, sur le papier, c’est la plus simple \u00e0 r\u00e9aliser puisque, justement, il y a moins de chose \u00e0 cr\u00e9er. N\u00e9anmoins, c’est sans l’ombre d’un doute celle qui aura le plus gros impact sur l’empreinte num\u00e9rique de votre site internet<\/strong> ! Comme quoi la paresse est une bien belle qualit\u00e9 !
\nPour chaque page internet ou fonctionnalit\u00e9, il est important de se poser la question de sa r\u00e9elle utilit\u00e9 et, une fois en place, de consulter les statistiques d’utilisation pour v\u00e9rifier de sa pertinence.
\nIl est pr\u00e9f\u00e9rable d’adopter une approche “mobile first”<\/strong>, c’est-\u00e0-dire en concevant le site en premier lieu pour les smartphones, avant d’envisager les plus grands \u00e9crans. La faible taille de l’\u00e9cran nous incite \u00e0 nous concentrer sur l’essentiel<\/strong>.[\/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” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false”]<\/p>\n2.2. Le design<\/h3>\n
lire la suite<\/summary>\n
\nIl est possible par exemple de donner une ombre \u00e0 une zone en utilisant la propri\u00e9t\u00e9 CSS box-shadow. Les bordures peuvent \u00eatre agr\u00e9ment\u00e9es de bords arrondis avec la propri\u00e9t\u00e9 border-radius. Une image de fond peut avantageusement \u00eatre remplac\u00e9e par un fond en d\u00e9grad\u00e9 de couleur. Les diff\u00e9rentes valeurs de la propri\u00e9t\u00e9 background permettent de cr\u00e9er des effets tr\u00e8s vari\u00e9s : linear-gradient(\u2026), radial-gradient(\u2026) et conic-gradient(\u2026).
\nD’autres effets sont pr\u00e9vus lorsque les CSS4 seront impl\u00e9ment\u00e9s par les navigateurs\u2026<\/p>\n<\/details>\n3. Les images<\/h2>\n
3.1. Le nombre d’images<\/h3>\n
3.2. Les formats d’images<\/h3>\n
Les logos, les ic\u00f4nes et les sch\u00e9mas<\/strong><\/h4>\n
le logo ENI ci-contre et son code SVG ci-dessous<\/p>\n
<defs>
<style>.ap{fill:#144a7f;}.pp{fill:#fff;}<\/style>
<\/defs>
<rect class<\/span>=”ap” width<\/span>=”184.25″ height<\/span>=”184.25″\/>
<rect class<\/span>=”pp” x<\/span>=”36.26″ y<\/span>=”154.91″ width<\/span>=”112.14″ height<\/span>=”3.68″\/>
<path class<\/span>=”pp” d<\/span>=”M96.53,124.4s1.89.33-.09,1.17a88.91,88.91,0,0,1-30.12,5.26c-16.45,0-35.81-7.1-39.34-27.31-3.31-19,13.14-47.47,52.14-63.24,0,0,30.75-12.43,56.26-3.78,0,0,23.26,7.08,20.7,31.78,0,0-.92,21.9-26.85,35.7,0,0-10.95,6.33-10.49-.75l2.58-21.34s1.56-4.86-3.5-2.39c0,0-2.3,1.3-1.84-.54,0,0,0-.28,1.2-.74l9-2.58s2.57-1,2,2.85l-2.49,20.42s-1.11,4.75,2.21,3.31h0c10.57-3.31,18.39-16.09,18.39-16.09,11.4-19.87,2.95-32.74,2.95-32.74-10.49-17.49-36.06-16.75-36.06-16.75-37.34,0-59.59,22.27-59.59,22.27C24.38,84.48,33.57,106,33.57,106c12.69,32.92,62.49,18.45,62.49,18.45Z”\/>
<path class<\/span>=”pp” d<\/span>=”M49,92.48c-.06-4.38,3.11-14.16,8.45-14.16,2.1,0,2.5,1.69,2.5,3.37a15.18,15.18,0,0,1-.4,3.51Zm15.46,6.87c-2.49,2.16-5.93,5-9.37,5-5.21,0-6.15-5.39-6.09-9.5,6.76-4.65,13.1-8.56,18.76-13.34a12,12,0,0,0,.2-1.57c0-.19-.07-.39-.33-.39-.55,0,0,.33-2.43,1.81V80.14c0-3.29-2.22-4-5.18-4C49.25,76.11,41.62,86,41.62,96.2c0,6.39,2.7,11.18,9.72,11.18a19.13,19.13,0,0,0,14-6.6Z”\/>
<path class<\/span>=”pp” d<\/span>=”M74.86,79.29A32.87,32.87,0,0,1,86.4,75.87c.74,0,1,.13,1,1.33,0,2.56-.68,5.78-1.15,11.46l.14.12c2.29-5.39,6.88-12.91,12.87-12.91,3.42,0,4.43,3.42,4.43,6.24s-2,17.4-1.94,18.73c0,.47,0,2.08.8,2.08s3.65-1.48,4.59-2l.54,1.55c-2.63,2.21-9,4.16-11.4,4.16-1.41,0-1.41-2.69-1.41-3.49,0-4.43,2.35-15.09,2.38-20.26,0-1.15-.34-2.37-1.83-2.37-2.69,0-5.05,3.93-6.07,5.84-3.37,6.13-4,9.7-5.39,19.46H77.43c1.07-8,3.1-21,3.1-24.15,0-1.22,0-2.3-1-2.3s-3.1,1-4.18,1.49Z”\/>
<path class<\/span>=”pp” d<\/span>=”M122.05,68.21a5,5,0,0,1,4.64-4.72,2.76,2.76,0,0,1,2.76,2.91c0,2.28-2,4.72-4.37,4.72A2.84,2.84,0,0,1,122.05,68.21Z”\/>
<\/svg><\/p>\nlire la suite<\/summary>\n
Les images anim\u00e9es<\/strong><\/h4>\n
Translation : translate<\/strong>
Rotation : rotate<\/strong>
Mise \u00e0 l’\u00e9chelle : scale<\/strong>
D\u00e9formement horizontal : skewX<\/strong>
D\u00e9formement vertical : skewY<\/strong><\/p>\n
<defs>
<style>.ap{fill:#144a7f;}.pp{fill:#fff;}<\/style>
<\/defs>
<rect class<\/span>=”ap” width<\/span>=”184.25″ height<\/span>=”184.25″\/>
<rect class<\/span>=”pp” x<\/span>=”36.26″ y<\/span>=”154.91″ width<\/span>=”112.14″ height<\/span>=”3.68″\/>
<g>
<path class<\/span>=”pp” d<\/span>=”…”\/>
<path class<\/span>=”pp” d<\/span>=”…”\/>
<path class<\/span>=”pp” d<\/span>=”…”\/>
<path class<\/span>=”pp” d<\/span>=”…”\/>
<animateTransform attributeName=”transform” attributeType=”XML” type=”rotate” from=”360 92 80″ to=”0 92 80″ dur=”2s” repeatCount=”1″\/>
<\/g>
<\/svg><\/p>\nLes photographies<\/strong><\/h4>\n
<source srcset=”image 1″ type=”type MIME de l’image 1″><\/em>
<source srcset=”image 2″ type=”type MIME de l’image 2″><\/em>
\u2026<\/em>
<img\u00a0src=”image n”\u00a0alt=”…” loading=”eager|lazy”><\/em>
<\/picture><\/em><\/p>\n
\u00a0 \u00a0 <source srcset<\/span>=”images\/fleurs.avif” type=”image\/avif”>
\u00a0 \u00a0 <source srcset<\/span>=”images\/fleurs.webp” type=”image\/webp”>
\u00a0 \u00a0 <img src<\/span>=”images\/fleurs.jpg”\u00a0alt=”…”>
<\/picture><\/p>\n
\u00a0 background-image: url(‘images\/fleurs.jpg’);
\u00a0 background-image: image-set(
\u00a0\u00a0\u00a0\u00a0url(‘images\/fleurs.webp’)\u00a0type(“image\/webp”),
\u00a0\u00a0\u00a0\u00a0url(‘images\/fleurs.jpg’)\u00a0type(“image\/jpeg”)
\u00a0\u00a0);
\u00a0 \u2026
}<\/p>\n