Apa format grafik web yang digunakan?

Situs web dapat berisi format grafik JPEG, GIF, PNG, SVG. Yang mana yang harus digunakan, dan kapan?

Kapan menggunakan JPG

• citra fotografi
• ketika kompresi tidak masalah

Kapan harus menggunakan PNG

• ketika Anda membutuhkan transparansi
• ketika Anda memiliki pola (latar belakang)

Kapan menggunakan GIF

• ketika Anda membutuhkan animasi yang kompatibel ke belakang *
• ketika gambar terutama terdiri dari hanya segelintir warna (2-16) **
• ketika Anda tidak membutuhkan transparansi dan pola (walaupun png lebih disukai)

_{* Dengan munculnya animasi CSS sebagai pilihan yang layak untuk hampir semua browser , penggunaan format .GIF semakin sedikit format masuk untuk animasi web. .jpg,, .pngdan .gifsemuanya dapat diatur untuk memiliki fitur "animasi" dengan penggunaan CSS. Meskipun gif animasi dapat digunakan secara menarik dalam desain web dalam skenario kasus tertentu, pengecualian jarang terjadi, jadi cenderung terbaik untuk menghindarinya.}

_{** ( .gifgambar dibatasi hanya 256 warna dalam paletnya.)}

(dimigrasikan dari pertanyaan rangkap)

Ini sepenuhnya tergantung pada jenis gambar yang ingin Anda simpan.

• PNG adalah format kompresi lossless yang paling cocok untuk grafik bitmap "seperti vektor" (yaitu grafik dengan area besar dan teratur dengan warna yang sama dan tepi yang jelas; gambar yang mengandung teks jernih).

• SVG adalah format vektor , paling cocok untuk memuat grafik vektor (singkatnya, koleksi elemen geometris alih-alih koleksi piksel). SVG adalah scalable tanpa batas, sementara grafik bitmap kehilangan kualitas ketika diperbesar.

• JPG adalah format kompresi lossy (antara lain, ia menghilangkan nuansa pada gambar yang tidak terlihat oleh mata manusia untuk menghemat ruang penyimpanan). Ini paling cocok untuk foto; karena metode kompresinya, tidak cocok untuk ilustrasi vektor atau teks.

Kompatibilitas browser:

• PNG Graphics didukung di seluruh browser, dengan pengecualian IE 6 jika PNG berisi transparansi alpha (bagian transparan akan ditampilkan sebagai abu-abu solid), dan semua versi IE jika PNG berada di dalam elemen HTML dengan opacity kurang dari 100 % (tapi itu kasus tepi).

• SVG belum selalu menjadi pilihan karena dukungan browser tidak 100% saat ini . Mungkin juga ada perbedaan perilaku lainnya dengan <img>tag normal . Gunakan ini hanya jika Anda tahu apa yang Anda lakukan.

• JPG standar didukung di semua browser selama disimpan dalam mode RGB daripada CMYK (jika program Anda tidak membuat perbedaan, itu mungkin adalah default).

Anda harus mengetahui beberapa faktor kunci ...

Pertama, ada dua jenis kompresi: Lossless dan Lossy .

• Lossless berarti gambar dibuat lebih kecil, tetapi tidak merugikan kualitasnya.
• Rugi berarti gambar dibuat (bahkan) lebih kecil, tetapi merugikan kualitas. Jika Anda menyimpan gambar dalam format Lossy berulang kali, kualitas gambar akan semakin buruk.

Ada juga kedalaman warna yang berbeda (palet): Warna yang diindeks dan warna langsung .

• Diindeks berarti gambar hanya dapat menyimpan sejumlah warna (biasanya 256), dikendalikan oleh penulis, dalam sesuatu yang disebut Peta Warna
• Langsung berarti Anda dapat menyimpan ribuan warna yang belum dipilih langsung oleh penulis

BMP - Lossless / Diindeks dan Langsung

