Le blog de Sophie

JPEG, PNG et GIF : formats et opti­mi­sa­tion des images pour le web et Face­book

Comme vous l’aviez sans doute déjà remarqué, trois formats d’images sont prin­ci­pa­le­ment employés sur Inter­net et les réseaux sociaux : il s’agit du JPEG (ou JPG), du PNG et du GIF. Que signi­fient ces termes ? Comment traitent-ils les images ? Comment opti­mi­ser ces derniers pour le réseau social Face­book ? Enfin, quels formats employer, selon l’image, l’usage et le média ? Ce sont les ques­tions auxquelles cet article cher­chera à répondre.

JPG, PNG et GIF : les grands formats du Web 2.0.

formats d'image JPG PNG GIF

JPEG (ou JPG) – « format compressé destruc­teur »

JPEG (ou JPG) signi­fie « Joint Photo­gra­phic Expert Group », en réfé­rence au « groupe d’ex­perts ayant eu pour mission de mettre au point un format de compres­sion d’image ».

« Format de fichier graphique permet­tant des taux de compres­sion impres­sion­nants mais au détri­ment de la qualité de l’image : la compres­sion se fait avec perte d’in­for­ma­tion. L’ex­ten­sion de fichier corres­pon­dante est JPG. Ce format ne supporte pas la trans­pa­rence contrai­re­ment au GIF ».

En d’autres termes, si le JPEG est à ce point usité sur la toile, c’est notam­ment parce qu’il permet de compres­ser de manière suffi­sam­ment impor­tante l’image ; de sorte que celle-ci puisse être char­gée sur le site à une vitesse et à un poids raison­nable. Pourquoi ? Tout d’abord pour des ques­tions d’Ex­pé­rience Utili­sa­teur (UX) : une image prenant un temps trop élevé à être char­gée amènera l’in­ter­naute à quit­ter sa session, rechar­ger la page, voir même quit­ter le site. Soit il pensera que le site a planté, soit il perdra tout simple­ment patience (car il est bien connu que l’homme du 21ème siècle – et encore pire l’in­ter­naute – n’a plus aucune patience). Ensuite, imagi­nez le coût en temps de trai­te­ment, en stockage sur leurs serveurs et autres impli­ca­tions d’un réseau social (lequel regroupe une quan­tité astro­no­mique d’images et photo­gra­phies en tout genre). La compres­sion d’image – « Procédé permet­tant de réduire le volume (en bits) ou le débit (en bit/s) des données numé­ri­sées  » – est la réponse à tous leurs maux.

GIF (ou « GIF Animé »)

Le GIF – qui signi­fie « Graphics Inter­change Format » – est une : « Exten­sion corres­pon­dant à un format d’image très utilisé qui permet un bon affi­chage mais qui est limité à 256 couleurs. Il utilise une tech­nique de compres­sion sans perte et permet l’uti­li­sa­tion de couleurs trans­pa­rentes. Il est couram­ment utilisé pour les barres d’ou­tils et les icônes et convient mieux que le format JPEG pour obte­nir des images nettes ». « Le GIF animé est un fichier GIF compre­nant plusieurs images qui permettent d’ob­te­nir une anima­tion par affi­chages succes­sifs en boucle. Le nombre de répé­ti­tion de la boucle peut être limité pour éviter un phéno­mène d’ir­ri­ta­tion de l’in­ter­naute. Le GIF animé fut le premier format graphique utilisé pour la créa­tion d’ani­ma­tions visuelles dans le domaine de la publi­cité Inter­net ».

Site d'Exit Studio Hire (hire.exitstudio.be) Sur le site http://hire.exits­tu­dio.be/ d’Exit Studio, vous pour­rez obser­ver un exemple d’uti­li­sa­tion d’images GIF sur le web, en survo­lant à l’aide du curseur de votre souris les photos des membres de notre petite équipe de geek.

PNG – format « format non destruc­teur »

Si les formats JPEG et GIF s’op­posent sur beau­coup de points : format JPG versus format GIF Le format PNG (acro­nyme de « Portable Network Graphics ») se distingue de manière plus parti­cu­lière de ces deux formats :

Diffé­rences entre le format PNG et le format JPEG :

« Le terme PNG désigne un format d’image libre de droits, opti­misé pour l’af­fi­chage à l’écran (et parti­cu­liè­re­ment pour le web), déve­loppé afin de propo­ser une alter­na­tive libre au format GIF (format proprié­taire). […] À la diffé­rence d’autres formats (tels que le format JPG) le format PNG est dit « non destruc­teur », c’est à dire qu’il ne provoque pas de dégra­da­tion de l’image. PNG utilise jusqu’à 9 niveaux de compres­sion. Une autre de ses spéci­fi­ci­tés est de gérer la trans­pa­rence (ce qui explique qu’il est employé dans les pages HTML pour créer des effets de super­po­si­tions d’images). […] Il gère géné­ra­le­ment 16 millions de couleurs (alors que le format GIF n’en gère que 256), ce qui le rend adapté à l’af­fi­chage des photo­gra­phies moyen­nant toute­fois des fichiers de taille plus impor­tante que ceux enre­gis­trés au format JPG (format compressé destruc­teur) ».

