Les formats images WEB

Optimisation d'image
La rapidité d'affichage d'une page Web est directement influencée par le poids des images qui la
composent. Ce poids, exprimé en kilo-octets (Ko), dépend de la taille réelle des images, de leur
résolution, de la palette de couleurs et du format des fichiers. Une optimisation réussie allie légèreté
et qualité graphique.
Pour y parvenir, Photoshop, ImageReady, Fireworks ou Gimp (open source) proposent, sous forme
de vignettes, différents taux de compression afin de choisir le meilleur résultat.
Photoshop ou Illustrator
Pour sauvegarder une image pour le WEB (Fichiers > Enregistrer pour le WEB et les
périphériques...), Photoshop et Illustrator proposent plusieurs solutions. En .gif ou en .jpg ou en
.png, un tableau de commande (à droite de l'écran) permet de régler le taux de compression selon
plusieurs critères.
La résolution : 72 dpi
La résolution d'une image est le rapport entre sa taille (en centimètres ou en pouces) et le nombre de pixels qui
la composent. Plus la résolution d'une image est grande, meilleure est sa qualité. Destinée à l'impression, une
image pourrait avoir une résolution de 300 voire 600 dpi (dot per inch = point par pouce).
Pour une publication sur écran, une résolution supérieure à 72 dpi ne changera en rien la qualité
d'affichage. 72 dpi est la résolution d'un écran d'ordinateur. Si vous enregistrez vos images avec une
résolution supérieure, elles s’afficheront malgré tout dans une résolution de 72 dpi. Le reste de la
résolution se traduira par une perte de temps et d’espace disque.
Le type de fichier graphique: GIF, JPG, PNG, WEBP.
Il existe différents types de formats d'image. Actuellement, Internet n'en utilise en pratique que
trois: GIF, JPEG et PNG.
Format GIF (Graphic Interchange Format)
Le Gif est le plus vieux format de compression image pour le web (1989). Il est essentiellement
utilisé pour les graphiques de faible taille, comprenant des couleurs sans trop de dégradés, pour des
dessins au trait ou encore pour des petits dessins animés (GIF animé). Il traite traditionnellement
des images indexées en 8 bits, donc à 256 couleurs. La compression utilise un procédé non
destructif de données: l'image décompressée est identique à l'image d'origine. Le format GIF 89a,
basé sur le format d'origine GIF 87a, peut gérer des zones de transparence dans l'image. Ainsi, le
fond peut transparaître: une couleur transparente est une sorte de couleur invisible, qui est
remplacée par le fond de la page Web.
Le Gif est donc adapté aux logos, à tout ce qui a de grandes zones de couleur homogène. On peut
aussi avoir des zones transparentes, et on peut créer une animation minimale avec du GIF, alors
appelé « gif animé ». C’est ce qui assuré au gif sa longue vie même s’il est un peu archaïque
aujourd’hui...
Format JPEG (Joint Photographics Expert Group)
Le format JPEG (JPG) est le plus adapté à la compression d'images photographiques possédant de
nombreux dégradés de couleurs. Il n'est pas recommandé pour les dessins au trait ou les images de
petite taille. Il est capable de supprimer la plupart des nuances de couleurs que l'oeil ne distingue
pas. Ce format est un mode de compression à perte. Il est donc recommandé de travailler l'image
sous un autre format et de l'enregistrer une unique fois en JPEG pour éviter la perte inutile de
données. Il est intéressant d'essayer plusieurs niveaux de qualité sur une même image pour
comparer les résultats obtenus. Il existe aussi trois options de compression: standard, optimisé et
progressif.
Format PNG (Portable Network Graphic)
Le PNG est un format qui a été créé comme réponse à la protection du format GIF. Il étend les
possibilité de celui-ci, notamment en permettant une transparence « alpha », c’est à dire partielle.
Son utilisation a été freinée sur le web par le refus de Microsoft de l’implémenter dans Internet
Explorer. On estime qu'un fichier en PNG est 10 % à 30 % plus léger qu'un fichier GIF. Ce format
s'impose comme format universel pour le Web.
Format WEBP (Web Picture)
Dans toutes les situations le WebP se révèle meilleur avec jusqu'à 60% de gain.
Pour le moment la transparence alpha n'est pas gérée mais sera bientôt ajoutée pour en profiter
comme dans le cas du PNG 24 bits. Attention, tout comme le JPEG, le WebP compresse les images
avec une perte de données et donc de qualité, même si Google assure que dans la majorité des cas le
taux de compression obtenu est supérieur au celui du JPEG à qualité équivalente.
(sources: www.multimedialab.be, arts-numeriques.codedrops.net)
De l'impact des photos sur un site web
Selon les dernières études (2010) :
•
•
•
•
•
•
Le texte comptabilise, en moyenne, beaucoup plus de fixations que les photos
Les photos de visages humains attirent l'attention
Mais pas lorsque ces visages sont génériques (issues de banques d'images*)
Les photos informatives sont infiniment plus puissantes que les photos décoratives
Les photos intégrées au texte captent mieux l'attention que les photos trop latérales
La taille des photos compte (plus c'est grand, plus c'est vu)
Ci-dessous, un exemple des plus criant : une photo complètement snobée du regard, tellement elle
sent le papier peint ! Les utilisateurs plongent, sans perdre de temps, sur la zone fonctionnelle de la
page.
Source : Jakob Nielsen
(*) Vous savez, ces photos avec trois personnes au très large sourire, remplies de bonheur dans une salle de réunion ou devant un
ordinateur, avec ce savant mélange ethnique extrait des banques d'images américaines : un black, un blanc, un asiatique, unis dans
leur passion de l'entreprise.
Sources Internet :
> Jakob Nielsen: http://www.useit.com/alertbox/photo-content.html
> 60questions.net : http://blog.60questions.net/index.php/2010/11/02/414-de-l-impact-des-photos-sur-un-site-web