Le guide du good graphiste : les images

Dans cette partie, on aborde le gros sujet des images. Un sujet critique, pourtant très mal maîtrisé à la fois par les graphistes et les clients !

Bitmap VS Vector

C'est quoi une image ?

Comme vous n’êtes pas totalement attardés, on ne vas pas vous donner la définition de base, mais la définition informatique.

Une image, du point de vue informatique, qu’elle soit imprimée ou non, est une matrice de pixels ou de points d’encre, chacun d’entre-eux ayant un code donnant une information de couleur:

une intensité lumineuse dans le modèle RVB (Rouge, Vert, Bleu) pour les écrans
un mélange de couleurs dans le modèle CMJN (Cyan, Magenta, Jaune, Noir) pour l’impression
une encre unique dans le modèle des encres direct, comme par exemple le modèle Pantone.

L’ensemble de ces points, ordonné dans des plans de dimensions variables, contribue à former une image plus ou moins détaillée, c’est à dire plus ou moins définie. Ainsi, plus vous zoomez dans cette image, plus vous percevez ces points, qu’il s’agisse de pixels, ou de points d’encre, et plus vous redimensionner l’image plus vous perdez en définition, c’est à dire en niveau de précision.

Image numérique

Image imprimée

Les fichiers image de type bitmap

Les fichiers image de type bitmap (parfois dites raster) sont des images constituées d’une grille de pixels, où chaque pixel possède une couleur spécifique. Ces images, une fois exportés, sont dites “rigides” : les couleurs, la dimension, la résolution, etc. une fois choisies sont fixes et définitives. Cependant, on pourra rétrécir l’image en obtenant des résultats correctes. L’inverse est faux.

Les formats les plus utilisés et connus sont JPEG/JPG, PNG, WEBP, GIF, HEIF, BMP, TIFF

Non scalabilité des images bitmap

Ci-dessous, au centre, le logo en .webp non compressé en 96px x 96px, et l’impact d’un rétrécissement (downscale) x2 et d’un agrandissement (upscale) x2.

Les fichiers image de type vector

Les fichiers image de type vectoriel sont des images constituées d’informations, de coordonnées et de formes géométriques définies par des formules mathématiques, comme des lignes, des courbes et des polygones. Ces images sont dites “flexibles” et “scalables” car elles peuvent être redimensionnées sans perte de qualité : les éléments graphiques sont recalculés selon les dimensions choisies.

Contrairement aux bitmaps, les images vectorielles permettent de modifier facilement les couleurs, la taille, et les formes à tout moment. Une image .svg peut même être récupérée sous forme de code (usage web) pour faciliter sa manipulation via du CSS.

Les formats les plus utilisés et connus sont SVG, PDF, EPS.

Ci-dessous, le logo en .svg en 96px x 96px, et l’impact d’un agrandissement x2.

Scalabilité des images vectorielles

Ci-dessous, le logo en .svg en 96px x 96px, et l’impact d’un agrandissement x2.

Flexibilité des images vectorielles pour le web

On peut manipuler le code .svg. C’est ainsi que nous avons pu créer des animations complexes sur le logotype du site web, avec un niveau avancé de CSS.