Diffé­rence entre le format PNG et le format GIF :

« Á la diffé­rence du format GIF, le format PNG ne peut pas affi­cher des images animées. Ce format gère les méta­don­nées (infor­ma­tions rela­tives à l’image, telles que sa descrip­tion ou le nom de son auteur qui, enre­gis­trées dans le fichier, peuvent être utili­sées par les moteurs de recherche) ».

PNG et GIF ont en commun la gestion de la trans­pa­rence, ce qui en fait des formats parti­cu­liè­re­ment adap­tés aux logos. format PNG versus format GIFLégende : un double exemple avec les logos de Twit­ter et de Fire­fox, l’un au format PNG, l’autre au format GIF. Obser­vez atten­ti­ve­ment les contours du logo et le problème de gestion de la trans­pa­rence pour le GIF. format PNG versus format GIF

Photo­shop et son outil d’en­re­gis­tre­ment d’images pour le web

Photo­shop met à dispo­si­tion de ses utili­sa­teur un outil permet­tant d’op­ti­mi­ser l’en­re­gis­tre­ment d’une image à desti­na­tion du web, et ce, pour un très grand nombre de formats. La ques­tion de l’op­ti­mi­sa­tion des images étant assez complexe, elle ne sera pas trai­tée dans cet article. En effet, il faudrait s’in­té­res­ser à un certain nombre de points, dont le type d’image à trai­ter (une photo, une illus­tra­tion, un logo, etc.), le format sélec­tionné (JPEG, PNG-8bits, PNG-24bits, GIF, etc.), le site de desti­na­tion (un réseau social comme Face­book ou le site 500px pour les photo­graphes), etc. soit une série de ques­tions qui mène­ront à un trai­te­ment diffé­rent de l’image. Photoshop outil enregistrer pour le webLégende : un aperçu de l’ou­til d’en­re­gis­tre­ment d’images pour le web d’Adobe Photo­shop (photo issue de son site d’aide). Je vous invite donc – pour l’heure – à consul­ter le site d’aide d’Adobe qui traite de l’op­ti­mi­sa­tion des images. Pour l’ins­tant, sachez donc simple­ment qu’un tel outil existe (sous Photo­shop mais égale­ment avec d’autres logi­ciels) et vous sera d’une très grande aide dans l’op­ti­mi­sa­tion de vos images. format GIF versus format PNG versus format JPEG

Comment conser­ver la qualité de vos images sur Face­book

Face­book a la désa­gréable habi­tude de compres­ser vos images (souvent déjà préa­la­ble­ment compres­sées au format JPEG) avant publi­ca­tion, de sorte que beau­coup de photo­graphes profes­sion­nels se retrouvent désem­pa­rés par le trai­te­ment réservé à leurs photos. Car déser­ter le réseau social n’est pas une solu­tion, vu le grand nombre d’uti­li­sa­teurs inscrits – et par exten­sion, le plus large public atteint – mais aussi au risque de voir leur légi­ti­mité atteinte une fois leurs photos de hautes quali­tés publiées – et compres­sées – par leur clients (sur leurs profils respec­tifs) au moment de la publi­ca­tion.

Une photo­graphe frus­trée par la compres­sion systé­ma­tique des images par Face­book : “Yes, Face­book takes your photos and squashes them down to more down­load-friendly sizes and in that process turns your art into… lower reso­lu­tion art. […] Portable Network Graphics files (PNGs for short) pack a larger file size than the JPEGs you’re used to, but the fide­lity in the quality is beyond compare. […] On Face­book they take about 3–5 seconds longer to load and view on a cable modem but hot damn if the diffe­rence isn’t astoun­ding”.

Traduc­tion :

« Oui, Face­book prend vos photos et les écrases pour leur donner une taille plus facile à télé­char­ger et, dans le proces­sus, trans­forme votre art … en une œuvre de basse réso­lu­tion. Le format PNG enre­gistre un fichier plus lourd (image au poids plus élevé) que le JPEG, mais la qualité est au-delà de toute compa­rai­son. Sur Face­book, cela prend 3 à 5 secondes de plus pour char­ger vos images, mais cela en vaut la peine, tant la diffé­rence est impres­sion­nante ».

Comparaison image original versus image compressée sur Facebook

Mais pourquoi Face­book compresse-t-il nos images ?

Why does Face­book compress images in this way? : « Face­book provides image storage free of charge to its users – there is no limit to the number of images you can display on Face­book. But behind the scenes, Face­book has to pay to store the images: costs such as disk drives, band­width and data centres must amount to a multi-million dollar bill for them. […] it is unders­tan­dable that they want to reduce their storage and band­width outlay.By compres­sing images, they reduce their costs. You might upload a 500KB JPG file, but Face­book will compress this down to 100KB or less. This loss of data is respon­sible for the unwan­ted arti­facts that appear in your image ».

Traduc­tion :

