HTML 페이지의 이미지 형식 선택에 대한 나의 의견_경험 교환

오늘 한 학생이 저에게 물었습니다. 페이지에 GIF 형식을 사용하고 있는데 왜곡이 너무 심해요. 어떻게 해야 하나요? 이 문제는 상대적으로 간단합니다. JPG를 사용하면 됩니다. 페이지에서 일반적으로 사용하는 이미지 형식은 GIF, JPG, PNG의 세 가지입니다. 그렇다면 이 세 가지 형식을 사용하려면 어떻게 해야 할까요? 내 경험을 바탕으로 이 세 가지 형식의 사용에 대한 내 의견을 몇 가지 이야기해 보겠습니다.

Jetons d'abord un coup d'œil aux explications plus formelles de plusieurs formats (remarque : le contenu suivant provient de Baidu) :

GIF signifie Graphics Interchange format, l'extension des images GIF. C'est un gif. Tous les navigateurs graphiques prennent désormais en charge le format GIF, et certains navigateurs graphiques ne reconnaissent que le format GIF. GIF est un format de couleurs indexées lorsque le nombre de couleurs est petit, le fichier généré est extrêmement petit. Ses principaux avantages sont :

Le format GIF prend en charge le fond transparent. Si la couleur d'arrière-plan d'une image GIF est définie sur transparente, elle sera combinée avec l'arrière-plan du navigateur pour générer une image non rectangulaire.
Le format GIF prend en charge l'animation. Avant l’émergence de l’animation Flash, l’animation GIF pouvait être considérée comme la seule forme d’animation sur les pages Web. Le format GIF peut combiner des images d'une seule image, puis lire chaque image tour à tour pour devenir une animation. Bien que tous les navigateurs graphiques ne prennent pas en charge l'animation GIF, les derniers navigateurs graphiques prennent déjà en charge l'animation GIF.
Le format GIF prend en charge la progression graphique. Progressif signifie que l'image apparaît progressivement à l'écran. Les images progressives apparaîtront à l'écran plus rapidement que les images non progressives, permettant aux visiteurs de connaître plus rapidement le contour de l'image.
Le format GIF prend en charge la compression sans perte. La compression sans perte est une méthode efficace pour compresser des images sans perdre les détails de l'image. Étant donné que le format GIF utilise une compression sans perte, il est plus adapté aux lignes, aux icônes et aux dessins.
Les défauts du format GIF sont également assez évidents. La couleur indexée est une relique de l'histoire. Les anciens jeux sous DOS utilisent presque sans exception la couleur indexée. Ce format aurait dû être éliminé depuis longtemps. Cependant, en raison des limitations de bande passante, le GIF est devenu populaire de l'ère DOS à l'ère Internet. Le plus gros inconvénient du format GIF indexé est qu’il ne contient que 256 couleurs, ce qui n’est évidemment pas suffisant pour des images de qualité photo.

JPEG signifie Joint Photographic Experts Group (Joint Photographic Experts Group). Ce format est souvent écrit en JPG, et l'extension des images JPG est jpg.

Le principal avantage du JPG est qu'il peut prendre en charge des millions de couleurs, il peut donc être utilisé pour exprimer des photos. De plus, comme les images JPG utilisent un algorithme de compression avec perte plus efficace, la longueur du fichier est plus petite et le temps de téléchargement est plus court. La compression avec perte abandonne certains détails de l'image pour réduire la taille du fichier. Son taux de compression est assez élevé. Grâce à un outil de compression JPG spécial, le taux de compression peut atteindre 180:1 et la qualité de l'image ne sera pas trop endommagée du point de vue de la navigation, ce qui facilite grandement la transmission réseau et l'échange de fichiers sur disque. JPG est meilleur pour les photos que GIF car la perte de certains détails de la photo n'est pas aussi évidente qu'avec le dessin au trait. De plus, JPG a un taux de compression des photos plus élevé et la qualité finale est meilleure.

Mais à long terme, avec l'amélioration continue de la bande passante et le développement des supports de stockage, JPG devrait également être un format d'image éliminé, car une compression avec perte entraînera des pertes irrécupérables sur l'image. Par conséquent, les images JPG compressées ne conviennent généralement pas à l’impression et il est préférable de ne pas utiliser JPG lors de la sauvegarde d’images importantes. De plus, JPG n'est pas aussi flexible que les images GIF. Il ne prend pas en charge les dégradés graphiques, la transparence d'arrière-plan ou l'animation.

PNG est un format de stockage de fichiers image développé au milieu des années 1990. Son objectif est de remplacer les formats de fichiers GIF et TIFF tout en ajoutant certaines fonctionnalités que le format de fichier GIF n'a pas. Le nom PNG (Portable Network Graphic Format) vient du mot non officiel « PNG's Not GIF ». Il s'agit d'un format de stockage de fichiers bitmap, prononcé « ping ». Lorsque PNG est utilisé pour stocker des images en niveaux de gris, la profondeur de l'image en niveaux de gris peut atteindre 16 bits. Lors du stockage d'images couleur, la profondeur de l'image couleur peut atteindre 48 bits, et elle peut également stocker jusqu'à 16 bits de. données du canal alpha. PNG utilise un algorithme de compression de données sans perte dérivé de LZ77.

Le format de fichier PNG conserve les caractéristiques suivantes du format de fichier GIF :