Ini adalah format lama. Itu Lossless (tidak ada data gambar yang hilang pada save) tetapi ada juga sedikit atau tidak ada kompresi sama sekali, yang berarti menyimpan karena BMP menghasilkan ukuran file yang SANGAT besar. Ini dapat memiliki palet baik Indexed dan Direct, tapi itu sedikit menghibur. Ukuran file sangat besar sehingga tidak ada yang pernah benar-benar menggunakan format ini.

Baik untuk: Tidak ada yang benar-benar. Tidak ada apa pun yang unggul di BMP, atau tidak dilakukan dengan lebih baik oleh format lain.

GIF - Lossless / Indexed saja

GIF menggunakan kompresi lossless, artinya Anda dapat menyimpan gambar berulang kali dan tidak pernah kehilangan data apa pun. Ukuran file jauh lebih kecil daripada BMP, karena kompresi yang baik sebenarnya digunakan, tetapi hanya dapat menyimpan palet yang diindeks. Ini berarti bahwa untuk sebagian besar kasus penggunaan , hanya ada maksimal 256 warna berbeda dalam file. Itu terdengar seperti jumlah yang sangat kecil, dan memang begitu.

Gambar GIF juga dapat dianimasikan dan memiliki transparansi.

Baik untuk: Logo, gambar garis, dan gambar sederhana lainnya yang perlu kecil. Hanya benar-benar digunakan untuk situs web.

JPEG - Rugi / Langsung

Gambar JPEG dirancang untuk membuat gambar foto terperinci sekecil mungkin dengan menghapus informasi yang tidak dilihat oleh mata manusia. Sebagai hasilnya adalah format Lossy, dan menyimpan file yang sama berulang-ulang akan menghasilkan lebih banyak data yang hilang dari waktu ke waktu. Ini memiliki palet ribuan warna dan sangat bagus untuk foto, tetapi kompresi yang hilang berarti buruk untuk logo dan gambar garis: Tidak hanya akan terlihat kabur, tetapi gambar tersebut juga akan memiliki ukuran file yang lebih besar dibandingkan dengan GIF!

Baik untuk: Foto-foto. Juga, gradien.

PNG-8 - Lossless / Indexed

PNG adalah format yang lebih baru, dan PNG-8 (versi PNG yang diindeks) benar-benar merupakan pengganti yang baik untuk GIF. Sayangnya, ia memiliki beberapa kelemahan: Pertama tidak dapat mendukung animasi seperti GIF dapat (well it can, tetapi hanya Firefox yang tampaknya mendukungnya, tidak seperti animasi GIF yang didukung oleh setiap browser). Kedua, ia memiliki beberapa masalah dukungan dengan browser lama seperti IE6. Ketiga, perangkat lunak penting seperti Photoshop memiliki implementasi format yang sangat buruk. (Sialan Anda, Adobe!) PNG-8 hanya dapat menyimpan 256 warna, seperti GIF.

Baik untuk: Hal utama yang PNG-8 lakukan lebih baik daripada GIF adalah memiliki dukungan untuk Transparansi Alpha.

Catatan Penting: Photoshop akhirnya menambahkan dukungan untuk transparansi alfa di versi terbaru mereka. Jika Anda memiliki yang lebih lama, ada beberapa cara untuk mengonversi file Photoshop PNG-24 ke PNG-8 sambil tetap mempertahankan transparansi. Salah satu metode adalah PNGQuant , yang lain adalah menyimpan file Anda dengan Fireworks .

PNG-24 - Lossless / Langsung

PNG-24 adalah format hebat yang menggabungkan pengkodean Lossless dengan warna langsung (ribuan warna, seperti halnya JPEG). Ini sangat mirip BMP dalam hal itu, kecuali bahwa PNG benar-benar memampatkan gambar, sehingga menghasilkan file yang jauh lebih kecil. Sayangnya file PNG-24 masih akan jauh lebih besar daripada JPEG, GIF dan PNG-8, jadi Anda masih perlu mempertimbangkan apakah Anda benar-benar ingin menggunakannya.

