
Sebagai bloger atau webmaster, jika ingin memasukkan gambar ke blog/web, kita harus memilih tipe gambar yang akan kita pakai, apakah JPG, GIF, atau PNG. Jika format yang dipilih tidak sesuai dengan jenis gambarnya, gambar tersebut ukurannya akan lebih besar daripada yang semestinya, dan menyebabkan waktu loading blog/website kita lebih lama. Padahal, pengunjung suka terhadap blog atau web yang loadingnya cepat dan tidak boros bandwidth. Untuk itu, kita harus mengusahakan agar gambar-gambar dalam blog atau website kita memiliki ukuran sekecil mungkin. Caranya bagaimana?
Memilih tipe dan memperkecil ukuran gambar
Jika kita menyimpan gambar dengan program pengolah gambar seperti Adobe Photoshop atau Microsoft Paint, maka kita dapat memlilih format gambar yang sesuai melalui menu File -> Save As dan pilih tipe file yang kita inginkan. Khusus untuk Adobe Photoshop ada feature tambahan yang lebih baik lagi dengan menu File -> Save For Web. Dengan Adobe Photoshop ini, selain dapat memilih tipe gambar, kita juga dapat mengatur kompresi dan kualitas gambar. Berikut ini tipe-tipe gambar yang sering digunakan.
BMP (Bitmap)
Tipe file BMP umum digunakan pada sistem operasi Windows dan OS/2. Kelebihan tipe file BMP adalah dapat dibuka oleh hampir semua program pengolah gambar. Baik file BMP yang terkompresi maupun tidak terkompresi, file BMP memiliki ukuran yang jauh lebih besar daripada tipe-tipe yang lain.
File BMP cocok digunakan untuk:
- desktop background di windows.
- sebagai gambar sementara yang mau diedit ulang tanpa menurunkan kualitasnya.
File BMP tidak cocok digunakan untuk:
- web atau blog, perlu dikonversi menjadi JPG, GIF, atau PNG.
- disimpan di harddisk/flashdisk tanpa di ZIP/RAR, kecuali space tidak masalah bagi Anda.
JPG/JPEG (Joint Photographic Experts Group)
Tipe file JPG sangat sering digunakan untuk web atau blog. File JPG menggunakan teknik kompresi yang menyebabkan kualitas gambar turun (lossy compression). Setiap kali menyimpan ke tipe JPG dari tipe lain, ukuran gambar biasanya mengecil, tetapi kualitasnya turun dan tidak dapat dikembalikan lagi. Ukuran file BMP dapat turun menjadi sepersepuluhnya setelah dikonversi menjadi JPG. Meskipun dengan penurunan kualitas gambar, pada gambar-gambar tertentu (misalnya pemandangan), penurunan kualitas gambar hampir tidak terlihat mata.
File JPG cocok digunakan untuk:
- gambar yang memiliki banyak warna, misalnya foto wajah dan pemandangan.
- gambar yang memiliki gradien, misalnya perubahan warna yang perlahan-lahan dari merah ke biru.
File JPG tidak cocok digunakan untuk:
- gambar yang hanya memiliki warna sedikit seperti kartun atau komik.
- gambar yang memerlukan ketegasan garis seperti logo.

Gambar 1. Contoh gambar kaya warna dengan JPG kualitas tinggi (32kb)

Gambar 2. Contoh gambar kaya warna dengan JPG kualitas rendah (14kb)
GIF (Graphics Interchange Format)
Tipe file GIF memungkinkan penambahan warna transparan dan dapat digunakan untuk membuat animasi sederhana, tetapi saat ini standar GIF hanya maksimal 256 warna saja. File ini menggunakan kompresi yang tidak menghilangkan data (lossles compression) tetapi penurunan jumlah warna menjadi 256 sering membuat gambar yang kaya warna seperti pemandangan menjadi tidak realistis. Pada program MS Paint, tidak ada fasilitas penyesuaian warna yang digunakan (color table) sehingga menyimpan file GIF di MS Paint seringkali menghasilkan gambar yang terlihat rusak atau berubah warna. Pada program pengolah gambar yang lebih baik, seperti Adobe Photoshop, color table bisa diatur otomatis atau manual sehingga gambar tidak berubah warna atau rusak.
File GIF cocok digunakan untuk:
- gambar dengan jumlah warna sedikit (dibawah 256).
- gambar yang memerlukan perbedaan warna yang tegas seperti logo tanpa gradien.
- gambar animasi sederhana seperti banner-banner iklan, header, dan sebagainya.
- print shoot (hasil dari print screen) dari program-program simple dengan jumlah warna sedikit.
File GIF tidak cocok digunakan untuk:
- gambar yang memiliki banyak warna seperti pemandangan.
- gambar yang didalamnya terdapat warna gradien atau semburat.