Il n’y aura pas dans ce dossier un cours CSS, mais voici les bases. Ci-dessous, le logo en .svg sous forme de code obtenu grâce à svg-2-code.

				
					<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="96" height="96" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 1439.98 1439.98">
        <defs>
            <style>.fil1{fill:#fdf9f1;fill-rule:nonzero}</style>
        </defs>
        <g id="Plan_x0020_1"><path style="fill:#163543" d="M0 0h1439.98v1439.98H0z"/>
        <g id="_2191124067440">
            <path class="fil1" d="M1147.5 899.98H292.52c-12.44 0-22.51-10.06-22.51-22.5 0-5.05 1.67-9.72 4.48-13.48l105.9-167.22.04-.06 320.59-506.24c3.19-5.08 8.1-8.43 13.5-9.79l.5-.13h.01l.52-.11h.02l.51-.1h.02l.52-.08h.01l.52-.08h.01l.53-.07h.01l.53-.05h.01l.52-.04h.02l.53-.02h.01l.53-.02h.01l.53.02h.01l.52.01h.02l.52.03h.02l.52.04h.02l.52.05h.02l.52.07h.02l.52.08h.02l.52.1h.02l.52.1h.02l.51.13h.03l.51.13c2.13.58 4.22 1.47 6.2 2.7 3.02 1.9 5.44 4.41 7.18 7.27l106.72 168.51.34.56 319.54 504.55v.02h.01l.13.17v.01l.11.17.01.01.11.17.01.02.11.15.02.04.1.14.02.04.09.14.03.05.08.13.04.05.08.14.03.05.08.14.04.05.08.13.03.06.08.13.04.07.07.12.04.07.06.11.04.09.11.19.05.1.05.1.05.09.05.1.05.09.05.11.05.08.05.13.04.07.05.12.04.08.05.12.04.07.07.14.02.06.06.15.03.05.05.15.02.05.07.16.02.04.06.17.02.04.07.17.01.03.05.18.02.02.08.18v.02l.07.19v.02l.08.2.06.21.07.21v.01l.07.19v.02l.06.19.01.02.05.2v.02l.06.19.01.03.05.17.01.05.05.17.01.05.05.16.01.06.03.15.02.07.03.15.02.08.04.13.01.09.03.14.02.08.02.14.02.09.02.12.01.1.02.12.03.11.02.11.01.12.02.1.01.13.02.1.02.12.01.09.02.14.01.09.02.14.01.08.01.15.01.08.02.15.01.06.01.17.02.07.01.17v.04l.01.2v.04l.02.19v.26l.02.21V877.04l.01.01V877.52l-.01.58-.02.58-.04.57-.05.58-.07.56-.08.55v.01l-.09.56-.1.55-.12.54v.01l-.14.53v.01l-.14.53v.01l-.16.52v.01l-.17.52v.01l-.18.51v.01l-.21.51-.2.5v.02l-.21.49h-.01l-.23.49v.01l-.24.48-.01.02-.25.47-.26.47-.01.01-.27.45-.01.02-.28.45v.01l-.29.44-.02.01-.29.44-.01.01-.32.43v.01l-.33.42-.01.01-.33.41-.01.01-.33.4-.02.02-.35.39-.01.01-.35.39-.01.01-.37.37-.01.01-.37.37-.01.01-.39.35-.01.02-.4.34-.01.01-.39.34-.03.01-.4.34-.01.01-.42.31-.02.02-.42.3-.01.01-.43.3-.02.02-.43.28-.02.01-.44.27-.02.02-.45.26-.02.01-.45.26-.02.01-.46.24-.02.01-.46.24-.02.02-.48.22-.02.01-.47.21-.03.01-.49.2h-.02l-.48.2-.52.17-.04.02-.49.17h-.02l-.51.15h-.03l-.51.15h-.02l-.52.12-.03.02-.51.11-.55.11h-.03l-.53.09h-.04l-.51.08h-.05l-.53.06h-.03l-.53.05h-.03l-.54.04-.04.01-.54.01-.04.01h-.54l-.04-.09zM826.86 413.13l-87.87 138.75c-6.6 10.48-20.46 13.63-30.93 7.04a22.402 22.402 0 0 1-7.19-7.28L613.13 413.1 532.8 539.97l187.19 295.58 187.2-295.59-80.33-126.83zM720 244.37l-80.3 126.82L720 498.01l80.31-126.82L720 244.37zM425.92 708.75l92.62 146.24h160.65L506.25 581.91l-80.33 126.84zm39.51 146.24-66.06-104.32-66.05 104.32h132.11zm575.17-104.32-66.07 104.32h132.13l-66.06-104.32zM921.44 854.99l92.61-146.24-80.32-126.84-172.94 273.08h160.65zM802.53 1079.99c13.09 0 24.89 2.32 35.4 6.96 10.5 4.64 19.57 11.11 27.17 19.39 7.6 8.29 13.42 17.91 17.46 28.84l-42.69 13.92c-2.26-5.47-5.17-10.23-8.72-14.29-3.56-4.06-7.72-7.17-12.5-9.32-4.77-2.16-10.14-3.23-16.12-3.23-7.92 0-14.95 2.03-21.1 6.09-6.15 4.06-10.95 9.65-14.42 16.78-3.49 7.13-5.23 15.42-5.23 24.86 0 9.29 1.78 17.53 5.34 24.73 3.56 7.21 8.44 12.84 14.66 16.91 6.24 4.06 13.39 6.1 21.47 6.1 6.31 0 11.76-1.13 16.38-3.37 4.6-2.24 8.56-5.38 11.88-9.44 3.32-4.06 6.18-8.83 8.6-14.3l42.7 13.92c-3.89 10.95-9.62 20.6-17.23 28.97-7.59 8.37-16.74 14.87-27.4 19.52-10.68 4.63-22.56 6.96-35.65 6.96-16.97 0-31.97-3.86-44.99-11.56-13.01-7.71-23.24-18.32-30.67-31.83-7.44-13.51-11.16-29.05-11.16-46.61 0-17.57 3.72-33.11 11.16-46.61 7.43-13.52 17.66-24.11 30.67-31.83 13.02-7.7 28.02-11.55 44.99-11.55v-.01zm-297.81 114.86c3.72-7.13 5.57-15.33 5.57-24.6 0-9.29-1.9-17.54-5.69-24.75-3.8-7.2-9.05-12.84-15.76-16.9-6.72-4.06-14.44-6.08-23.16-6.08-8.58 0-16.22 2.02-22.92 6.08-6.72 4.06-11.97 9.7-15.77 16.9-3.79 7.21-5.69 15.45-5.69 24.75 0 9.27 1.93 17.47 5.81 24.6 3.89 7.13 9.17 12.71 15.89 16.79 6.71 4.06 14.44 6.08 23.16 6.08 8.73 0 16.41-2.02 23.05-6.08 6.61-4.08 11.79-9.65 15.51-16.79zm460.27-5.58h35.59l-17.79-49.87-17.8 49.87zm-335-109.28v136.04h68.49v43.96H585.05V1080h44.94v-.01zm471.75 0h47.88l64.77 97.82-.2-97.82h45.78v179.99h-45.42v-.25l-67.3-101.56.27 101.81-45.42-.25-.37-179.74h.01zm-94 0 67.23 180h-49.16l-10.28-28.8h-65.49l-10.27 28.8H890.6l67.22-180h49.92zm-451.37 90.26c0 17.39-3.83 32.85-11.52 46.35-7.68 13.51-18.31 24.12-31.89 31.83-13.58 7.7-29.18 11.56-46.8 11.56-17.78 0-33.51-3.86-47.17-11.56-13.65-7.71-24.36-18.32-32.12-31.83-7.77-13.5-11.65-28.96-11.65-46.35 0-17.57 3.89-33.11 11.65-46.62 7.76-13.51 18.42-24.12 32-31.82 13.58-7.7 29.18-11.56 46.81-11.56 17.77 0 33.47 3.86 47.05 11.56 13.57 7.7 24.24 18.31 32 31.82 7.77 13.51 11.64 29.05 11.64 46.62zm-191.75-90.26-66.98 180h-50.16l-67.47-180h50.17l42.31 122.42 41.97-122.42h50.17-.01z"/>
        </g>
        </g>
    </svg>

En ajoutant ou modifiant des classes CSS (ex: .fil2 et .fil3) dans le code, on va pouvoir créer de nouvelles règles dans <style>.

Ici, nous avons ajouté une règle pour changer la couleur de fond, et pour qu’au survol, le blanc cassé (#fdf9f1) passe au doré (#DBA56C).

				
					<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="96" height="96" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 1439.98 1439.98">
        <defs>
            <style>
                .fil_2{
                    fill:#B94847!important;
                }
                .fil_3{
                    fill:#fdf9f1; 
                    transition: 0.25s; 
                    fill-rule:nonzero
                }
                svg:hover .fil_3{
                    fill:#DBA56C;
                }
                
            </style>
        </defs>
        <g id="Plan_x0020_1">
            <path class="fil_2" style="fill:#163543" d="M0 0h1439.98v1439.98H0z"/>
        <g id="_2191124067440">
         <path class="fil_3" d="M1147.5 899.98H292.52c-12.44 0-22.51-10.06-22.51-22.5 0-5.05 1.67-9.72 4.48-13.48l105.9-167.22.04-.06 320.59-506.24c3.19-5.08 8.1-8.43 13.5-9.79l.5-.13h.01l.52-.11h.02l.51-.1h.02l.52-.08h.01l.52-.08h.01l.53-.07h.01l.53-.05h.01l.52-.04h.02l.53-.02h.01l.53-.02h.01l.53.02h.01l.52.01h.02l.52.03h.02l.52.04h.02l.52.05h.02l.52.07h.02l.52.08h.02l.52.1h.02l.52.1h.02l.51.13h.03l.51.13c2.13.58 4.22 1.47 6.2 2.7 3.02 1.9 5.44 4.41 7.18 7.27l106.72 168.51.34.56 319.54 504.55v.02h.01l.13.17v.01l.11.17.01.01.11.17.01.02.11.15.02.04.1.14.02.04.09.14.03.05.08.13.04.05.08.14.03.05.08.14.04.05.08.13.03.06.08.13.04.07.07.12.04.07.06.11.04.09.11.19.05.1.05.1.05.09.05.1.05.09.05.11.05.08.05.13.04.07.05.12.04.08.05.12.04.07.07.14.02.06.06.15.03.05.05.15.02.05.07.16.02.04.06.17.02.04.07.17.01.03.05.18.02.02.08.18v.02l.07.19v.02l.08.2.06.21.07.21v.01l.07.19v.02l.06.19.01.02.05.2v.02l.06.19.01.03.05.17.01.05.05.17.01.05.05.16.01.06.03.15.02.07.03.15.02.08.04.13.01.09.03.14.02.08.02.14.02.09.02.12.01.1.02.12.03.11.02.11.01.12.02.1.01.13.02.1.02.12.01.09.02.14.01.09.02.14.01.08.01.15.01.08.02.15.01.06.01.17.02.07.01.17v.04l.01.2v.04l.02.19v.26l.02.21V877.04l.01.01V877.52l-.01.58-.02.58-.04.57-.05.58-.07.56-.08.55v.01l-.09.56-.1.55-.12.54v.01l-.14.53v.01l-.14.53v.01l-.16.52v.01l-.17.52v.01l-.18.51v.01l-.21.51-.2.5v.02l-.21.49h-.01l-.23.49v.01l-.24.48-.01.02-.25.47-.26.47-.01.01-.27.45-.01.02-.28.45v.01l-.29.44-.02.01-.29.44-.01.01-.32.43v.01l-.33.42-.01.01-.33.41-.01.01-.33.4-.02.02-.35.39-.01.01-.35.39-.01.01-.37.37-.01.01-.37.37-.01.01-.39.35-.01.02-.4.34-.01.01-.39.34-.03.01-.4.34-.01.01-.42.31-.02.02-.42.3-.01.01-.43.3-.02.02-.43.28-.02.01-.44.27-.02.02-.45.26-.02.01-.45.26-.02.01-.46.24-.02.01-.46.24-.02.02-.48.22-.02.01-.47.21-.03.01-.49.2h-.02l-.48.2-.52.17-.04.02-.49.17h-.02l-.51.15h-.03l-.51.15h-.02l-.52.12-.03.02-.51.11-.55.11h-.03l-.53.09h-.04l-.51.08h-.05l-.53.06h-.03l-.53.05h-.03l-.54.04-.04.01-.54.01-.04.01h-.54l-.04-.09zM826.86 413.13l-87.87 138.75c-6.6 10.48-20.46 13.63-30.93 7.04a22.402 22.402 0 0 1-7.19-7.28L613.13 413.1 532.8 539.97l187.19 295.58 187.2-295.59-80.33-126.83zM720 244.37l-80.3 126.82L720 498.01l80.31-126.82L720 244.37zM425.92 708.75l92.62 146.24h160.65L506.25 581.91l-80.33 126.84zm39.51 146.24-66.06-104.32-66.05 104.32h132.11zm575.17-104.32-66.07 104.32h132.13l-66.06-104.32zM921.44 854.99l92.61-146.24-80.32-126.84-172.94 273.08h160.65zM802.53 1079.99c13.09 0 24.89 2.32 35.4 6.96 10.5 4.64 19.57 11.11 27.17 19.39 7.6 8.29 13.42 17.91 17.46 28.84l-42.69 13.92c-2.26-5.47-5.17-10.23-8.72-14.29-3.56-4.06-7.72-7.17-12.5-9.32-4.77-2.16-10.14-3.23-16.12-3.23-7.92 0-14.95 2.03-21.1 6.09-6.15 4.06-10.95 9.65-14.42 16.78-3.49 7.13-5.23 15.42-5.23 24.86 0 9.29 1.78 17.53 5.34 24.73 3.56 7.21 8.44 12.84 14.66 16.91 6.24 4.06 13.39 6.1 21.47 6.1 6.31 0 11.76-1.13 16.38-3.37 4.6-2.24 8.56-5.38 11.88-9.44 3.32-4.06 6.18-8.83 8.6-14.3l42.7 13.92c-3.89 10.95-9.62 20.6-17.23 28.97-7.59 8.37-16.74 14.87-27.4 19.52-10.68 4.63-22.56 6.96-35.65 6.96-16.97 0-31.97-3.86-44.99-11.56-13.01-7.71-23.24-18.32-30.67-31.83-7.44-13.51-11.16-29.05-11.16-46.61 0-17.57 3.72-33.11 11.16-46.61 7.43-13.52 17.66-24.11 30.67-31.83 13.02-7.7 28.02-11.55 44.99-11.55v-.01zm-297.81 114.86c3.72-7.13 5.57-15.33 5.57-24.6 0-9.29-1.9-17.54-5.69-24.75-3.8-7.2-9.05-12.84-15.76-16.9-6.72-4.06-14.44-6.08-23.16-6.08-8.58 0-16.22 2.02-22.92 6.08-6.72 4.06-11.97 9.7-15.77 16.9-3.79 7.21-5.69 15.45-5.69 24.75 0 9.27 1.93 17.47 5.81 24.6 3.89 7.13 9.17 12.71 15.89 16.79 6.71 4.06 14.44 6.08 23.16 6.08 8.73 0 16.41-2.02 23.05-6.08 6.61-4.08 11.79-9.65 15.51-16.79zm460.27-5.58h35.59l-17.79-49.87-17.8 49.87zm-335-109.28v136.04h68.49v43.96H585.05V1080h44.94v-.01zm471.75 0h47.88l64.77 97.82-.2-97.82h45.78v179.99h-45.42v-.25l-67.3-101.56.27 101.81-45.42-.25-.37-179.74h.01zm-94 0 67.23 180h-49.16l-10.28-28.8h-65.49l-10.27 28.8H890.6l67.22-180h49.92zm-451.37 90.26c0 17.39-3.83 32.85-11.52 46.35-7.68 13.51-18.31 24.12-31.89 31.83-13.58 7.7-29.18 11.56-46.8 11.56-17.78 0-33.51-3.86-47.17-11.56-13.65-7.71-24.36-18.32-32.12-31.83-7.77-13.5-11.65-28.96-11.65-46.35 0-17.57 3.89-33.11 11.65-46.62 7.76-13.51 18.42-24.12 32-31.82 13.58-7.7 29.18-11.56 46.81-11.56 17.77 0 33.47 3.86 47.05 11.56 13.57 7.7 24.24 18.31 32 31.82 7.77 13.51 11.64 29.05 11.64 46.62zm-191.75-90.26-66.98 180h-50.16l-67.47-180h50.17l42.31 122.42 41.97-122.42h50.17-.01z"/>
        </g>
        </g>
    </svg>

Dimension vs Définition vs Résolution

Dimension, une histoire de taille

La dimension fait référence aux mesures physiques de l’image, que ce soit en pouces, en centimètres ou en pixels. Par exemple, une image peut avoir une dimension de 10 cm x 15 cm ou 1920 x 1080 pixels. Cette dimension indique donc l’espace que l’image occupe sur un écran ou sur une feuille, sans forcément préciser la qualité ou le niveau de détail.

Définition, une histoire d’écran

La définition mesure la quantité de détails que l’image contient. Elle s’exprime en pixels (longueur x largeur) et détermine combien de points composent l’image. Par exemple, une image de 1920 x 1080 pixels, dite très haute définition ou FullHD (parce qu’elle occupait tout l’espace des écrans haute définition, selon un standard démocratisé vers 2007), a une définition de 2 073 600 pixels de pixels.

Plus la définition est élevée, plus l’image contient d’informations et peut offrir de détails fins.

Aujourd’hui, un standard inutile tente de s’imposer (ca fait créer et vendre de nouveaux écrans et de nouvelles télés), j’ai nommé l’ultra haute définition ou UltraHD / UHD, 4 fois supérieur à la Full HD (d’où son nom 4k), soit 8 294 400 pixels dans des écrans de 3840 x 2160 pixels.

Résolution, une histoire d’impression

On parle de résolution d’écran mais il serait bien plus juste de parler de définition d’écran, ! La résolution se réfère à la densité des pixels, c’est-à-dire le nombre de pixels par unité de mesure (souvent en « dpi » pour dots per inch, points par pouce, ou « ppi » pour pixels per inch). Elle n’affecte pas la définition de l’image elle-même, mais elle influence l’apparence de l’image lors de l’impression. Imaginez simplement une certaine quantité de micro goutte d’encre dans 1cm² ‘imprimé, ca vous donne la densité d’information imprimée pour représenter quelque chose.

Une image en 300 dpi (résolution standard d’impression) sera nette et détaillée, alors qu’une résolution de 72 dpi semblera floue.

Selon la taille finale souhaitée de l’image à imprimer, on aura besoin d’une grande résolution ou d’une moins grande résolution. La résolution est ajustée pour être optimale à la distance moyenne des spectateurs:

Une affiche A3 sera imprimée en 300 dpi, parce que les spectateurs vont être proches du visuel imprimé.
Une affiche de metro de plus de 4 mètres de large n’aura besoin que de 50 dpi. C’est pour cette raison que lorsque vous la regardez de près, vous voyez des gros points.

Et le début de la confusion

Prenons une image :

1920 x 1080 pixels en dimensions informatique
pour une définition finale de 2 073 600 pixels (on dispose de tous ces “points” pour représenter une image).

Affectons désormais sa résolution pour l’impression

Si on imprime cette image à 300 dpi, elle fera 16,3 x 9,1 cm, avec une perception finale très bonne.
Si on réduit la résolution à 72 dpi, l’image imprimée sera d’environ 67,7 x 38,1 cm, avec une perception finale de mauvaise qualité.
Si l’on souhaitait une image de 67,7 x 38,1 cm de bonne qualité, à 300dpi, ses dimensions en pixels seraient alors de 7996 x 4500 pixels.

Il ne font donc pas confondre ces éléments. Lorsque l’on pense impression, on pense dimensions finales en cm, puis dpi. Lorsque l’on pense web, on pense dimension finale en pixels et on se fout littéralement des dpi. Vous pouvez exportez une image de 1920 x 1080 pixels en 72 dpi ou 600 dpi, elle fera toujours 1920 x 1080px avec la même perception pour votre écran.

La bêtise de l’expression Logo HD 300dpi

L’expression « Logo HD 300 dpi » ou Logo Haute définition 300dpi qu’on entend de la part de nos clients, est souvent mal employée, car elle confond la résolution d’impression avec la résolution réelle d’une image, c’est à dire ses dimensions en pixels.

D’une part, HD, c’est techniquement 1280 x 720px

D’autre part, si on exporte une image en définition HD (un logo par exemple) en résolution 300dpi, ses dimensions finales en cm lors de l’impression seront au maximum de 10,8 x 6,1 cm pour conserver une qualité visuelle optimale.

Ainsi, lorsqu’un client vous demande ceci, il faut lui poser les questions suivantes :

C’est pour quel usage ? le web ou l’impression ?
Vous voulez imprimez votre logo dans quelles dimensions finales ?

Et seulement alors, exportez le visuel aux dimensions finales d’affichage (en pixel) ou d’impression (en cm) avec une résolution native de 72dpi pour l’écran, ou de 300dpi pour l’impression (ou de xxxdpi selon la dimension et les recommandations de l’imprimeur)

Profondeur des couleurs en bits

La profondeur de couleur correspond au nombre de bits utilisés pour représenter chaque pixel dans une image. Chaque canal est codé sur 8 bits :

pour un total de 24 bits (8 bits par couleur) dans les modèles RVB (Rouge, Vert, Bleu) à 256 niveaux par canal (variation de luminosité de 0 à 255), ce qui permet de représenter environ 16,7 millions de couleurs (256 x 256 x 256).
Pour un total de 32 bits, en CMJN (Cyan, Magenta, Jaune, Noir) à 100 points de variation d’encre (le %age d’encre appliqué), utilisé pour l’impression, ce qui, du aux limitation du papier, permet de représenter près d’1 million de couleurs. (cf chapitre GGG – les couleurs)

Ces informations affectent immédiatement le poids du fichier final mais n’ont presque rien à voir avec la qualité. Comprenez ainsi que votre image en 32 bit n’est pas “plus qualitative” qu’une image en 24 bit. L’une comporte des informations pour l’impression et l’autre pour l’écran.

Des modèles en 16 bits par canal existent, mais ils ne nous intéressent pas aujourd’hui !

La compression

La compression d’images réduit la taille des fichiers, indispensable pour optimiser le stockage et la performance web. Il existe deux principales méthodes de compression : avec perte (lossy) et sans perte (lossless), chacune adaptée à des usages spécifiques. Ce sujet est un enjeu technologique et écologique de premier ordre. Si vous aimez les maths et la physique, sachez que trouver un nouvel algo de compression de fichier vous rendra célèbre et riche !

Compression avec perte : Réduire la taille au prix de la qualité

La compression avec perte élimine une partie des informations visuelles pour alléger le fichier. Couramment utilisée pour les photos, elle permet une réduction significative sans perte notable de qualité perçue, surtout à l’écran. Une compression excessive peut générer des artefacts ou flouter les détails. Elle convient donc aux images web où la légèreté prime.

Notez que la compression n’a aucun rapport avec la résolution ou la définition ! Une image très compressée peut être à 300dpi et en 4k.

Compression sans perte : Conserver l'intégrité

La compression sans perte préserve toutes les données visuelles, idéale pour les images où la précision est cruciale, comme les logos ou illustrations.

Plutôt que de supprimer des informations, ces algorithmes identifient les motifs ou répétitions dans l’image pour réduire la taille du fichier. Par exemple, si une illustration comporte de grandes zones d’une seule couleur, l’algorithme compresse ces zones sans avoir à réenregistrer chaque pixel individuellement, tout en conservant l’intégrité des pixels originaux. Cela permet de réduire le poids du fichier tout en assurant que l’image puisse être restituée exactement comme à l’origine lors de la décompression.

Formats hybrides : Le WebP et le HEIC

Le WebP, développé par Google, permet une réduction de la taille de fichier d’environ 30 % de plus que le JPEG tout en maintenant une qualité visuelle quasi équivalente. HEIC, utilisé notamment par Apple, offre une compression efficace avec une conservation de détails supérieure, particulièrement pour les photos.

Les avantages des formats hybrides sont généralement une qualité perçue accrue avec des fichiers plus légers, favorisant des temps de chargement plus rapides et une utilisation moindre de la bande passante.

Mais la compatibilité reste un défi : bien que le WebP soit de plus en plus pris en charge sur le web, certains navigateurs et applications plus anciens ne le supportent pas. HEIC, quant à lui, est principalement utilisé sur les appareils Apple et peut nécessiter une conversion pour être affiché sur d’autres systèmes. Ces limitations peuvent créer des obstacles pour l’utilisation universelle des fichiers, nécessitant parfois une conversion vers des formats plus classiques comme JPEG ou PNG pour assurer la compatibilité sur toutes les plateformes.

Des images à afficher

Les images destinées à l’affichage sur écran n’ont pas les mêmes besoins techniques que celles imprimées.
Dans le monde numérique, la densité de pixels, les spécifications d’affichage (comme la taille de l’écran et sa résolution) et la compatibilité avec différents écrans dictent les réglages à appliquer. L’optimisation d’images pour les écrans modernes, en particulier pour les écrans Retina et haute résolution, peut parfois être un vrai casse-tête.

des images sur des écrans

Sur un écran, les dimensions en pixels de l’image suffisent à définir la qualité visuelle : la densité de pixels (« ppi » pour pixels per inch) dépend du matériel de l’écran lui-même. Pour un écran de résolution Full HD (1920 x 1080 pixels), une image de 1920 x 1080 pixels s’affichera à pleine qualité, ni floue ni déformée. À l’inverse, une image de définition inférieure (par exemple, 1280 x 720 pixels) sera agrandie pour remplir l’écran, perdant en netteté.

Sur le web, la résolution standard de 72 ppi est largement suffisante car l’image sera affichée sur un écran, et non imprimée.

Pour rappel, une image en 300 dpi ne paraît pas plus nette à l’écran car l’écran ne peut pas afficher plus de pixels qu’il n’en possède. Le choix de la résolution d’une image pour l’écran n’a donc de sens que dans le cadre d’une impression, et non pour l’affichage.

Webdesigner : pensez “dimensions max d’affichage” et responsive

Vous êtes sur un projet web, et vous avez un illustration pour le contenu d’un article. Sa taille finale, par rapport à votre mise en page, est, quelles que soient les situations (écran de bureau, tablette ou smartphone) de 600px. Et bien exportez moi ça à 600px ! Pas 1 de plus.
Dans 100% des cas :

Optimisation du chargement.
Qualité finale perçue optimale.

Évitez des images fullHD si vous ne les affichez jamais en fullHD. Et lorsque vous le pouvez, créez des images pour chaque environnement en donnant des règles de responsive :

Une image de 600px en desktop
La même image en tablette
Une image de 400px pour les mobiles (qui ne se chargera que dans ce cas)

la galère des écrans retina

Avec l’arrivée des écrans Retina et haute densité, notamment sur les appareils Apple, le nombre de pixels par pouce a doublé (techniquement, les pixels sont donc plus nombreux et plus petits), obligeant les concepteurs à produire des images avec une définition supérieure pour éviter une apparence floue. Par exemple, une image conçue pour un écran Retina doit avoir deux fois plus de pixels en largeur et en hauteur que celle pour un écran standard. Autrement dit, pour un affichage en 1920 x 1080 pixels sur un écran Retina, l’image doit être produite en 3840 x 2160 pixels pour maintenir une netteté optimale.

Ce doublement de pixels pose des défis : les fichiers sont plus lourds, ce qui peut ralentir le chargement des pages web ou les performances d’affichage. Pour gérer ces nouvelles exigences, les développeurs web et les graphistes doivent adapter chaque visuel en plusieurs formats et tailles pour s’adapter à différents écrans et résolutions, un processus fastidieux mais nécessaire pour conserver une expérience visuelle de qualité.

type + usage = format ?

Chaque projet graphique demande des formats de fichier adaptés selon le type d’image et l’usage final (web, impression, etc.). Choisir le bon format de fichier permet d’optimiser la qualité et le poids de l’image, et de s’assurer que le rendu sera adapté au support visé.

logo + web = SVG

Pour un logo destiné au web, le format idéal est le SVG ou le PNG.

Le PNG permet de conserver une qualité d’image élevée avec un fond transparent, idéal pour intégrer le logo sur divers supports numériques sans déformation ou arrière-plan indésirable.

Mais Le SVG est encore plus performant pour les logos simples : il est vectoriel, donc redimensionnable à l’infini sans perte de qualité, et offre une légèreté de fichier optimale pour le web. Ce dernier est particulièrement adapté pour des logos avec des formes géométriques et des couleurs uniformes en faible nombre. Par ailleurs, avec un peu de code CSS, les couleurs sont adaptables.

Il faut ensuite faire de la pédagogie auprès de vos clients, car pour eux, le svg, c’est du chinois et dans leurs dossiers, la plupart du temps, ils ne les verrons pas s’il tournent sous de vieilles versions de windows par exemple :

Soit vous nommez correctement vos fichiers (et le nom raconte l’usage et la destination)
soit vous leur faite installer un plugins pour qu’ils puissent prévisualiser les svg : https://github.com/babeuloula/svgextension/releases
Soit vous hébergez les svg sur le web pour qu’ils aient un guide.

logo + print = PDF

Pour un logo préalablement créé en vecteur et destiné à l’impression, le format PDF ou EPS est préférable.

Ces formats vectoriels assurent que le logo peut être imprimé en haute qualité quelle que soit sa taille, de la carte de visite à l’affiche grand format. Par ailleurs, ils vont contenirs des informations de couleur CMJN ou autres que d’autres formats vectoriel ne peuvent supporter. Le SVG ne contient que des informations de couleur en RVB.

Le PDF est le plus couramment demandé pour les supports imprimés car il est compatible avec tous les logiciels d’impression.

Si le logo n’a pas été créé en vecteurs, alors le fichier peut être exporté en JPG avec des couleurs CMJN. Veillez à livrer à votre client un logo dans des dimensions exagérément grandes pour que les imprimeurs à qui ils confiera le logo puissent le redimensionner par le bas dans trop de perte de qualité. Une astuce consiste également à livrer 3 à 4 dimensions finales d’impression, et de nommer les fichiers en conséquence : Logo_300dpi_10cm.jpg / logo_300dpi_50cm.jpg, etc. Ca donne un repère à vos clients.

photo + web = WEBP

Pour des photos destinées au web, les formats WebP et JPEG sont les plus recommandés.

Le JPEG offre une bonne qualité d’image pour un poids léger, particulièrement adapté aux photos avec beaucoup de détails et de couleurs. Pour une image Full HD, une compression à 60-70% n’affecte quasiment pas la perception finale et va réduire radicalement le poids.

Le WebP, quant à lui, est un format moderne qui propose une compression encore plus efficace que le JPEG. La perception de la qualité finale est souvent bien plus élevée. Il est de plus en plus supporté par les navigateurs et se prête particulièrement aux sites web souhaitant réduire leur temps de chargement.

photo + print = TIFF

Pour des photos imprimées, le JPG non compressé ou le TIFF sont généralement privilégiés.

Le JPG non compressé (pour éviter toute perte de détails dans les dégradés et textures.) peut être passé en CMJN (32 bits), modèle de couleur destiné à l’imrpession quadri. La perception finale est la très grande majorité du temps correcte.

Le TIFF est un format sans perte qui conserve l’intégralité des détails. Si le fichier TIFF est volumineux, il garantit un rendu net et précis, essentiel pour des impressions de haute qualité. Dans le cas de réalisation de brochures ou revue comportant beaucoup de fichiers images, le poids du projets (sous illustrator, InDesign, ou CorelDraw) peut devenir assez colossal. À vous de trouver le bon équilibre ou la bonne façon de référencer des objets images sans les intégrer directement dans votre projet. .

illustration avec plus de 10 couleurs + web = WEBP

Pour des illustrations riches en couleurs et détails destinées au web, le WebP est une fois de plus le format le plus performant. Comparé au PNG et au JPEG, le WebP offre une compression plus efficace tout en maintenant une perception de qualité très proche. Pour rappel, le WebP supporte la transparence (comme le PNG) tout en restant plus léger que le JPEG pour des images sans transparence.

illustration avec moins de 10 couleurs + web = SVG

Pour une illustration simple avec peu de couleurs, les formats SVG, WebP, voire GIF, sont recommandés.

Le SVG est Idéal pour des illustrations simples, comme des icônes ou des schémas avec moins de 10 couleurs. En tant que format vectoriel, le SVG est léger et redimensionnable sans perte de qualité, ce qui en fait une excellente option pour le web. Dans le acs des icones ou de logos monochromes, le SVG peut être facilement modifié directement dans le code pour des ajustements rapides.

Si l’illustration est plus détaillée, le WebP est une bonne alternative. Le SVG étant un ensemble de coordonnées et de formules mathématiques stockées dans un fichier, il arrive que les illustrations complexes pèsent plus lourd que le PNG qui sera alors le format à adopter, bien que moins flexible lors des redimensionnements.

Le GIF est adapté aux illustrations statiques de faible complexité colorimétrique, bien qu’il soit souvent utilisé pour des animations simples. Ce format est limité à une palette de 256 couleurs, ce qui le rend efficace pour des illustrations aux couleurs limitées. Notez que le webP peut également contenir des animations !

Le good graphiste prend un vrai temps pour exporter ses productions aux bons formats, aux bonnes dimensions, avec la bonne définition selon l'affichage web et la bonne résolution selon ce qu'il souhaite imprimer.

Il doit maîtriser son propos, comprendre ce qu'il fait. Il doit prévenir ses clients, les aider à assimiler les formats et comprendre pourquoi le svg c'est mieux que le png, et pourquoi tout ça est important pour les performances de leur site ou pour leur image.

le Good Graphiste a encore un avenir bourré d'images, assurément. GG.

Sur les mêmes thèmes

30/10/24