Meskipun PNG-24 memungkinkan ribuan warna saat memiliki kompresi, mereka tidak dimaksudkan untuk menggantikan gambar JPEG. Sebuah foto yang disimpan sebagai PNG-24 kemungkinan akan setidaknya 5 kali lebih besar dari gambar JPEG yang setara, dengan sedikit peningkatan kualitas yang terlihat. (Tentu saja, ini mungkin hasil yang diinginkan jika Anda tidak khawatir tentang filesize, dan ingin mendapatkan kualitas gambar terbaik yang Anda bisa.)

Sama seperti PNG-8, PNG-24 juga mendukung transparansi alpha.

SVG - Lossless / Vector

Jenis file yang saat ini semakin populer adalah SVG, yang berbeda dari semua yang di atas dalam format file vektor (di atas semua raster ). Ini berarti bahwa sebenarnya terdiri dari garis dan kurva bukan piksel. Saat Anda memperbesar gambar vektor, Anda masih melihat kurva atau garis. Ketika Anda memperbesar gambar raster, Anda akan melihat piksel.

Sebagai contoh:

Ini berarti SVG sangat cocok untuk logo dan ikon yang Anda ingin mempertahankan ketajaman pada layar Retina atau pada ukuran yang berbeda.

Selain itu, file SVG ditulis menggunakan XML, dan dengan demikian dapat dibuka dan diedit dalam editor teks, sehingga dapat dimanipulasi dengan cepat, jika Anda mau. Misalnya, Anda dapat menggunakan JavaScript untuk mengubah warna ikon SVG di situs web seperti halnya Anda menulis teks (mis. Tidak perlu untuk gambar kedua).

Saya harap itu membantu!

JPG:

Keuntungan :

• Banyak level kompresi berbeda yang tersedia
• Mudah dimanipulasi dengan semua editor gambar

Ketidaknyamanan:

• Artefak kompresi

Penggunaan:

• Foto besar atau gambar dengan banyak warna
• Ketika kompresi tinggi diperlukan

PNG:

Keuntungan :

• Transparansi dengan alpha!
• Banyak warna
• Dapat mengganti jpg

Ketidaknyamanan:

• Kompresi kurang dari JPG (tapi tidak terlalu banyak)
• Tidak kompatibel dengan IE6 (dan 7 saya percaya) - harus menggunakan patch atau hack untuk ini. Tapi siapa peduli? A harus menggunakan;)

Penggunaan:

• Foto / gambar kecil atau sedang dengan banyak warna
• A harus digunakan jika Anda ingin transparansi gradien
• Ikon
• Logo

GIF:

Keuntungan :

• Dapat dianimasikan
• Sangat ringan jika Anda hanya menggunakan beberapa warna (seperti 8 - 16 atau 32 warna berbeda)
• Transparansi

Ketidaknyamanan:

• Tidak dapat memiliki lebih dari 255 warna.
• Animasi gif dapat membuat orang lari
• Tidak ada alfa untuk transparansi (transparan atau tidak!)

Penggunaan:

• Animasi gif (Saya menggunakannya terutama di buletin)
• Ikon
• Favicon animasi \ o /
• Logo

Situs web dapat berisi format grafik JPEG, GIF, PNG, SVG. Yang mana yang harus digunakan, dan kapan?

Untuk foto:

JPEG jika tidak perlu transparansi. PNG untuk grafik foto yang membutuhkan transparansi.

Meskipun tidak 100% benar, itu aturan praktis yang bagus. Lihat jawaban lain untuk pertanyaan ini untuk mempelajari lebih lanjut tentang format lain. Juga, periksa format gambar raster mana yang lebih baik untuk menampilkan gambar secara digital ketika tidak ada transparansi; JPEG atau PNG? dan pilihan tag format file kami , seperti jpeg , png , gif & svg untuk mengetahui lebih lanjut.

Untuk grafis:

