Cinq éléments d'un traitement d'image parfait dans la conception Web
Auteur：Eve Cole
Date de mise à jour：2009-06-20 16:51:39
1. Format : Le format PNG est préféré pour les images aux formes simples générées par ordinateur (comme les logos et les icônes), tandis que les photos aux couleurs riches doivent être au format JPEG. S'il y a peu de couleurs et aucun dégradé, le format GIF doit être utilisé.
GIF est le format d’image Web le plus couramment utilisé. GIF peut contenir jusqu'à 256 couleurs et fonctionne avec presque toutes les images, à l'exception des photos. Il a également la capacité de générer des animations simples et des images transparentes.
Le format PNG est relativement nouveau et est également un format recommandé par le W3C. PNG-8 peut contenir jusqu'à 256 couleurs, comparables au GIF ; PNG-24 prend en charge le mode RVB, qui peut exprimer n'importe quelle couleur avec une qualité supérieure ; PNG-32 ajoute un canal alpha basé sur PNG-24, qui peut être défini comme transparent.
JPEG peut enregistrer environ 16,7 millions de couleurs et est souvent utilisé pour enregistrer des photos. Mais à part ça, le JPEG n’est presque jamais utilisé. Si l'image comporte moins de 256 couleurs ou contient de grandes zones de couleurs unies, JPEG ne fonctionnera pas correctement : la taille du fichier peut être doublée pour obtenir une image de haute qualité.
Lors du choix d'un format d'image, vous devez tenir compte de manière exhaustive de son champ d'utilisation, tel que la couleur, la transparence, l'animation, etc., comme détaillé ci-dessous. Différents paramètres peuvent être comparés via l'assistant d'exportation de Photoshop ou Fireworks. Le critère de sélection est que la taille du fichier doit être aussi petite que possible tout en conservant une qualité d'image acceptable.
2. Les images de création de couleurs doivent utiliser le mode RVB et non le mode CMJN pour l'impression. Ne vous inquiétez pas des couleurs sécurisées pour le navigateur, car presque plus personne n'utilise de moniteurs 8 bits. La sélection des couleurs doit se référer à des normes unifiées, telles que les systèmes d'identité visuelle (VI). Le nombre et l'effet des couleurs sont des facteurs importants pour déterminer le format de l'image. Par exemple, les dégradés de couleurs produisent souvent un grand nombre de couleurs. S'ils sont enregistrés au format GIF, une distorsion se produira et la taille du fichier augmentera également de manière significative. devrait envisager d’utiliser le format PNG-24, PNG-32 ou JPEG.
3. Taille Les images produites à l'aide d'outils de création vectorielle peuvent souvent être enregistrées au format PNG et leur taille doit être déterminée dans l'outil de dessin vectoriel. Une fois converties en bitmap, elles ne peuvent pas être facilement mises à l'échelle (en particulier, elles ne doivent pas être agrandies). ). Il convient de noter que les fichiers PNG créés dans Fireworks contiennent des informations modifiables telles que des calques, et que les lignes, les formes et le texte qu'ils contiennent sont tous des graphiques vectoriels. L'application d'une telle image à une page Web doit d'abord effectuer une opération de sortie pour compresser la taille du fichier, et l'image PNG de sortie sera également convertie en bitmap car les informations modifiables sont perdues. Par conséquent, l’ajustement de la taille de l’image doit être terminé avant l’opération de sortie. Le bitmap n'est pas mis à l'échelle pour garantir que les contours et les dégradés de l'image soient suffisamment clairs.
Pour les bitmaps et les photos existantes, vous devez utiliser Photoshop et d'autres logiciels pour ajuster la taille avant de les insérer dans la page Web au lieu d'utiliser les attributs de largeur et de hauteur du langage HTML pour modifier la taille de l'image. L'utilisation directe du langage HTML pour contrôler la taille de l'image peut entraîner de graves distorsions de l'image.
Généralement, les images placées sur les pages Web doivent être contrôlées à une taille relativement petite. Si elle est mélangée avec du texte, la largeur doit être d'environ 300 px. Même s'il apparaît seul, la largeur doit être inférieure à 600 px. Quant à la hauteur, il convient de ne pas dépasser un écran.
4. Transparent GIF et PNG prennent tous deux en charge la transparence, mais de différentes manières. GIF définit simplement une ou plusieurs couleurs comme étant complètement transparentes, sans tenir compte de la transparence des couleurs dégradées adjacentes. Cela signifie que si la couleur de fond change de manière significative (ou contient plusieurs couleurs contrastées), la transition vers la partie transparente ne sera pas fluide et il y aura une ligne de démarcation évidente. Si vous souhaitez créer un GIF transparent, il est nécessaire de définir la couleur d'arrière-plan du canevas pour qu'elle soit identique (ou proche) à la couleur d'arrière-plan de l'effet cible. PNG n’a pas ce problème et peut également être configuré pour être translucide.
Cependant, IE6 ne peut pas afficher correctement les fichiers PNG transparents par défaut et des mesures appropriées doivent être prises.
5. Les animations sur les pages Web animées incluent généralement Flash et GIF animés. Flash possède des fonctions puissantes, des effets riches, une qualité d'image élevée et un logiciel de création puissant. C'est la forme d'animation Web préférée dans la plupart des cas. L'inconvénient du GIF animé est qu'il ne peut utiliser que 256 couleurs maximum et qu'il est difficile de créer des animations avec des effets complexes. Cependant, son avantage est que le fichier est petit et peut être lu dans n'importe quel navigateur ancien ou moderne sans plug-in. -en soutien.