Gambar 3. Ilustrasi gambar transparan dengan GIF pada background kotak-kotak


Gambar 4 & 5. Gambar GIF animasi
PNG (Portable Network Graphics)
Tipe file PNG merupakan solusi kompresi yang powerfull dengan warna yang lebih banyak (24 bit RGB + alpha). Berbeda dengan JPG yang menggunakan teknik kompresi yang menghilangkan data, file PNG menggunakan kompresi yang tidak menghilangkan data (lossles compression). Kelebihan file PNG adalah adanya warna transparan dan alpha. Warna alpha memungkinkan sebuah gambar transparan, tetapi gambar tersebut masih dapat dilihat mata seperti samar-samar atau bening. File PNG dapat diatur jumlah warnanya 64 bit (true color + alpha) sampai indexed color 1 bit. Dengan jumlah warna yang sama, kompresi file PNG lebih baik daripada GIF, tetapi memiliki ukuran file yang lebih besar daripada JPG. Kekurangan tipe PNG adalah belum populer sehingga sebagian browser tidak mendukungnya.
File PNG cocok digunakan untuk:
- gambar yang memiliki warna banyak.
- gambar yang mau diedit ulang tanpa menurunkan kualitas.
File PNG tidak cocok digunakan untuk:
- gambar yang jika dikompress dengan JPG hampir-hampir tidak terlihat penurunan kualitasnya.

