Share
Vous êtes-vous déjà demandé quelle est la différence entre les images JPEG, GIF et PNG que nous utilisons sur le Web? En tant que concepteur - et particulièrement en tant que concepteur Web -, il est important de connaître la différence entre les différents formats d'image et de savoir comment les utiliser dans chaque situation. Cet article explique comment les utiliser dans chaque situation afin de réduire la taille des fichiers et d'améliorer la qualité de l'image. Nous classons cela sous "Basix", mais les informations devraient être intéressantes pour ceux qui cherchent à mieux comprendre les formats d'image..
Pour utiliser au mieux un outil, vous devez d’abord comprendre son fonctionnement. Pour comprendre comment mieux utiliser les types d'image, nous devons examiner le fonctionnement de leur algorithme de compression. Je sais, je sais, tu n'es pas un geek des chiffres et qui s'en soucie vraiment? C'est comme conduire une voiture cependant; vous pouvez le conduire mieux quand vous savez comment toutes les petites pièces interagissent. De plus, quand quelque chose ne va pas, vous savez comment y remédier!
JPEG a été développé par le Joint Photographic Experts Group. Comme vous l'avez peut-être deviné, cela fonctionne bien pour les types d'images naturelles (photographie). Les types d'images naturelles, comme la photographie, présentent des variations de couleurs lisses, ce qui signifie que le format JPEG convient également aux images contenant des dégradés et des tons et des couleurs variables..
Un point important à propos des JPEG est qu’ils sont généralement avec perte format, sauf si vous utilisez une autre variante sans perte. La compression avec perte est simplement une forme d'encodage qui supprime (perd) certaines de ses données… C'est pourquoi, si vous enregistrez un fichier JPG 100 fois, il se détériorera progressivement avec le temps. Il existe des versions "sans perte" de JPG, mais ces variantes ne sont pas courantes et ne bénéficient pas d'un support étendu. Si vous devez stocker des données d'image dans un format sans perte, utilisez de préférence un format tel que TIFF ou PSD..
Passons maintenant à la partie technique: le processus JPEG divise l’image en blocs de 8 × 8 pixels et les exécute selon un calcul DCT (transformation discrète en cosinus) suivi d’une quantification (JPEG 2000, une version plus récente, utilise une transformation en ondelettes au lieu de DCT. ).
En termes simples: il examine essentiellement les blocs de l'image et détermine les petites variations de couleur, puis élimine certaines de ces variations en fonction du niveau de compression que vous avez choisi. Les données supprimées sont complètement supprimées du fichier, ce qui donne un petit fichier. Par conséquent, cela réduit également la qualité de l'image. Vous savez probablement que si vous réglez la compression très haut, vous obtiendrez une image dégradée, pixelisée… alors que des réglages de compression plus faibles donneront une image de meilleure qualité..
Le format GIF (Graphics Interchange Format) a été développé par CompuServe et utilise la méthode de compression LZW (Lempel-Ziv-Welch), qui est sans perte. Cette méthode de compression crée une table de couleurs pour l'image, dans laquelle chaque valeur de couleur est affectée à des pixels. Cette méthode de compression rend ce format d'image idéal pour les dessins au trait, les logos ou d'autres images simples sans dégradés ni couleurs variables..
Une note intéressante à propos de cette méthode de compression est qu’elle considère le changement de pixel horizontalement. Cela signifie que les images dans lesquelles les changements de couleur de pixel qui se produisent plus fréquemment horizontalement sont plus volumineuses que les images dans lesquelles les changements de couleur de pixel se produisent plus fréquemment verticalement. Le format prend en charge jusqu'à 8 bits par pixel, ce qui permet à une seule image de faire référence à une palette de 256 couleurs distinctes. Vous pouvez utiliser moins de couleurs (vous avez peut-être vu des images GIF n'utilisant qu'une poignée de couleurs), ce qui peut entraîner des résultats intéressants, voire artistiques..
Les fichiers GIF peuvent faire deux choses supplémentaires que les fichiers JPEG ne peuvent pas. Tout d'abord, un GIF peut utiliser la transparence. Dans un fichier GIF, les pixels sont 100% transparents ou 100% opaques. Le format GIF est également un format multi-images, vous pouvez donc utiliser animation (pour le meilleur ou pour le pire).
PNG (Portable Network Graphics) a été créé pour remplacer ou au moins améliorer le format GIF. PNG utilise la méthode de compression DEFLATE - le même algorithme que celui utilisé en zip et en gzip. Je n'entrerai pas dans les détails sur le fonctionnement de cette méthode de compression, car elle est un peu trop compliquée pour cet article, mais il s'agit d'une compression sans perte. Pour cette raison, le format PNG a tendance à donner des tailles d'image plus grandes que le JPEG lorsqu'il est utilisé pour des images de type photographique. Lorsqu’il est utilisé pour des images de type dessin au trait, le format PNG produit des fichiers beaucoup plus petits que le JPEG et presque toujours plus petits que le format GIF..
Contrairement au format GIF, le format PNG est identique au format JPEG, à savoir qu’il s’agit d’un seul format d’image. ce qui signifie que PNG ne supporte pas l'animation. Cependant, il prend en charge un avantage majeur que ni JPEG ni GIF ne prennent en charge: transparence alpha. Les pixels d'une image PNG pourraient être transparents à 50%, contrairement au format GIF qui exigerait que ces pixels soient 100% transparents ou 100% opaques. Comme vous pouvez l’imaginer, cela permettrait un meilleur mélange et des graphismes plus lisses que le format GIF. PNG implémente également plusieurs autres améliorations par rapport au format GIF, mais elles ne sont pas nécessaires pour entrer dans.
Il va sans dire que le format PNG est un bien meilleur format que le format GIF à presque tous les égards, à l'exception des très petits fichiers (comme celui-ci utilisé dans les modèles d'arrière-plan). Le format PNG a attiré l'attention des concepteurs Web car il n'était pas compatible avec certains navigateurs Web plus anciens, mais ce problème peut être résolu en grande partie grâce à quelques scripts de qualité, comme le script DD_Belated..
Comme vous le savez probablement, il existe deux types principaux de PNG.
Vous trouverez ci-dessous deux exemples d'images que je vais utiliser pour montrer comment et quand utiliser chaque format d'image. Vous connaissez peut-être déjà ces méthodes, mais si vous ne les avez pas vraiment étudiées, cela vaut bien une critique..
Comme vous pouvez le constater, l’image ci-dessous est de nature photographique avec des couleurs et des tons qui varient énormément. Évidemment, toutes les images n'utiliseront pas autant de couleurs - mais cette image est intéressante à utiliser comme exemple d'utilisation du format JPEG..
L'image ci-dessous montre la compression JPEG d'un réglage de qualité de 100% à 0%. Avec une qualité de 100%, l'image semble être sans perte, mais des données sont toujours supprimées de l'image d'origine. L'œil humain ne peut pas voir la perte de données car il est minuscule. À 50%, la qualité de l’image diminue considérablement, mais comme vous pouvez le constater, la taille du fichier a été réduite de 100K. C'est une énorme différence avec une perte de qualité visible quelque peu minime. À 25%, l'image commence vraiment à être mauvaise et n'a pas enregistré beaucoup de fichiers en plus. À 0%, l'image est horrible et, bien que l'image soit une taille de fichier beaucoup plus petite que celle définie à 100%, le compromis n'en vaut pas la peine.
Cette image aurait probablement un meilleur rendu avec une qualité de ~ 65%, ce qui réduirait la taille de l’image de près de 100 Ko. Pour déterminer les meilleurs paramètres à utiliser pour un fichier JPEG, réduisez lentement le curseur jusqu'à ce que vous puissiez voir la qualité de l'image se dégrader réellement. Puis déplacez la qualité de sauvegarde d'environ 5-10% environ.
Nous savons que ce fichier JPG semble décent pour le Web; Regardons quelques comparaisons taille / qualité de fichier pour les autres formats:
GIF résulte en une taille de fichier de 63,77K et une image à la recherche horrible.
PNG8 donne une taille de fichier de 53,52 Ko en raison des méthodes de compression plus avancées, mais ressemble au fichier GIF.
PNG24 résulte en une taille de fichier de 253,9K et ressemble beaucoup à l'original, mais ne vaut pas la taille du fichier volumineux.
La meilleure option possible pour ce type d'image est le format JPEG avec une qualité de ~ 65%. petite taille de fichier (39,77 Ko) avec très faible perte de qualité visuelle.
Comme vous pouvez le voir ci-dessous, l'image n'utilise pas de couleurs ou de tons différents, mais des couleurs unies. Cette image a une taille de 5.72K (GIF) et utilise un total de 8 couleurs. Cela rend les formats GIF et PNG8 parfaits pour les dessins au trait, les logos couleur simples, etc. PNG8 serait un meilleur choix car il en résulte une taille de fichier plus petite (3,54 Ko) en raison de la meilleure méthode de compression utilisée.
Lorsque vous essayez de sauvegarder un fichier GIF, comme l’image ci-dessus, au format JPEG, cela peut entraîner une pixellisation ou une distorsion de l’image. Il en résultera toujours des fichiers beaucoup plus volumineux s’agissant de la photographie et d’autres images riches. L'image ci-dessous est réglée sur la compression maximale et donne une taille de fichier de près de 8 Ko pour JPEG contre 5,72 Ko pour GIF et 3,54 Ko pour PNG8..
Contrairement aux formats JPEG et PNG24, les formats GIF et PNG8 vous permettent de sélectionner le nombre de couleurs pouvant être utilisées (jusqu'à 256). Dans le cas d'images telles que des logos et des dessins au trait simples, vous pouvez réduire la taille du fichier en sélectionnant moins de couleurs. Veillez à ne pas sélectionner trop peu de couleurs, car cela risquerait d’aggraver l’image..
L'image ci-dessous est un PNG8 avec transparence (le format GIF est identique à celui présenté dans Photoshop). Lors de l'utilisation de la transparence avec GIF ou PNG8, vous souhaiterez définir le cache de l'image sur la couleur de l'arrière-plan - pour un meilleur fondu et une image plus nette. Comme mentionné précédemment, cela est dû au fait que le format GIF ne prend pas en charge la transparence alpha et que Photoshop ne prend pas en charge la transparence alpha au format PNG8, même s'il le prend en charge (Modifier - ce problème a depuis été corrigé dans les nouvelles versions de Photoshop)..
Heureusement, Fireworks nous permet d’utiliser Alpha Transparency avec le format PNG8 (C'mon Photoshop!). Comme vous pouvez le voir dans l'image ci-dessous, le dégradé de noir est toujours limité dans la variation de ton, ce qui le rend un peu saccadé. L’atout majeur de l’utilisation de la transparence alpha avec PNG8 est que vous obtenez toujours la petite taille du fichier, mais que les bords se mélangent sans à-coups et même les dégradés mineurs.
Un autre avantage majeur du format PNG8 est que IE6 prend en charge l'utilisation de la transparence alpha avec ce dernier de manière native! Cela signifie que pour les images simples nécessitant une transparence alpha (ombres, logos, etc.), vous n'avez pas besoin de pirater IE6 avec PNG8 et la transparence alpha.!
Malheureusement, vous ne pouvez pas enregistrer une image au format PNG8 avec une transparence alpha dans Photoshop; vous devez donc vous connecter à Fireworks pour le faire..
Dans la palette Optimiser, sélectionnez le format PNG8 avec la transparence alpha sélectionnée, puis cliquez sur «Reconstruire» dans le coin inférieur droit..
Vous n'avez pas besoin de sélectionner une couleur mate et vous pouvez ajuster le nombre de couleurs en fonction de vos besoins et réduire la taille du fichier. Dans l'exemple à droite, j'ai enregistré ces paramètres en tant que «PNG8 Alpha-T», de sorte que je n'ai pas besoin de resélectionner chaque option à chaque fois que je veux enregistrer une image PNG8 avec une transparence alpha..
C'est à peu près tout ce qu'il y a à faire!
Utiliser PNG24 est fondamentalement la même idée que d’utiliser GIF ou PNG8, sauf qu’il en résultera une taille de fichier plus grande car il prend en charge une gamme beaucoup plus étendue de variations de couleur. Si vous avez des images avec des dégradés plus complexes nécessitant de la transparence ou une plus grande profondeur de couleur, PNG24 est le meilleur choix. Malheureusement, IE6 ne supporte pas PNG24 de manière native; vous devrez donc le "pirater" pour qu'il fonctionne correctement.
Les PNG24 sont parfaits dans la plupart des cas où vous avez besoin de transparence - ils sont beaucoup plus gros en taille de fichier, mais fonctionnent bien dans des cas tels que les logos de marques où la qualité est importante et vous ne voulez pas utiliser un format avec perte.
Il s'agit d'un format relativement nouveau, annoncé il y a quelques semaines à peine par Google. De leur communiqué de presse:
"Pour améliorer la compression fournie par JPEG, nous avons utilisé un compresseur d'images basé sur le codec VP8 que Google a ouvert en source 2010. Nous avons appliqué les techniques de codage vidéo intra-image VP8 pour repousser les limites du codage d'images fixes. Nous avons également adapté à un conteneur très léger basé sur le format RIFF. Ce format de conteneur représente un surcoût minimal de seulement 20 octets par image, mais il est extensible pour permettre aux auteurs de sauvegarder les métadonnées qu'ils souhaitent stocker..
Bien que les avantages d'un format d'image basé sur VP8 soient évidents en théorie, nous devions les tester dans le monde réel. Afin de mesurer l'efficacité de nos efforts, nous avons sélectionné au hasard environ 1 000 000 images du Web (principalement des JPEG et des PNG et GIF) et les avons ré-encodées au format WebP sans compromettre de manière perceptible la qualité visuelle. Cela a entraîné une réduction moyenne de 39% de la taille du fichier. Nous nous attendons à ce que les développeurs obtiennent en pratique une réduction encore meilleure de la taille des fichiers avec WebP à partir d'une image non compressée. "
L'objectif ici est simple: accélérer les images sur le Web en utilisant des algorithmes plus modernes. La question est la suivante: sera-t-il adopté? Google est une entreprise gigantesque qui dispose d'un réel pouvoir pour pousser ce format au grand public, mais comme nous l'avons vu avec certains de ses produits (je vous regarde, Wave!), Même les bonnes idées peuvent tomber à plat..
"Scalable Vector Graphics" est un format qui n’a jamais été retenu comme type d’image largement utilisé. L'idée derrière ce format est de permettre les "graphiques vectoriels" sur le web. Le format utilise XML comme base pour décrire une image 2D sur le Web. La prise en charge de SVG par un navigateur est incohérente, mais si vous souhaitez vraiment inclure des graphiques évolutifs, il est utile de lire ce format..
Pendant votre temps libre, je vous encourage à approfondir un peu plus ces formats d’images et tout ce qu’ils ont à offrir. Vous en apprendrez beaucoup et vous saurez exactement ce que vous pouvez faire avec ces formats d'image ou lequel utiliser dans chaque situation. La valeur des très petites tailles de fichiers pour les images semble se faire sentir à mesure que le large bande se développe sur Internet, mais la vitesse restera toujours une caractéristique utile du site et la compréhension de ces formats est la première étape pour optimiser vos propres images sur le Web..
Si vous avez des questions ou des commentaires, n'hésitez pas à les poster ci-dessous!
Accentsconagua