Peut prendre en charge les images couleur avec 256 couleurs à l'aide d'une table de recherche de couleurs ou d'une palette.
Performances de lecture/écriture en streaming (streamabilité) : Le format de fichier image permet la lecture et l'écriture continue des données d'image
Cette fonctionnalité est très adaptée pour générer et afficher des images pendant la communication.
Affichage progressif : Cette fonctionnalité permet d'afficher le fichier image sur le terminal lors de la transmission du fichier image sur le lien de communication. Le contour complet est affiché puis les détails de l'image sont affichés progressivement. La résolution affiche l'image puis augmente progressivement sa résolution.
Transparence : Cette fonctionnalité permet de ne pas afficher certaines parties de l'image et est utilisée pour créer des images distinctives.
Informations auxiliaires : cette fonctionnalité peut être utilisée pour stocker certaines informations d'annotation de texte dans le fichier image.
Indépendant de l'environnement logiciel et matériel informatique.
Utilisez la compression sans perte.
Les fonctionnalités suivantes qui ne sont pas disponibles dans le format de fichier GIF seront ajoutées au format de fichier PNG :

Une image en vraies couleurs avec chaque pixel étant de 48 bits.
Chaque pixel est une image en niveaux de gris de 16 bits.
Le canal Alpha peut être ajouté aux images en niveaux de gris et aux images en vraies couleurs.
Ajoutez des informations gamma de l'image.
Utilisez le code de redondance cyclique (CRC) pour détecter les fichiers endommagés.
Méthode d'affichage par approximation successive pour accélérer l'affichage de l'image.
Boîte à outils de lecture/écriture standard.
Peut stocker plusieurs images dans un seul fichier.
Structure des fichiers

Ces trois formats ont leurs propres avantages et inconvénients, parmi lesquels PNG présente de nombreux avantages. Bien que sa popularité soit encore très générale, ses avantages particuliers nous ont particulièrement intéressés. Au moins, j'aime ce format maintenant. Bien entendu, pour ceux qui créent la page, la taille totale de la page est une question de compétitivité. Il faut donc encore faire attention à l’usage mixte de ces trois formats. Alors, quand utiliser GIF, quand utiliser PNG et quand utiliser JPG ? Analysons-les un par un ci-dessous.

Dans le travail réel, j'ai constaté que les graphiques généraux en couleur unie, tels que certaines petites icônes et arrière-plans en mosaïque, ont relativement peu de couleurs. Bien que le format GIF ne comporte que 256 couleurs, il ne peut pas gérer ce type de graphiques. . La photo doit être très appropriée. Bien sûr, nous n'excluons pas la richesse des couleurs de certaines petites icônes spéciales, mais je pense qu'en tant que petites icônes, une légère perte de couleur n'affectera pas l'effet visuel global. Par conséquent, la portée applicable du GIF est : petite. icônes, arrière-plans carrelés et autres couleurs Relativement peu de petites images.

Comment choisir une image aussi grande ? Tout d'abord, découvrons le JPG. Nos amis qui utilisent Photoshop savent tous que lors de l'exportation de l'image à la fin, il y aura un endroit pour choisir la qualité de l'image. cette image JPG, 100% Cela signifie aucune compression. Lorsque nous avons exporté la même image et l'avons comparée avec des images de qualité différente, nous avons constaté que celle de mauvaise qualité était évidemment beaucoup plus sale que celle de haute qualité, donc la photo avait l'air très mauvaise. Bien sûr, nous avons également constaté cette situation. Elle ressort toujours sur les images avec des blocs de couleur plus grands. Ainsi comme le ciel, le portrait. Des taches brunes disgracieuses apparaîtront notamment sur le visage des portraits. Bien sûr, si vous n’avez pas d’exigences strictes en matière de qualité photo, vous pouvez utiliser JPG et réduire la qualité. Mais cela ne s’applique pas aux arrière-plans et aux petites icônes.

Je pense personnellement que le PNG se situe quelque part entre le GIF et le JPG de haute qualité. Choisissez, si c'est le cas. est une simple petite icône, PNG sera un peu plus grand que GIF, mais la qualité est similaire. S'il s'agit d'une image ordinaire, le PNG est encore un peu plus petit que le JPG de haute qualité, mais le PNG présente encore une certaine perte de couleur. Cependant, il est pratiquement impossible de le voir si l’image n’est pas agrandie. Fondamentalement, nous ne créons pas de pages uniquement pour que les gens les magnifient et les critiquent. Le PNG est donc une option intermédiaire. Bien entendu, PNG présente également un grand avantage, à savoir la transparence, même si IE6 ne prenait pas en charge cette fonctionnalité auparavant. GIF a également de la transparence, mais GIF ne prend en charge que la transparence absolue et ne prend pas en charge la translucidité, il y a donc souvent un cercle de points blancs sur le bord de l'image GIF. PNG n'a pas ces problèmes. Avec l'évolution des temps, lorsque IE6 deviendra de l'histoire ancienne, je pense que nous pourrons voir la véritable puissance de PNG.

Bien sûr, il existe une situation particulière qui peut être très particulière, et c'est là que l'image d'arrière-plan et l'image de premier plan se rencontrent. Ce genre d'endroit nécessite une structure de couleur cohérente pour produire de bons effets visuels. Alors pour le moment, veillez à ne pas mélanger au maximum les différents formats.