« Face­book four­nit une capa­cité de stockage d’image gratuite à ses utili­sa­teurs – il n’y a pas de limite au nombre d’images que vous pouvez publier / uploa­der sur Face­book. Mais en arrière-plan, Face­book doit payer pour le stockage de ces images : disques durs, bande passante et centres de stockages des données génèrent des coûts qui atteignent des sommets (cela se comp­ta­bi­lise en milliards de dollars). Il est compré­hen­sible que le géant désire dimi­nuer la quan­tité de stockage et de bande passante. En compres­sant les images, Face­book réduit ses coûts. Vous pouvez char­ger un fichier JPG de 500Kb, Face­book le compres­sera à 100Kb, voir moins. Cette perte de données est respon­sable de la dégra­da­tion de votre image ».

Compression JPG de Facebook Comme je l’avais évoqué précé­dem­ment, l’homme du 21ème siècle – et encore pire l’in­ter­naute – n’a plus aucune patience. User Expe­rience (UX) – mon dernier article sur la diffé­rence entre User Expe­rience (UX) et User Inter­face (UI) vous four­nira plus de préci­sions sur la ques­tion – et coûts sont désor­mais au centre des préoc­cu­pa­tions des petits comme des géants du web.

En conclu­sion – avan­tages et contraintes des formats JPEG, PNG et GIF : une ques­tion de rapport « qualité – poids » et de type d’images

La ques­tion de l’op­ti­mi­sa­tion des images est toujours impor­tante, que cela concerne un photo­graphe profes­sion­nel dési­reux de conser­ver des photo­gra­phies de quali­tés à un poids raison­nable ; ou un gestion­naire de site – bras­sant de quelques images à des milliards d’entres elles – dans un souci d’op­ti­mi­sa­tion des vitesses de char­ge­ment, de la satis­fac­tion des inter­nautes (UX) et/ou de dimi­nu­tion des coûts (de stockage et de bande passante). Au moment de l’op­ti­mi­sa­tion de vos images, posez-vous deux ques­tions primor­diales :

  • De quel type d’image s’agit-il ? Chaque format est appro­prié à chaque type d’image. Ainsi, on favo­ri­sera l’uti­li­sa­tion du :
    • JPEG pour une photo­gra­phie afin de conser­ver la qualité des nombreuses nuances de couleurs ;
    • PNG pour un logo avec fond trans­pa­rent ou une image/photo simple avec peu de nuances (aplats de couleurs par exemple) ;
    • GIF pour une anima­tion ;
  • Où va-t-elle être publiée ?
    • Sur Face­book ? Prenez alors en compte la compres­sion systé­ma­tique de votre JPEG sur le réseau social. Si vous dési­rez vrai­ment conser­ver une image de qualité (c’est le cas des photo­graphes profes­sion­nels), pensez à l’uploa­der au format PNG, quitte à perdre un peu de temps au moment du char­ge­ment.
    • Sur 500px ? Le site est dédié à la photo­gra­phie et permet de char­ger des images au format JPEG ou autres sans compres­sion supplé­men­taire.
    • Sur un site inter­net lambda ? S’il s’agit de votre site, pensez à opti­mi­ser vos images pour gagner en vitesse (Page Speed) ce qui aura un impact sur le temps de char­ge­ment des pages de votre site, la satis­fac­tion utili­sa­teur et, fina­le­ment, votre réfé­ren­ce­ment natu­rel (votre posi­tion­ne­ment sur le moteur de recherche Google).

Opti­mi­ser vos images à l’at­ten­tion du web, c’est – comme le dirait Maïté – « une ques­tion de bon sens ! », puisqu’au final, tout le monde y gagne ! Je vous laisse donc à ce tableau réca­pi­tu­la­tif et à ces char­mants petits animaux (le petit panda au milieu me rappelle mon article sur les dernières mises à jour de l’al­go­rithme de Google, pas vous ^^ ?). Format GIF PNG et JPG pour quel type d'image

  JPEG PNG GIF
Acro­nyme Joint Photo­gra­phic Expert Group Portable Network Graphics Graphics Inter­change Format
Type de format Format d’image matri­ciel avec perte Format d’image matri­ciel sans perte Format d’image bitmap
Compres­sions Format compressé destruc­teur (permet des taux de compres­sion de 3 à 99%) Format compressé non destruc­teur (jusqu’à 9 niveaux) Compres­sion impor­tante mais sans perte de qualité
Couleurs Des millions de couleurs PNG-8 : 256 couleurs PNG-24 : Des millions de couleurs 256 couleurs
Trans­pa­rence Ne gère pas la trans­pa­rence Gère la trans­pa­rence Gère la trans­pa­rence
Idéal pour Photo­gra­phie avec beau­coup de nuances de couleurs Logos et images simples avec aplat de couleurs peu nuan­cées Anima­tions
Photos Adapté aux photos Adapté aux photos mais taille de fichier supé­rieure aux JPG Non adapté aux photos
Logos Non adapté aux logos Adapté aux logos Moins adapté aux logos (qualité moindre)
Anima­tions Ne gère pas les anima­tions Ne gère pas les anima­tions Gère les anima­tions
Exten­sions .jpg, .jpeg, .JPG, .JPEG .png .gif

 

When to Use JPEG, GIF, & PNG Image File Types