Format Imej Dijelaskan: JPEG, PNG, WebP, GIF, SVG, AVIF

Dikemaskini kali terakhir: June 27, 2026

Tiada satu format imej terbaik—setiap satunya wujud kerana ia menyelesaikan masalah yang berbeza. JPEG memampatkan foto, PNG mengekalkan tepi tajam dan ketelusan, WebP dan AVIF mengecilkan foto lebih jauh lagi, SVG boleh diskalakan tanpa piksel, dan GIF menganimasikan. Memilih yang tepat adalah keputusan kandungan, bukan pilihan peribadi. Panduan ini merangkumi apa yang dilakukan oleh setiap format, dengan saiz fail sebenar yang diukur daripada satu imej sumber.

Jawapan ringkas: format mana yang patut anda gunakan?

Padankan format dengan kandungan imej dan tempat ia dipaparkan:

Untuk pecahan terperinci format berbanding format, lihat perbandingan AVIF vs WebP vs JPEG.

Bagaimana perbandingan format ini?

Perbezaan saiz fail adalah besar dan konsisten. Diukur pada satu foto 1400×933:

Saiz 853 KB bagi PNG adalah yang paling ketara: penyimpanan tanpa kehilangan (lossless) foto memerlukan kos kira-kira 8× lebih banyak daripada JPEG dan 19× lebih banyak daripada AVIF. Itulah sebabnya mengapa PNG tidak sesuai untuk foto halaman penuh walaupun secara teknikal ia mampu menyimpannya.

JPEG — Format Utama Fotografi

JPEG (1992) ialah format kehilangan (lossy) untuk fotografi. Ia membuang perincian frekuensi tinggi yang hampir tidak dapat dilihat oleh mata, itulah sebabnya ia mengecilkan foto secara dramatik tetapi mengaburkan teks tajam dan garisan nipis.

• Sesuai untuk: foto, gradien, pemandangan dunia sebenar yang kompleks.
• Elakkan untuk: teks, tangkapan skrin UI, seni garis tajam, apa-apa sahaja yang memerlukan ketelusan (JPEG tiada saluran alfa).
• Berhati-hati dengan: artefak blok 8×8 yang kelihatan di bawah kualiti ~70.

Gunakan kualiti 80–85 untuk foto web. Lihat cara mampatkan JPEG.

PNG — tepi tajam dan ketelusan

PNG adalah tanpa kehilangan data dan menyokong saluran alfa penuh, jadi ia mengekalkan setiap piksel dan sebarang ketelusan. Kosnya ialah saiz fail: ia tidak mampatkan fotografi dengan baik.

• Terbaik untuk: grafik dengan tepi tajam, teks, logo, tangkapan skrin UI, imej transparan.
• Elakkan untuk: fotografi halaman penuh (gunakan WebP/AVIF/JPEG pula — lihat jadual di atas).
• Berhati-hati dengan: fail yang sangat besar pada foto. Kurangkan dengan PNG-8 (≤256 colors) untuk grafik rata.

Untuk spesifikasi ketelusan, lihat cara membuat imej transparan.

WebP — lalai web moden

WebP (2010) melakukan kehilangan dan tanpa kehilangan, menyokong alpha, dan mengatasi JPEG sebanyak ~25–35% pada kualiti yang sepadan. Sokongan pelayar moden adalah ~98%.

• Paling sesuai untuk: fotografi web dan imej web lutsinar di mana bait penting.
• Elakkan untuk: e-mel dan klien yang sangat lama (gunakan JPEG/PNG fallback).
• Sediakan dengan: fallback JPEG/PNG dalam elemen <picture>.

AVIF — foto terkecil

AVIF (2019) menggunakan alat intra-frame codec video AV1 dan mengatasi WebP dengan 20–30% lagi. Sokongan adalah ~96% dan terus meningkat.

• Sesuai untuk: fotografi di mana bait terkecil adalah penting (imej hero, LCP).
• Elakkan untuk: apabila anda tidak mampu melakukan pengekodan yang perlahan, atau untuk pelayar paling lama (gunakan fallback <picture>).
• Berhati-hati dengan: kesan kabur tekstur halus pada kualiti yang sangat rendah (<q40).

SVG — vektor yang boleh diskalakan

SVG ialah format vektor: ia menyimpan bentuk, bukan piksel, jadi ia boleh diskalakan ke sebarang saiz tanpa kehilangan ketajaman dan sangat kecil untuk seni ringkas.

• Sesuai untuk: logo, ikon, ilustrasi ringkas, apa-apa sahaja yang mesti diskalakan.
• Elakkan untuk: fotografi (SVG tidak boleh mewakilkan dengan cekap).
• Berhati-hati dengan: kerumitan — SVG yang terperinci boleh menjadi besar; rasterisasi jika perlu.

GIF — Warisan Animasi

GIF menganimasikan dan menyokong transparansi 1-bit, tetapi ia terhad kepada 256 warna dan jauh lebih besar daripada format animasi moden untuk kandungan yang sama.

• Terbaik untuk: tiada perkara moden — gantikannya dengan WebP atau AVIF animasi.
• Elakkan untuk: apa-apa yang kritikal warna (had 256 warna) atau sensitif saiz.
• Berhati-hati dengan: fail besar; GIF 3 saat selalunya lebih besar daripada MP4 klip yang sama.

Bagaimana anda memilih di bawah tekanan?

Gunakan aliran keputusan ringkas ini:

