{"id":45,"date":"2026-05-14T18:39:32","date_gmt":"2026-05-14T22:39:32","guid":{"rendered":"http:\/\/localhost\/testwiki\/2026\/05\/14\/3-4-images\/"},"modified":"2026-06-11T03:55:09","modified_gmt":"2026-06-11T07:55:09","slug":"3-4-images","status":"publish","type":"knowledgebase","link":"https:\/\/aparadis.dectim.ca\/testwiki\/wiki-normes-standards\/normes-par-domaine\/3-4-images\/","title":{"rendered":"3.4. Images"},"content":{"rendered":"\n<h3 class=\"wp-block-heading is-style-default\"><strong>3.4.1. Formats et nomenclature<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udd24 <strong>Formats<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Formats attendus : <code>.<\/code>webp, .jpg, .svg, .png<\/li>\n\n\n\n<li>Images : Libre de droits\n<ul class=\"wp-block-list\">\n<li>Document\u00e9e dans le projet avec lien vers la source<\/li>\n\n\n\n<li><a href=\"https:\/\/aparadis.dectim.ca\/testwiki\/wiki-normes-standards\/normes-transversales\/2-2-credits-de-creation-et-ressources-2\/\">Selon les normes de cr\u00e9dits<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Nommage de fichiers et dossiers de design<\/strong>&nbsp;: <a href=\"https:\/\/aparadis.dectim.ca\/testwiki\/wiki-normes-standards\/normes-transversales\/2-1-conventions-de-nommage\/\">Convention de nommage g\u00e9n\u00e9rale<\/a> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Contenu \u00e0 venir&#8230;<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3.4.2. Image num\u00e9rique (\u00e9cran)<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>R\u00e9solution : 72 dpi<\/li>\n\n\n\n<li>Mode colorim\u00e9trique : RGB<\/li>\n\n\n\n<li>Outil de cr\u00e9ation : Adobe Photoshop \/ Figma<\/li>\n\n\n\n<li>Poids : Trouver le bon ratio qualit\u00e9\/poids selon le besoin.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3.4.3. Image pour le web<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>R\u00e9solution : Adapt\u00e9e \u00e0 l&rsquo;affichage (dimensions en pixels, DPI non pertinent).<\/li>\n\n\n\n<li>Format : Images fournies en versions adapt\u00e9es (1x \/ 2x si pertinent).<\/li>\n\n\n\n<li>Poids : Priorit\u00e9 \u00e0 la performance \/ poids optimis\u00e9.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Images pleine largeur<\/strong> (hero, arri\u00e8re-plan) :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Id\u00e9al : 150 \u00e0 250 KB<\/li>\n\n\n\n<li>Maximum raisonnable : ~300\u2013400 KB<\/li>\n\n\n\n<li>\u00c0 \u00e9viter : &gt; 500 KB<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Images \u00ab standards \u00bb<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans une page (cartes, contenu, 50 % de largeur) :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Id\u00e9al : 80 \u00e0 150 KB<\/li>\n\n\n\n<li>Acceptable : jusqu&rsquo;\u00e0 ~200 KB<\/li>\n\n\n\n<li>\u00c0 \u00e9viter : &gt; 250 KB<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Petites images<\/strong> (UI, ic\u00f4nes) :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Id\u00e9al : &lt; 30\u201350 KB<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3.4.4. Impression (affiches, supports physiques)<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>DPI requis : 300 dpi (standard) \/ 150 dpi (acceptable pour tr\u00e8s grands formats vus de loin).<\/li>\n\n\n\n<li>Dimensions physiques : cm \/ pouces.<\/li>\n\n\n\n<li>Mode colorim\u00e9trique : RGB ou CMJN (selon les exigences du flux d&rsquo;impression).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.4.5. Compression d&rsquo;images selon le type de contenu<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les valeurs ci-dessus sont des rep\u00e8res recommand\u00e9s.<br>Tout d\u00e9passement doit \u00eatre justifi\u00e9 par le contexte d\u2019usage.<\/p>\n\n\n\n<figure class=\"wp-block-table has-small-font-size\"><table class=\"has-border-color has-fixed-layout\" style=\"border-color:#b5d4f4;border-width:0.5px\"><thead><tr><th><strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#0c447c\" class=\"has-inline-color\">Type de contenu<\/mark><\/strong><\/th><th><mark style=\"background-color:rgba(0, 0, 0, 0);color:#0c447c\" class=\"has-inline-color\"><strong>Format<\/strong><\/mark><\/th><th><mark style=\"background-color:rgba(0, 0, 0, 0);color:#0c447c\" class=\"has-inline-color\"><strong>Raisons<\/strong><\/mark><\/th><\/tr><\/thead><tbody><tr><td>Images d\u00e9coratives \/ UI<\/td><td>WebP<\/td><td>L\u00e9ger, moderne, bonne qualit\u00e9.<\/td><\/tr><tr><td>Photos<\/td><td>WebP ou JPEG<\/td><td>JPEG reste OK pour compatibilit\u00e9, WebP id\u00e9al.<\/td><\/tr><tr><td>Logos<\/td><td>SVG<\/td><td>Vectoriel, l\u00e9ger, scalable sans perte.<\/td><\/tr><tr><td>Ic\u00f4nes<\/td><td>SVG<\/td><td>Manipulable en CSS, parfait pour interface.<\/td><\/tr><tr><td>Images n\u00e9cessitant de la transparence<\/td><td>PNG, WebP<\/td><td>Si WebP transparent n&rsquo;est pas utilis\u00e9.<\/td><\/tr><tr><td>Animations l\u00e9g\u00e8res<\/td><td>WebP anim\u00e9<\/td><td>Beaucoup plus performant que GIF.<\/td><\/tr><tr><td>GIF<\/td><td>\u274c \u00c0 \u00e9viter<\/td><td>Tr\u00e8s lourd.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>3.4.1. Formats et nomenclature \ud83d\udd24 Formats Nommage de fichiers et dossiers de design&nbsp;: Convention de nommage g\u00e9n\u00e9rale Contenu \u00e0 venir&#8230; 3.4.2. Image num\u00e9rique (\u00e9cran) 3.4.3. Image pour le web Images pleine largeur (hero, arri\u00e8re-plan) : Images \u00ab standards \u00bb Dans une page (cartes, contenu, 50 % de largeur) : Petites images (UI, ic\u00f4nes) : 3.4.4. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","knowledgebase_cat":[14],"class_list":["post-45","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-normes-par-domaine"],"_links":{"self":[{"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/knowledgebase\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":40,"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/knowledgebase\/45\/revisions"}],"predecessor-version":[{"id":670,"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/knowledgebase\/45\/revisions\/670"}],"wp:attachment":[{"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/aparadis.dectim.ca\/testwiki\/wp-json\/wp\/v2\/knowledgebase_cat?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}