SVG dengan PNG / JPEG Fallback.

Sama sekali tidak ada alasan untuk tidak menyediakan SVG di zaman sekarang ini. Mereka diimplementasikan dalam cara yang hampir sama persis seperti gambar normal, dan jauh lebih fleksibel.

Jadi, alur kerja untuk setiap perancang situs web modern belum sepenuhnya berubah, itu telah diperbarui. Anda masih mempersiapkan dan melayani PNG dan JPEG untuk grafik, tetapi mereka hanya mundur ketika SVG tidak berfungsi.

Apa itu SVG?

SVG adalah singkatan dari Scalable Vector Graphic. Tanpa terlalu teknis, perbedaan antara SVGs dan format berbasis pixel lainnya, adalah bahwa data untuk komposisi grafik disimpan sebagai perhitungan matematis. Ketika browser membuka SVG, ia harus membuat perhitungan untuk merender SVG. Browser yang lebih lama tidak memiliki fungsionalitas untuk membuat perhitungan ini atau menangani SVG, lebih jauh, komputer yang lebih tua mungkin telah berjuang untuk membuat halaman web yang berat SVG bahkan jika mereka bisa digunakan 10 tahun yang lalu (yang mereka tidak bisa). Data untuk SVG disimpan dalam format heksadesimal (basis-16), memungkinkannya untuk dioptimalkan menjadi ukuran file yang sangat kecil dibandingkan dengan penyimpanan biner data piksel.

Berikut adalah beberapa sumber untuk mempelajari lebih lanjut tentang cara mencapai teknik fallback:

1. Menguasai penggunaan SVG untuk web retina, fallback dengan skrip PNG

2. Meninjau ulang alur kerja SVG untuk kinerja dan pengembangan progresif dengan URI data transparan

3. Trik CSS - Pengembalian SVG

Cuplikan JavaScript berikut ini, yang disalin dari tautan pertama, adalah semua yang Anda butuhkan untuk mendeteksi dukungan SVG di sebagian besar, jika tidak semua browser, dan mengubah nama file untuk menyediakan fallback PNG.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Kapan harus menggunakan SVG

• Kapan pun Anda bisa karena biasanya ukuran file terkecil dan resolusi yang mandiri artinya dapat menangani rasio piksel perangkat apa pun (misalnya layar retina)
• Ketika karya seni Anda cocok untuk format file vektor (ikon tertentu)
• Ketika Anda memiliki kemewahan hanya dengan menargetkan browser modern (dukungan SVG relatif baru untuk beberapa browser)

Kapan harus menggunakan font ikon

• Ketika Anda membutuhkan serangkaian ikon yang luas
• Ketika, seperti SVG, Anda menginginkan manfaat dari format file vektor
• Ketika Anda memiliki kemewahan hanya harus menargetkan browser modern (dukungan font web relatif baru untuk beberapa browser)

</DA01>

Mengapa SVG pilihan terbaik?

• Skala dengan indah ke ukuran apa pun dari satu file (tidak perlu melayani @2x.jpguntuk layar retina atau meregangkan grafik)

• Sangat sering ukuran file lebih kecil dari JPEG dan PNG

• Hampir tidak pernah harus mengorbankan kualitas dalam logo

• Membuat desain responsif lebih mudah dalam banyak hal

Catatan

• Dukungan kurang umum untuk SVG inline, jadi untuk keamanan, yang terbaik adalah menautkan ke file melalui tag gambar saat ini. (Jika Anda akan menggunakan kembali grafik di tempat lain, yaitu ikon navigasi, Anda ingin menautkannya secara eksternal sehingga peramban menyimpannya dan menghemat waktu memuat halaman lain.)

• IE tidak mendukung SVGZ, format terkompresi tersedia untuk grafik SVG. Untuk kompatibilitas terbesar di seluruh browser dan versi sebelumnya yang terbaru, yang terbaik adalah menggunakan SVG 1.0pada saat ini.