1. Adakah ia foto? → WebP/AVIF (dengan sandaran JPEG).
2. Adakah ia memerlukan ketelusan? → PNG atau WebP (alpha).
3. Adakah ia logo/ikon/ilustrasi yang boleh diskalakan? → SVG.
4. Adakah ia teks/UI tajam? → PNG.
5. Adakah ia animasi? → WebP/AVIF Beranimasi, bukan GIF.
6. Adakah ia untuk emel? → JPEG atau PNG (tiada WebP/AVIF).

Bagi hampir setiap foto web, jawapannya kini adalah "WebP atau AVIF dengan sandaran JPEG." JPEG kekal hanya kerana keserasian sejagat, bukan kerana ia pilihan terbaik.

Bagaimana cara menyajikan pelbagai format?

Gunakan elemen <picture> supaya setiap pelayar mendapat format terbaik yang disokong:

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

Pelayar akan memilih jenis pertama yang disokong dan mengabaikan selebihnya. Sentiasa kekalkan <img> sebenar dengan src JPEG sebagai sandaran terakhir. Lihat panduan format imej di MDN untuk jadual sokongan pelayar semasa.

Kesilapan Biasa

• Menggunakan PNG untuk foto. Ia berfungsi tetapi failnya adalah 8–19× lebih besar daripada yang diperlukan.
• Menggunakan JPEG untuk teks atau logo. Pemampatan mengaburkan tepi tajam. Gunakan PNG atau SVG.
• Menyediakan satu format tanpa sandaran (fallback). AVIF/WebP memerlukan sandaran JPEG untuk klien lama.
• Menggunakan animasi dengan GIF. WebP/AVIF beranimasi jauh lebih kecil dan menyokong lebih banyak warna.
• Mengabaikan SVG untuk logo. Logo yang di-rasterize kabur pada DPI tinggi; SVG kekal tajam pada sebarang saiz.

Soalan Lazim

Format imej manakah yang patut saya gunakan?

Gunakan JPEG untuk fotografi, PNG untuk grafik dengan tepi tajam atau ketelusan, WebP sebagai lalai web moden (lebih kecil daripada kedua-duanya), AVIF untuk foto terkecil pada pelayar moden, dan SVG untuk logo serta ikon. Padankan format mengikut kandungan.

Adakah WebP lebih baik daripada JPEG?

Untuk penghantaran web, ya — WebP 25 hingga 35 peratus lebih kecil pada kualiti yang sama dan disokong dalam semua pelayar semasa. Kekalkan JPEG sebagai sandaran hanya untuk pelayar yang sangat lama. Lihat panduan penukar WebP.

Bila saya patut menggunakan AVIF?

Apabila anda boleh menyulitkannya dan audiens anda kebanyakannya menggunakan pelayar moden — AVIF kira-kira 50 peratus lebih kecil daripada JPEG. Pertukaran yang perlu dibuat ialah penyulitan yang lebih perlahan dan jurang pada pelayar yang lebih lama. Hantar AVIF dengan sandaran WebP melalui elemen <picture>.

Adakah PNG menyokong ketelusan?

Ya — PNG mempunyai saluran alfa penuh, itulah sebabnya ia adalah format untuk grafik dan logo dengan ketelusan. JPEG tidak menyokong ketelusan. WebP dan AVIF juga menyokong alpha, pada saiz yang lebih kecil untuk penghantaran web.

Format manakah yang paling kecil untuk foto?

AVIF (paling kecil pada pelayar moden), kemudian WebP, kemudian JPEG. PNG adalah yang terbesar untuk foto kerana ia tidak kehilangan data (lossless). Untuk penghantaran web, WebP adalah lalai selamat; AVIF apabila anda boleh menyulitkannya dan audiens anda menggunakan pelayar moden.

Apakah format imej terkecil?

AVIF untuk foto pada pelayar moden (kira-kira 50 peratus lebih kecil daripada JPEG), kemudian WebP. PNG adalah yang terbesar untuk foto kerana ia tidak kehilangan data (lossless). Untuk grafik dengan ketelusan, WebP atau AVIF mengatasi PNG. Padankan format mengikut kandungan dan sokongan pelayar audiens anda.

Apakah perbezaan antara lossy dan lossless?

Lossless (PNG, WebP tanpa kehilangan data) mengekalkan setiap piksel dengan tepat dan boleh dipulihkan sepenuhnya — tiada kualiti yang hilang. Lossy (JPEG, WebP lossy, AVIF) membuang perincian yang paling kurang diperhatikan oleh mata untuk mengecilkan fail, dan kehilangan itu kekal. Lossy menang dari segi saiz untuk foto; lossless menang dari segi kualiti untuk grafik, teks, dan master yang akan anda sunting semula. Pilih mengikut kandungan.

Apakah format terkecil untuk grafik dengan ketelusan?

WebP atau AVIF, kedua-duanya menyokong saluran alfa dan mampat jauh lebih kecil daripada PNG. Untuk logo dan ikon pada pelayar moden, WebP atau AVIF mengecilkan saiz fail secara mendadak berbanding PNG sambil mengekalkan ketelusan. Hantarkan dengan sandaran PNG melalui elemen <picture> untuk pelayar yang lebih lama yang tidak mempunyai sokongan.

Kredit Imej

• Perbandingan saiz format dan carta palang — dijana oleh penulis daripada foto gaya e-dagang (Pexels #16675632, photo by Mikael Blomkvist) untuk menunjukkan saiz fail sebenar yang diukur merentasi PNG, JPEG, WebP, dan AVIF.