Mon avis sur la sélection des formats d'images dans les pages html_Echange d'expériences

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

Mula-mula mari kita lihat penjelasan yang lebih formal tentang beberapa format (nota: kandungan berikut adalah daripada Baidu):

GIF bermaksud format Pertukaran Grafik, lanjutan imej GIF Ia adalah gif. Semua penyemak imbas grafik kini menyokong format GIF, dan sesetengah penyemak imbas grafik hanya mengenali format GIF. GIF ialah format warna yang diindeks Apabila bilangan warna kecil, fail yang dijana adalah sangat kecil:

Format GIF menyokong latar belakang telus. Jika warna latar belakang imej GIF ditetapkan kepada lutsinar, ia akan digabungkan dengan latar belakang penyemak imbas untuk menghasilkan imej bukan segi empat tepat.
Format GIF menyokong animasi. Sebelum kemunculan animasi Flash, animasi GIF boleh dikatakan sebagai satu-satunya bentuk animasi pada halaman web. Format GIF boleh menggabungkan imej bingkai tunggal dan kemudian memainkan setiap bingkai secara bergilir-gilir untuk menjadi animasi. Walaupun tidak semua pelayar grafik menyokong animasi GIF, pelayar grafik terkini sudah menyokong animasi GIF.
Format GIF menyokong perkembangan grafik. Progresif bermaksud gambar secara beransur-ansur muncul pada skrin.
Format GIF menyokong pemampatan tanpa kehilangan. Pemampatan tanpa kehilangan ialah kaedah yang berkesan untuk memampatkan imej tanpa kehilangan butiran imej Memandangkan format GIF menggunakan pemampatan tanpa kehilangan, ia lebih sesuai untuk garisan, ikon dan lukisan.
Kekurangan format GIF juga agak ketara. Warna diindeks adalah peninggalan sejarah permainan lama di bawah DOS hampir tanpa pengecualian menggunakan warna yang diindeks. Walau bagaimanapun, disebabkan oleh had lebar jalur, GIF menjadi popular dari era DOS hingga ke era Internet. Kelemahan terbesar GIF format warna diindeks ialah ia hanya mempunyai 256 warna, yang jelas tidak mencukupi untuk imej kualiti foto.

JPEG adalah singkatan daripada Joint Photograhic Experts Group (Joint Photographic Experts Group) Format ini selalunya ditulis sebagai JPG, dan sambungan imej JPG ialah jpg.

Kelebihan utama JPG ialah ia boleh menyokong berjuta-juta warna, jadi ia boleh digunakan untuk mengekspresikan foto. Di samping itu, kerana imej JPG menggunakan algoritma pemampatan lossy yang lebih cekap, panjang fail lebih kecil dan masa muat turun lebih pendek. Mampatan lossy memberikan beberapa butiran dalam imej untuk mengurangkan panjang fail. Nisbah mampatannya agak tinggi Menggunakan alat pemampatan JPG khas, nisbah mampatan boleh mencapai 180:1, dan kualiti imej tidak akan terlalu rosak dari perspektif penyemakan imbas, yang sangat memudahkan penghantaran rangkaian dan fail pertukaran cakera. JPG adalah lebih baik untuk foto daripada GIF kerana kehilangan beberapa butiran dalam foto tidak begitu jelas seperti seni garis. Selain itu, JPG mempunyai nisbah mampatan yang lebih besar untuk foto, dan kualiti akhir adalah lebih baik.

Tetapi dalam jangka masa panjang, dengan peningkatan jalur lebar yang berterusan dan pembangunan media storan, JPG juga harus menjadi format imej yang dihapuskan, kerana pemampatan yang hilang akan menyebabkan kehilangan yang tidak dapat dipulihkan pada imej. Oleh itu, imej JPG termampat secara amnya tidak sesuai untuk dicetak, dan sebaiknya jangan gunakan JPG semasa menyandarkan imej penting. Selain itu, JPG tidak sefleksibel seperti imej GIF Ia tidak menyokong kecerunan grafik, ketelusan latar belakang atau animasi.

PNG ialah format storan fail imej yang dibangunkan pada pertengahan 1990-an Tujuannya adalah untuk menggantikan format fail GIF dan TIFF sambil menambah beberapa ciri yang tidak ada pada format fail GIF. Nama Format Grafik Rangkaian Mudah Alih (PNG) berasal daripada "PNG's Not GIF" tidak rasmi Ia ialah format storan fail bitmap, disebut "ping". Apabila PNG digunakan untuk menyimpan imej skala kelabu, kedalaman imej skala kelabu boleh sehingga 16 bit Apabila menyimpan imej berwarna, kedalaman imej berwarna boleh sehingga 48 bit, dan ia juga boleh menyimpan sehingga 16 bit. data saluran alfa. PNG menggunakan algoritma pemampatan data tanpa kehilangan yang diperoleh daripada LZ77.

Format fail PNG mengekalkan ciri format fail GIF berikut:

Boleh menyokong imej berwarna dengan 256 warna menggunakan jadual carian warna atau palet.
Prestasi baca/tulis penstriman (kebolehstrim): Format fail imej membolehkan pembacaan dan penulisan data imej berterusan
Ciri ini sangat sesuai untuk menjana dan memaparkan imej semasa komunikasi.
Paparan progresif: Ciri ini membolehkan fail imej dipaparkan pada terminal semasa menghantar fail imej pada pautan komunikasi Keseluruhan garis besar dipaparkan dan kemudian butiran imej dipaparkan secara beransur-ansur Resolusi memaparkan imej dan kemudian secara beransur-ansur meningkatkan resolusinya.
Ketelusan: Ciri ini membenarkan bahagian tertentu imej tidak dipaparkan dan digunakan untuk mencipta beberapa imej tersendiri.
Maklumat sampingan: Ciri ini boleh digunakan untuk menyimpan beberapa maklumat anotasi teks dalam fail imej.
Bebas daripada perisian komputer dan persekitaran perkakasan.
Gunakan pemampatan tanpa kehilangan.
Ciri berikut yang tidak tersedia dalam format fail GIF akan ditambahkan pada format fail PNG:

Imej berwarna benar dengan setiap piksel ialah 48 bit.
Setiap piksel ialah imej skala kelabu 16-bit.
Saluran alpha boleh ditambah pada imej skala kelabu dan imej warna sebenar.
Tambah maklumat gamma imej.
Gunakan kod redundansi kitaran (CRC) untuk mengesan fail yang rosak.
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 de 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 contienne que 256 couleurs, il ne convient pas à ce type de contenu. graphiques. L’image 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 n'est pratiquement pas visible 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.