Gambar 6. Ilustrasi gambar transparan dengan PNG pada background kotak-kotak (hanya ilustrasi, gambar di atas bertipe JPG).
Raster vs Vektor
Semua tipe file gambar yang disebutkan di atas (BMP, JPG, GIF, dan PNG) termasuk jenis gambar raster (atau disebut juga Bitmap). Gambar raster terdiri dari titik-titik pixel yang jumlahnya tetap. Jika diperbesar, baik di-zoom atau diubah ukuran gambarnya, gambar akan terlihat pecah atau tidak sebagus aslinya. Jenis gambar yang lain adalah gambar vektor. Gambar vektor terdiri dari garis, bentuk, bidang, dan warna yang dituliskan dalam instruksi-instruksi matematis. Jika diperbesar, gambar vektor kualitasnya tetap. Aplikasi pengolah gambar vektor misalnya CorelDraw (CDR) dan Adobe Ilustrator (AI). Gambar vektor saat ini tidak dapat digunakan di web atau browser.
Demikian penjelasan mengenai tipe-tipe gambar, dengan memilih tipe gambar yang sesuai, ukuran file gambar jadi lebih kecil, dan pengunjung web/blog kita tidak perlu menunggu lama pada saat loading dan menghemat bandwidth pengunjung, sehingga pengunjung akan lebih kerasan singgah di web atau blog kita. Semoga bermanfaat.
Penulis: Oka Mahendra (http://tutorialgratis.net)
Tulisan terkait:






56 comments
Comments feed for this article
19 Desember 2008 pada 10:49
hmcahyo
pertamax
maaf makasih infonya tentang gambar gratisnya
tapi mo tanya lagi nih
buat tutioral bikin dokumen pdf yang tiap judulnya dalam daftar isi bisa nge-link ke artikelnya – seperti saran mas oka pada ebook saya
19 Desember 2008 pada 14:26
alampintar
Wow!!!!!! Super keren!!!! Ini pengetahuan yang selama ini belum diketahui orang banyak loh!!! Huebat bener tutorialnya… maknyus!!!
19 Desember 2008 pada 15:12
Muwahhidin Firdaus
informasi yang bagus negh…
http://dhawi1986.wordpress.com
21 Desember 2008 pada 7:11
wawan
Trims banget, Salut . . . deh
21 Desember 2008 pada 8:25
GAGAH
BAGUS……………… BANGET WOW!!!!!!!!!!!!!!!!!!!MENAMBAH PENGATEHUAN GUE PASTINYA
22 Desember 2008 pada 10:23
senopatiarthur
Promosikan artikel anda di http://www.infogue.com. Telah tersedia widget shareGue dan pilihan widget lainnya serta nikmati fitur info cinema, game online & kamus online untuk para netter Indonesia. Salam!
http://design.infogue.com/tips_memilih_format_gambar_bmp_jpg_gif_atau_png
23 Desember 2008 pada 11:02
Komang RY
Saya banyak melajar dari blog ini trim’s
25 Desember 2008 pada 12:51
Tips Memilih Format Gambar BMP, JPG, GIF, atau PNG « F41d’s Blog
[...] tipe file gambar yang disebutkan di atas (BMP, JPG, GIF, dan PNG) termasuk jenis gambar raster (atau disebut juga Bitmap). Gambar raster terdiri dari titik-titik [...]
26 Desember 2008 pada 15:39
Ade Putra
Tutorial yang sangat bermanfaat…
http://www.adeputra.com
27 Desember 2008 pada 16:53
Baka Kelana
Trims ya…tutorialnya lengkap banget
30 Desember 2008 pada 17:01
mau nanya
tutorialnya kurang komplit.
terus dari sekian banyak model itu, mana yang lebih bagus buat web yang loadingnya cepaaaaaaaaaaat……… kayak setaaaaaaaaaan………
http://kesunyianku.wordpress.com/2008/11/04/bagaimana-menghindari-apologia/
khan enak kalau loading cepat.
mkasih jika ditanggapi
#jawaban: lha itu kan sudah dijelaskan, kalau pemandangan (atau yang banyak warna) bagusnya JPG, kalau kartun (atau yang sedikit warna) bagusnya GIF. Jadi format gambar yang cocok relatif banget dengan jenis gambarnya. Makasih sudah berkomentar.
31 Desember 2008 pada 8:37
Memahami teknik SEO yang mitos dan teknik SEO yang fakta « Tutorial Gratis (dot) Net
[...] Menggunakan tipe file yang umum (JPEG, GIF, PNG, dan BMP) [...]
4 Januari 2009 pada 18:22
Ivan Wibowo
Maaf …. kalo TIFF itu apa ya ? mudah2an bisa dibantu ….
#jawaban: Silakan lihat di sini:
http://en.wikipedia.org/wiki/Tagged_Image_File_Format
9 Januari 2009 pada 12:22
jef
thanks infonya.
kalo mau info link blog-blog dari musik ampe video indonesia lengkap atau tentang apa aja klik aja di :
http://www.BLOGHOTSPOT.CO.CC
Thanks
14 Januari 2009 pada 9:24
Khairuddin Syach
Kalo dipercetakan saya sering memakai vector… karena hasilnya mau di cetak..
23 Januari 2009 pada 11:52
yolex
kenalan nih bloger baru
26 Januari 2009 pada 2:29
WANDI rozaq
Lam kenal ya, mau nanya nih, software apa yang bisa digunakan untuk membuat gambar .png ya? Terima kasih.
29 Januari 2009 pada 0:32
yusufku
salam kenal.
kontentnya bagus. sangat berguna juga buat saya. seklaian mau nanya, kalo mau kompress ukran gambar, bagusnya pake apa ya ? trims.
met sukses.
2 Februari 2009 pada 10:02
Sopar Maruli
Saya punya hobby jempret-jepret alias memotret dan buat video, nah, bagaimana untuk video apa format yang dapat tepat digunakan untuk bolg atau web? Tolong ya mas dibantu dan penjelasannya?
Sukses dan sehat selalu buat semua tim tuturialgratisdotnet.
Salam,
cafestudi061
3 Februari 2009 pada 10:40
yani
riyeutttttttttttttttttttttttttttttttttttttttttttttttttttttt
6 Februari 2009 pada 7:18
Tips Memilih Format Gambar BMP, JPG, GIF, atau PNG
[...] tipe file gambar yang disebutkan di atas (BMP, JPG, GIF, dan PNG) termasuk jenis gambar raster (atau disebut juga Bitmap). Gambar raster terdiri dari titik-titik [...]
8 Februari 2009 pada 17:12
Kojak
makasih mas bt infonya…
masih secara umum y?
9 Februari 2009 pada 15:04
Sopar Maruli
Terimakasih banyak buat semua penjelasannya. Sangat menolong buat sya memahami hal yang berhubungan dengan format-format pada gambar digital.
Thanks.
Selamat dan sukses selalu buat tutrialgratis.net.
12 Februari 2009 pada 17:56
ciebal
Wakakakaka…
mantap om, saya pasang di blog saya yah..
http://www.my-ciebal.co.cc/2009/02/13/pilih-format-gambar-jgp-bmp-atau-png
mkasih..
13 Februari 2009 pada 23:36
Dinda Watson
bagaimana sih bikin gambar dalam format gif??
19 Februari 2009 pada 6:46
inyonge
Tambah ilmu nih, trims
21 Februari 2009 pada 17:38
k4nk
mwah tutorial yg bermanfaat bgt pa lagi wat pemula kyak saya makasih mas
22 Februari 2009 pada 9:28
Tips Memilih Format Gambar BMP, JPG, GIF, atau PNG « n354’s Blog
[...] tipe file gambar yang disebutkan di atas (BMP, JPG, GIF, dan PNG) termasuk jenis gambar raster (atau disebut juga Bitmap). Gambar raster terdiri dari titik-titik [...]
23 Februari 2009 pada 17:53
assalamstekpi
Tutorial yang bagus…bermanfaat buat orang lain.
3 Maret 2009 pada 21:25
harry
Terima kasih atas ilmunya…
9 Maret 2009 pada 17:29
kumpulan info « Kumpulan Info Gokill!!
[...] Tips Memilih Format Gambar BMP, JPG, GIF, atau PNG [...]
14 Maret 2009 pada 1:26
Membuat gambar header cantik « Imam Wahyudi Blog
[...] Setelah semua oke, simpan gambar Anda melalui menu File -> Save JPG. Atau File -> Save XHF. File JPG siap di-upload ke blog Anda, sedangkan file XHF bisa diedit ulang jika Anda [...]
15 Maret 2009 pada 14:02
Alwi Oemar Assegaf
Yth
Penulis,
Salut untuk anda !
saya mendoakan amal ibada anda semoga di jalan yang lurus
dan di berikan rizki yang BERKAH dan teruskan yang menjadikan
amaliah anda lancar.
Saya pendatang Baru dan masih perlu banyak belajar walaupun
saya saat ini sebagai guru komputer di lembaga Kursus. Sekali
lagi Thanks full.
Alwi Oemar Assegaf
16 Maret 2009 pada 16:11
bambang
ok bgt cooy!!! tutorialnya
20 Maret 2009 pada 9:27
adodo
penjelasannya mantap boz, thanks!
salam blogger nubie malang..!
20 Maret 2009 pada 11:05
maulana
pas banget infonya buat saya sebagai pemula yang masih bljr bnyk. terima kasih.
24 Maret 2009 pada 5:19
niko
wah…tutorialnya sangat bermanfaat untuk saya yang baru belajar webdesign, lumayan untuk memperbaiki web saya…terima kasih…
27 Maret 2009 pada 11:24
rahul
oke juga tuh.. mampir sini juga ya http://www.indoric.cn
3 April 2009 pada 15:21
..:: Information Center ::.. » Blog Archive » Teknik SEO yang Mitos dan SEO yang Fakta
[...] Menggunakan tipe file yang umum (JPEG, GIF, PNG, dan BMP). [...]
3 April 2009 pada 21:39
misno
enak sich gratisan tapi downloudnya berapa lama? kalau kita ngenet habis doku berapaan? trim,s and sukses selalu
19 April 2009 pada 6:17
A. Rasyid http://pgtkmma.co.cc
wmf apa mas?
22 April 2009 pada 11:46
muda sedia
Berkat artikelnya sy jd + pede nich tuk ngisi web sekolah tmpt sy bekerja. Walau tdk pnya pendidikan khsus tntg web sy jadi banyak ilmu. makaci buangeet………….
28 April 2009 pada 16:47
Membuat gambar header cantik dalam 3 menit « Anton182’s Weblog
[...] Setelah semua oke, simpan gambar Anda melalui menu File -> Save JPG. Atau File -> Save XHF. File JPG siap di-upload ke blog Anda, sedangkan file XHF bisa diedit ulang jika Anda [...]
6 Mei 2009 pada 9:42
cantigi
artikel keren!
bitmap versus vector selalu menarik jika di diskusikan.. hehehe…
15 Mei 2009 pada 22:23
soni
wah trimakasih atas penjelasannya, jd tambah mudeng. skalian mau nanya mas, setiap kali saya upload gambar ke blog saya kok tidak bisa, yg muncul malah hanya tulisan. saya memakai wordpress. mohon solusinya mas..
18 Juni 2009 pada 20:52
Tips Memilih Format Gambar BMP, JPG, GIF, atau PNG « Yoyoxcomputer
[...] tipe file gambar yang disebutkan di atas (BMP, JPG, GIF, dan PNG) termasuk jenis gambar raster (atau disebut juga Bitmap). Gambar raster terdiri dari titik-titik [...]
18 Juni 2009 pada 21:01
Memahami teknik SEO yang mitos dan teknik SEO yang fakta « Yoyoxcomputer
[...] Menggunakan tipe file yang umum (JPEG, GIF, PNG, dan BMP). [...]
27 Juni 2009 pada 17:43
Tips Memilih Format Gambar BMP, JPG, GIF, atau PNG « Faaqih Group
[...] tipe file gambar yang disebutkan di atas (BMP, JPG, GIF, dan PNG) termasuk jenis gambar raster (atau disebut juga Bitmap). Gambar raster terdiri dari titik-titik [...]
15 Agustus 2009 pada 20:58
rosididik
wow membantu sekali untuk design webku http://newkitchendesign.info thanks
28 Agustus 2009 pada 11:05
eN
nambahin. . .
klo png bisa dibuat g kotak, . jpg hasilny slalu kotak, karena area transparan diisi warna putih., bwtny pke a.photoshop, corel draw juga bisa, ding. . ,
klo mw bwt gif, bisa pake corel raw, atw donlot aja gif maker.
. .tp aq g kpikiran klo hal itu bs bikin lola. . .*kabur ke ning.com mengganti banner*
28 Agustus 2009 pada 16:22
Daftar Software Gratis & Open Source Terbaik « Tutorial Gratis (dot) Net
[...] buah gambar, dan sebagainya, biasanya orang banyak menggunakan Adobe Photoshop. Software pengolah gambar bitmap yang terbaik dan gratis adalah GMIP (GNU Image Manipulation Program) yang bisa di download di [...]
29 Agustus 2009 pada 14:12
fajar kus bahari
wah….bakal bermanfaat banget nih ilmunya,sering2 berbagi aja.
7 September 2009 pada 3:02
Memahami teknik SEO yang mitos dan teknik SEO yang fakta « arisyi-design.web.id | Articles
[...] Menggunakan tipe file yang umum (JPEG, GIF, PNG, dan BMP). [...]
14 Oktober 2009 pada 6:31
webmatic
Assalamu’alaikum Wr.Wb.
===================================================
Download Langsung vidio + e-book cara mengelola WEBSITE/BLOG kita ndak pake ribet,Walaupun orang nya super SIBUK ato SUPER GAPTEK
goooooo ACTION
===================================================
24 Oktober 2009 pada 22:31
greyyellow
bener-bener pinter nih… enak di baca enak dimengerti…. hebat lah
29 Oktober 2009 pada 23:55
shaver
Om2 Sekalian mau tanya nih???kenapa ya kamera hp saya nokia 5130 pas saya aktifkan kameranya lalu saya mulai memfoto anehnya kok foto yang tadi saya ambil tidak bisa dilihat di memori eksternal saya, padahal sudah saya setting di memori eksternal, dan anehnya lagi format file foto yang sudah saya ambil bukan jpg melainkan nwr, apakah ada yang bisa membantu saya??jika bisa harap email ke shaver_aja@yahoo.com