Formats d'image de site Web: Choisir le bon format pour la bonne tâche
Lors de la conception d'un site Web, quel est selon vous le meilleur format d'image à utiliser pour une tâche particulière?
Je me trouve toujours dans un dilemme lorsque je tente de déterminer quel format utiliser pour une tâche spécifique ... comme par exemple, devrais-je utiliser .jpg de manière exhaustive? ou, quand et pourquoi devrais-je utiliser un fichier .png?
Par exemple, en prenant le site Web de Amazon, ils utilisent .jpg pour les images de produits ( Exemple ), .gif pour ce pixel transparent ( Exemple ) et .png pour leurs sprites CSS ( Exemple )
D'autre part, Play.com utilise un .gif pour le logo de son site Web ( Exemple ), mais utilisez .jpg pour les produits de son site Web (comme Amazon) ( Exemple ) et pour ce qui est de la page principale, ils n’ont pas de .png s dessus.
Quels formats dois-je utiliser pour mes sites Web? et pourquoi devrais-je les utiliser?
[METTRE À JOUR]
Merci CruellO pour ce lien pour expliquer les différences, et aussi Dustin pour avoir expliqué pourquoi.
Les JPEG sont pour les photos. Je vois parfois des fichiers JPEG contenant du texte et ils ont un aspect affreux. Le texte est préférable pour le texte, sinon utilisez PNG.
Si ce n'est pas une photo mais que vous voulez un graphique, utilisez un fichier PNG. Un fichier PNG est presque toujours plus petit que son équivalent gif et ne perdra pas en qualité, contrairement à un fichier JPEG. Un équivalent PNG d'un fichier JPEG sera généralement beaucoup plus grand (en supposant qu'il soit photoréaliste). Il peut y avoir des moments où cela est toujours souhaitable.
Le format PNG autorise une transparence de 8 bits, mais si vous devez prendre en charge IE, vous constaterez qu’ils refusent continuellement de la prendre en charge correctement. Autant que je sache, ils do supportent un seul bit de transparence dans une image 8 bits (essentiellement identique à gif) Il existe également de nombreux hacks pour que la transparence 8 bits fonctionne dans IE. Je ne me suis jamais dérangé moi-même.
En résumé:
- Photos → jpg
- ! Photos → png
Vous devez être conscient de quelques facteurs clés ...
Premièrement, il existe deux types de compression: sans perte et avec perte .
Lossless signifie que l'image est réduite, mais sans en altérer la qualité. Lossy signifie que l'image est rendue (encore) plus petite, mais au détriment de la qualité. Si vous enregistrez une image au format Lossy à plusieurs reprises, la qualité de l’image empire progressivement.
Il existe également différentes profondeurs de couleur (palettes): Couleur indexée et Couleur directe .
Avec Indexed, cela signifie que l’image ne peut stocker qu’un nombre limité de couleurs (généralement 256) choisies par son auteur. Avec Direct, cela signifie que vous pouvez stocker plusieurs milliers de couleurs qui n’ont pas été choisi par l'auteur.
BMP - sans perte/indexé et direct
C'est un vieux format. Il est sans perte (aucune donnée d'image n'est perdue lors de la sauvegarde), mais il y a également peu ou pas de compression, ce qui signifie que l'enregistrement en tant que BMP entraîne une TRES grande taille des fichiers. Il peut avoir des palettes d'indexé et direct, mais c'est une petite consolation. La taille des fichiers est tellement grande que personne n’utilise vraiment ce format.
Bon pour: rien vraiment. Il n'y a rien que BMP excelle, ou ne soit pas mieux fait par d'autres formats.
GIF - Sans perte/Indexé uniquement
Le format GIF utilise une compression sans perte, ce qui signifie que vous pouvez enregistrer l'image à plusieurs reprises et ne jamais perdre de données. La taille des fichiers est beaucoup plus petite que celle du format BMP, car une bonne compression est effectivement utilisée, mais il ne peut stocker qu'une palette indexée. Cela signifie qu'il ne peut y avoir qu'un maximum de 256 couleurs différentes dans le fichier. Cela semble être une petite somme, et ça l'est.
Les images GIF peuvent également être animées et transparentes.
Avantages: logos, dessins au trait et autres images simples qui doivent être petites. Seulement vraiment utilisé pour les sites Web.
JPEG - Lossy/Direct
Les images JPEG ont été conçues pour produire des images photographiques détaillées aussi petites que possible en supprimant les informations que l'œil humain ne remarquera pas. En conséquence, il s'agit d'un format avec perte, et enregistrer le même fichier à plusieurs reprises entraînera la perte de plus de données au fil du temps. Il propose une palette de milliers de couleurs et convient donc parfaitement aux photographies. Toutefois, la compression avec perte le rend aussi mauvais pour les logos et les dessins au trait: non seulement elles auront un aspect flou, mais elles auront également une taille de fichier supérieure à celle des GIF!
Bon pour: Photographies. En outre, les gradients.
PNG-8 - Sans perte/Indexé
PNG est un format plus récent et PNG-8 (la version indexée de PNG) est un bon substitut pour les fichiers GIF. Malheureusement, il présente quelques inconvénients: Premièrement, il ne peut pas prendre en charge une animation comme le GIF (eh bien, il le peut, mais seul Firefox semble le supporter, contrairement à l’animation GIF qui est prise en charge par tous les navigateurs). Deuxièmement, il a des problèmes de support avec les anciens navigateurs comme IE6. Troisièmement, des logiciels importants comme Photoshop ont une mise en œuvre très médiocre du format. (Bon sang, Adobe!) PNG-8 ne peut stocker que 256 couleurs, comme les GIF.
Bon pour: La principale chose pour laquelle PNG-8 fait mieux que les GIF est de prendre en charge Alpha Transparency.
Remarque importante: Photoshop ne prend pas en charge la transparence alpha pour les fichiers PNG-8. (Bon sang, Photoshop!) Il existe toutefois des moyens de convertir Photoshop PNG-24 en fichiers PNG-8 tout en conservant leur transparence. Une des méthodes est PNGQuant , une autre consiste à enregistrer vos fichiers avec Fireworks .
PNG-24 - Sans perte/Direct
PNG-24 est un excellent format qui associe un codage sans perte à une couleur directe (des milliers de couleurs, tout comme le format JPEG). Cela ressemble beaucoup à BMP à cet égard, sauf que PNG compresse réellement les images, ce qui donne des fichiers beaucoup plus petits. Malheureusement, les fichiers PNG-24 seront toujours beaucoup plus volumineux que les fichiers JPEG, GIF et PNG-8. Vous devez donc toujours vous demander si vous souhaitez vraiment en utiliser un.
Même si les PNG-24 autorisent des milliers de couleurs avec compression, ils ne sont pas destinés à remplacer les images JPEG. Une photo enregistrée au format PNG-24 sera probablement au moins 5 fois plus grande que l’image JPEG équivalente, avec très peu d’amélioration de la qualité visible. (Bien entendu, cela peut être un résultat souhaitable si vous n'êtes pas préoccupé par la taille du fichier et souhaitez obtenir la meilleure qualité d'image possible.)
Tout comme PNG-8, PNG-24 prend également en charge la transparence alpha.
J'espère que ça aide!
PNGdoit être utilisé lorsque:
- Vous avez besoin de transparence (transparence 1 bit ou alpha)
- La compression sans perte fonctionnera bien (comme pour un graphique, un logo ou une image générée par ordinateur)
JPEGdoit être utilisé lorsque:
- La compression sans perte ne fonctionnera pas bien (comme une photo)
- La couleur est nécessaire
GIFdevrait être quand:
- Le format PNG n'est pas disponible, comme sur les très vieux logiciels ou les navigateurs
- L'animation est nécessaire
Malgré des mythes contraires, la PNG surpasse le GIF dans la plupart des domaines. Le format PNG peut prendre en charge tous les modes d’image GIF, à l’exception de l’animation, et avec le même mode d’image, la compression sera meilleure grâce à son algorithme DEFLATE supérieur à celui de LZW. Le format PNG peut également prendre en charge d’autres modes que le format GIF, tels que la couleur 24 bits et la transparence alpha, mais c’est là que vous pouvez rencontrer des problèmes sur le Web. La transparence alpha présente des problèmes de compatibilité avec IE6 qui sont bien documentés (bien que des hacks existent pour se déplacer).
Les modes PNG incluent (ceci est juste un petit sous-ensemble)
- Palette de couleurs de 2 à 256 couleurs (comme GIF)
- Palette de couleur de 2 à 256 couleurs, avec une couleur transparente (comme GIF)
- Couleur vraie (couleur 24 bits)
- Couleur vraie avec canal alpha (couleur 24 bits + transparence alpha 8 bits)
Pour une compression optimale en format PNG pour le Web, utilisez toujours un mode palette. Si vous trouvez que les fichiers PNG sont plus volumineux que les fichiers GIF équivalents, vous devez alors enregistrer le fichier PNG en couleurs 24 bits et le format GIF en mode palette (car un fichier GIF est toujours en mode palette). Essayez d'abord de convertir en mode palette.
Si vous constatez que vos fichiers PNG avec transparence ne fonctionnent pas correctement dans IE6 alors que vos fichiers GIF le sont, vous utilisez une transparence 24 bits couleur + alpha en mode PNG et en mode palette avec une couleur transparente avec GIF. Vous devrez vous assurer que vous convertissez votre fichier PNG en un mode de couleur avec palette avec une couleur transparente.
Le format PNG comporte également d’autres modes tels que la couleur de la palette avec une transparence alpha dans la palette. Des modes tels que celui-ci ne peuvent pas être utilisés dans Photoshop.
Essayez de regarder ce site http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp
Ils essaient d'expliquer quoi utiliser quand
Si vous stockez ou présentez un grand nombre d'images, le nouveau format Google WebP peut être utile, car il est 25% plus petit que PNG/JPG . Notez que cela n'est pas pris en charge par tous les navigateurs. NB. Cela a été publié en 2010 après la publication de cette question.
FORMAT DE FICHIER JPEG
- Idéal pour les images lorsque vous devez conserver une taille petite
- Bonne option pour les photographies
- Mauvais pour les logos, les dessins au trait et les larges zones de couleur unie
FORMAT DE FICHIER GIF
- Idéal pour les effets animés
- Belle option pour les cliparts, les graphiques plats et les images utilisant des couleurs minimales et des lignes précises
- Bonne option pour les logos simples avec des blocs de couleurs
Format de fichier PNG
- Sans perte
- Excellent choix lorsque la transparence est indispensable
- Bonne option pour les logos et les dessins au trait
- Pas supporté partout
Vous pouvez voir cette infographie pour des informations plus détaillées, Types de fichiers image: Quand utiliser JPEG, GIF & PNG