• Anda masih dapat membuat lembar-sprite dengan SVG dengan cara yang sama dengan format gambar lainnya, tetapi alih-alih menggunakan nilai piksel aktual untuk menentukan koordinat x dan y dari setiap gambar, gunakan nilai berbasis persentase.

  Bagaimana dengan kasus-kasus itu ketika nilai persentase tidak cukup akurat?

  Anda harus membuat lembar sprite dengan tujuan dapat membagi lebar dan tinggi dengan 100 dan mencapai seluruh angka, atau angka dengan 1 tempat desimal paling banyak. Sebagai contoh, jika Anda mengatur 7 x 10px x 10pxikon bersama dalam sprite sheet, jangan membuat kanvas 70px x 10px.

  Mengapa? Karena ketika Anda membagi 100 dengan 7, Anda mendapatkan 14.285714285714285714285714285714, yang, sebagai persentase bulat, pasti akan menyebabkan beberapa matematika tidak sempurna di suatu tempat.

  Sebaliknya, buat 80px x 10pxkanvas, dan jangan khawatir tentang 12,5% kosong. Ikon-ikon akan berada pada peningkatan tepat 12,5%, yang, tentu saja, jauh lebih mudah untuk dikerjakan.

Anda harus menggunakan .jpeg untuk foto atau gambar dengan banyak warna. Jenis file .gif berguna untuk gambar animasi atau di mana transparansi diperlukan, tetapi menurun digunakan. Format yang paling populer adalah .png, yang juga dapat menawarkan transparansi alfa dan rentang warna yang lebih besar daripada jenis file .gif. Untuk gambaran umum yang lebih terperinci, lihat artikel Jonathan Snook, Format Gambar Yang Terbaik .

Formula yang bagus bisa menggunakan JPEG untuk foto dan PNG untuk yang lainnya.

Tentu saja, jika Anda memiliki grafik yang tidak memerlukan transparansi alfa dan memiliki kurang dari 256 warna, GIF mungkin menghemat beberapa bandwidth tetapi pasti sedang keluar.

Saya menggunakan PNG untuk hampir semua hal, karena tidak memiliki artefak kompresi seperti yang dilakukan JEPG, dan hampir kompatibel secara universal akhir-akhir ini (saya telah melihat beberapa editor situs yang tidak melakukannya dengan baik, seperti versi desktop dari perangkat lunak SiteBuilder Homestead, tetapi hanya itu saja).

Anda harus memilih gambar Anda di pangkalan pada tingkat kompresi / kualitas yang ingin Anda capai.

Web adalah tentang kecepatan dalam mengunduh informasi, dan yang lebih kecil adalah ukuran gambar, lebih baik untuk kecepatan memuat halaman.

JPG : Untuk gambar dengan jutaan warna (fotografi)

PNG dan GIF : Untuk transparansi dan sedikit jumlah warna. Saya menggunakannya hanya di bawah 64/128 warna berbeda, tetapi umumnya di bawah 256. (ikon, gambar vektor yang harus raster, warna kontras tinggi, gradien dengan beberapa warna)

Bagaimana cara memilih antara PNG dan GIF?

Pertama-tama Periksa optimasi kompresi / kualitas, dan pilih siapa yang memberi Anda hasil yang lebih baik dengan bobot lebih sedikit. Saya masih menggunakan GIF secara luas, dan kadang-kadang lebih baik daripada PNG untuk jenis gambar yang sama. Jangan membeda-bedakan satu format dengan yang lain, cukup periksa satu yang terlihat lebih cocok untuk optimasi Anda.

• Pilih GIF: untuk gambar animasi yang tidak lebih dari 256 warna
• Jika Anda tidak membutuhkan animasi, Anda dapat memilih PNG. Memilih PNG yang tepat: Ada 2 jenis 8bit dan 24bit. 8bit itu cenderung menjadi versi yang lebih baik dari GIF tanpa animasi untuk kualitas / kompresi (tapi seperti saya katakan tidak selalu, periksa ketika Anda Simpan untuk Web). 24bit tidak memiliki kompresi (jadi gunakan hampir tidak untuk beberapa efek grafis khusus), dan memiliki aturan alpha untuk menggunakan transparansi warna (Browser IE lama tidak mendukung ini, jika Anda tidak menerapkan filter khusus atau perilaku .htc ke halaman ).

Saya dapat melihat dari berbagai artikel, 90% desainer web masih berpikir bahwa PNG adalah format lossless saja . Banyak profesional bahkan tidak tahu tentang keberadaan PNG-8.

Tapi jelas PNG-8 adalah apa yang seharusnya mereka gunakan untuk web, bukan PNG-32. Karena itu memberikan ukuran file 2x-5x lebih kecil dengan kualitas yang dapat diterima.

Terkadang sulit untuk memutuskan kompresi mana yang lebih baik untuk gambar. Misalnya, jika itu bukan foto, tetapi memiliki banyak warna dan gradien. Alat itu memungkinkan untuk membandingkan kedua format lossy secara visual dan memilih varian terbaik.

Berikut adalah alat yang bagus untuk membandingkan format PNG dan JPEG yang hilang: PNG vs JPEG

Format grafik Web utama adalah GIF, JPG, dan PNG. Sangat penting untuk mengetahui perbedaannya dan memilih format terbaik untuk setiap gambar, sehingga gambar terlihat bagus dan kompak sehingga dapat muncul dengan cepat di layar pengunjung situs Anda.

GIF - Format Informasi Grafik

Format grafis GIF paling baik untuk gambar dengan hanya beberapa warna: grafik, grafik, atau teks yang ditetapkan sebagai grafik. Semakin sedikit warna yang Anda gunakan, semakin efisien file GIF. File GIF ...

• dapat berisi hingga 256 warna.

• mendukung fitur yang disebut transparansi, di mana satu warna dari 256 warna diatur menjadi transparan. Ini membuat grafik Anda tidak terlihat seolah-olah berada di dalam kotak, karena latar belakang file tidak terlihat, membiarkan latar belakang halaman Web terlihat.

• dapat dianimasikan. Di dalam satu file tersimpan banyak bingkai foto dan indeks yang memberitahukan berapa lama setiap frame harus ditampilkan. GIF animasi diperlakukan sebagai file gambar standar, sehingga dimuat dengan tag standar.

• lossless, yang berarti kualitas gambar tidak menurun oleh proses kompresi.

• dapat dihubungkan sehingga tampak memudar, dari kualitas rendah ke kualitas tinggi, saat memuat. Ini memberi pengunjung Anda sesuatu untuk dilihat saat mereka menunggu.

• tidak baik untuk foto - Anda kehilangan kualitas dan file tidak akan kompak. Gunakan format grafis JPG untuk foto.

JPG - Kelompok Ahli Fotografi Bersama

Format grafis JPG terbaik untuk gambar dengan banyak warna, seperti foto atau karya seni yang dipindai. File JPG ...

• dapat berisi hingga 16 juta warna.

• mendukung kompresi variabel. Anda dapat menerapkan kompresi lebih banyak atau lebih sedikit untuk setiap gambar individual. Semakin banyak kompresi yang Anda terapkan, semakin banyak kualitas yang Anda kehilangan. Meskipun ukuran file dapat dibuat cukup kecil dengan format grafik ini, Anda seringkali harus berkompromi antara ukuran file dan kualitas gambar. Perangkat lunak grafik yang lebih baru memberi Anda pratinjau sebelum Anda menyimpan - ini memungkinkan Anda untuk bereksperimen dengan berbagai tingkat kompresi untuk memilih kompromi terbaik antara kualitas dan ukuran file.

• datang dalam tiga jenis: baseline atau standar, baseline dioptimalkan atau standar dioptimalkan, dan progresif. Baseline dirancang untuk browser yang kami anggap kuno hari ini (seperti Internet Explorer versi 1). Dioptimalkan di awal menawarkan kompresi lebih dari standar awal, dan praktis setiap browser saat ini dapat membaca gambar seperti itu. JPG progresif, seperti file GIF interlaced, dibangun saat diunduh, beralih dari representasi gambar mentah ke tampilan selesai. Meskipun ini adalah format grafik Web yang bagus, browser lama tidak semuanya mendukung format ini.

• tidak baik untuk gambar dengan hanya beberapa warna, seperti teks yang diatur sebagai grafik atau gambar dengan area warna datar. Jika Anda menggunakan JPG untuk grafik ini, mereka akan lebih besar dari yang diperlukan, dan terlihat "berbintik-bintik."

PNG - Grafik Jaringan Progresif

PNG adalah format grafis Web terbaru. File PNG ...

• didukung oleh semua browser modern. File-file ini mungkin tidak muncul di browser lama, jadi menggunakan format grafik ini dapat menyebabkan beberapa pengunjung situs web Anda tidak dapat melihat gambar Anda.

• kompak dan serbaguna dan dapat menggabungkan fitur terbaik GIF dan JPG, seperti kemampuan untuk memiliki latar belakang transparan atau kemampuan untuk memuat gambar dengan jutaan warna.

• masih belum banyak digunakan, sebagian besar karena tidak didukung oleh peramban yang lebih lama.

Kapan menggunakan yang mana?

Memilih format grafik Web yang tepat dapat memastikan bahwa gambar Anda terlihat bagus dan muncul dengan cepat di komputer pengunjung Anda. Memilih format yang salah membuat gambar Anda terlihat buruk dan perlu waktu lama untuk mengunduh.

Kesalahan grafis paling umum yang dilakukan orang di Web adalah menggunakan format grafik yang salah untuk gambar mereka. Tapi pilihannya sangat sederhana ...

• Jika grafik Anda memiliki banyak warna (seperti foto), pilih JPG.

• Jika gambar Anda memiliki beberapa warna, pilih GIF. Saat menggunakan GIF, coba palet yang dioptimalkan yang hanya berisi warna yang digunakan - mereka dapat memotong ukuran file menjadi dua.

Di dunia yang ideal, akan turun ke ini:

JPEG - Untuk gambar dan foto raster

PNG - Untuk grafik vektor (mis. Logo, dll.)

Sayangnya, Internet Explorer 6 (masih, sayangnya, sejumlah besar pengguna) tidak mendukung transparansi dalam gambar PNG. Jadi, jika Anda PNG berisi transparansi, itu mungkin mengalami masalah. Untungnya, ada peretasan yang dapat digunakan untuk mem-bypass masalah ini, meskipun tidak dengan cara yang elegan:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: Juga, saya pikir bahkan IE 7 memiliki masalah dengan beberapa fitur PNG.)

GIF hanya memiliki dua keunggulan dibandingkan PNG:

1. (Hampir) dukungan browser sempurna (meskipun tidak ada transparansi, jadi ini bukan bonus)
2. Mereka dapat dianimasikan, namun grafik beranimasi harus digunakan dengan hemat dalam desain web.

EDIT: PNG selalu lebih baik daripada GIF jika didukung dan dapat digunakan, karena PNG adalah format terbuka.

Seperti yang banyak ditunjukkan, JPEG bagus untuk fotografi dan PNG bagus untuk grafik dengan teks dan grafik. GIF memiliki satu-satunya kelebihan, yaitu mendukung animasi, yang harus digunakan dengan sangat hati-hati.

Tip yang baik adalah, untuk mengekspor gambar Anda sebagai JPEG dan PNG. Hampir selalu format yang lebih baik untuk hasil grafik Anda dalam file yang lebih kecil. Foto menjadi lebih kecil sebagai JPEG dan grafik lebih kecil dari PNG. Jadi, jika Anda tidak yakin mana yang harus dipilih, itu bisa menjadi penentu yang baik.