5 Format Gambar untuk Optimasi Website

Artikel ini berisi pengenalan tentang beberapa format gambar yang umumnya digunakan pada website agar kita dapat memilih yang paling optimal.
Updated: 25 Desember 2020
Bagikan:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
memilih format gambar untuk optimasi website

Hai Sobat Digital! Kali ini kami akan berbagi informasi tentang beberapa format gambar yang umumnya digunakan di website.

Tujuan memilih format gambar

Kita perlu mengetahui beberapa format gambar yang ada agar kita dapat memilih mana yang terbaik dan optimal dari sisi kinerja website namun tetap dapat memenuhi kebutuhan pengunjung website kita.

Jenis format gambar

Ada beberapa format gambar yang biasa digunakan untuk website yaitu JPEG, PNG, GIF, SVG dan WebP. Dibawah ini penjelasan masing-masing format gambar tersebut.

1. Format JPEG atau JPG

JPEG adalah singkatan dari Joint Photographic Experts Group, yaitu nama organisasi yang mengembangkan format gambar.

Saat Anda menyimpan gambar sebagai JPEG, beberapa data dari gambar akan hilang permanen dan dihapus untuk mengurangi ukuran file. Metode ini disebut "lossy compression".

Format gambar ini adalah yang paling banyak digunakan karena ukuran file outputnya relatif lebih rendah dan memiliki kompatibilitas yang tinggi, bisa dibuka di banyak browser dan aplikasi.

Format JPEG cocok untuk digunakan pada foto atau gambar yang tidak memiliki background transparan.

Contoh foto dengan format JPEG, kompresi menengah, 300x300 pixels, 8kb
Contoh foto dengan format JPEG, kompresi menengah, 300x300 pixels, 8kb
Contoh foto dengan format JPEG, kompresi tinggi, 300x300 pixels, 4kb
Contoh foto dengan format JPEG, kompresi tinggi, 300x300 pixels, 4kb

Tidak ada perbedaan antara JPEG dan JPG. Ekstensi JPG digunakan karena khususnya pada OS Windows menggunakan ekstensi 3 huruf.

2. Format PNG

PNG adalah singkatan dari Portable Network Graphic, memiliki kompatibilitas tinggi dari berbagai browser.

PNG menggunakan metode kompresi yang disebut dengan "lossless compression".

Dengan kompresi lossless, maka kualitas gambar tidak berubah tetapi memiliki ukuran file yang lebih kecil.

Lossless compression hanya menghapus data gambar yang tidak penting sekali, sehingga jika dibandingkan dengan lossy compression, pengurangan ukuran filenya relatif lebih sedikit.

Format PNG banyak digunakan untuk seni gambar digital seperti logo, icon, dan "flat image" karena menggunakan warna 24 bit dan memiliki kemampuan untuk background yang transparan.

Yang dimaksud "flat image" ini adalah gambar yang hanya memiliki 1 layer, dan umumnya relatif memiliki sedikit warna, tidak seperti foto.

Contoh gambar dengan format PNG, background transparan
Contoh gambar dengan format PNG, background transparan

Jikalau kita membandingkan ukuran file foto antara JPEG & PNG, maka secara umum akan lebih besar ukuran file PNG, tetapi jika membandingkan gambar "flat image" maka belum tentu PNG akan lebih besar ukuran filenya.

3. Format GIF

GIF adalah singkatan dari Graphical Interchange Format dan memiliki kompatibilitas yang tinggi juga jika dibuka dari berbagai browser.

Kelebihan dari gambar dengan format GIF adalah kita bisa membuat animasi atau video singkat tanpa suara yang terbuat dari beberapa gambar.

Contoh Animasi atau Video dari gambar dengan format GIF
Contoh Animasi atau Video dari gambar dengan format GIF

Gambar animasi diatas adalah contoh animasi yang kami buat untuk artikel Membuat Sticky Header dan Logo Mengecil di Oxygen Builder.

Jika gambar yang kita gunakan resolusinya rendah, maka file output animasi atau video tersebut juga akan berukuran kecil. Tetapi untuk suatu kondisi tertentu mungkin kita tetap menggunakan GIF daripada format video.

Namun teknologi kompresi video semakin maju, dan ketika kami bandingkan dengan format video .mp4, maka hasilnya ukuran file video dengan format GIF lebih kecil namun tidak terlalu signifikan perbedaannya.

Tetapi karena GIF adalah format gambar, maka kode pada website akan menggunakan tag gambar untuk memunculkannya.

Begitu juga mesin pencari akan menggolongkan animasi atau video tersebut sebagai gambar dan bukan video.

4. Format SVG

SVG adalah singkatan dari Scalable Vector Graphics. SVG berisi data dalam format XML yang dapat menampilkan outputnya berupa grafik/gambar.

Bagi anda pengguna Corel Draw ataupun Adobe Illustrator tentunya tidak asing lagi dengan karakteristrik gambar yang berbasiskan vektor.

Karena SVG dasarnya berupa vektor, maka gambar dengan format ini memiliki ketajaman gambar yang tinggi walaupun ukurannya di perbesar sehingga sangat cocok digunakan untuk logo ataupun icon

Contoh gambar dengan format SVG
Contoh gambar dengan format SVG, coba anda perbesar atau zoom untuk mengetahui apakah gambar tersebut akan pecah atau tidak ketajamannya.

Ukuran filenya tergantung dengan banyaknya data yang terkandung dalam XML tersebut.

Ketika sedikit warna dan komponen yang membentuk, maka ukurannya relatif lebih kecil daripada format lainnya, tetapi jika semakin rumit, maka ukurannya bisa menjadi lebih besar daripada format lainnya.

5. Format WebP

WebP singkatan dari Web Picture format, sebuah format gambar yang dikembangkan oleh Google.

Berbeda dengan JPEG yang menggunakan lossy compression, dan PNG yang menggunakan lossless compression, maka WebP adalah format file gambar yang berisi data gambar dengan kompresi lossless dan lossy compression.

Karena WebP menggunakan 2 jenis kompresi tersebut, maka ukuran file bisa menjadi berkurang antara 20-40% jika dibandingkan dengan JPG & PNG.

WebP memiliki ukuran file yang jauh lebih kecil daripada JPEG & PNG serta bisa menggunakan latar belakang transparan. Kekurangan WebP adalah kompatibilitas yang lebih rendah daripada JPEG dan PNG.

Pada saat artikel ini ditulis, browser Safari 13 belum bisa membaca format WebP, sehingga gambar tidak bisa ditampilkan dengan normal. (Apple Adds WebP Image Support in Safari 14).

Contoh foto dengan format JPEG, 300x200 pixels, 9KB
Contoh foto dengan format JPEG, 300x200 pixels, 9KB
Contoh foto dengan format WEBP, 300x200 pixels, 7KB (ukuran file lebih kecil daripada format JPEG)
Contoh foto dengan format WEBP, 300x200 pixels, 7KB (ukuran file lebih kecil daripada format JPEG)

PENTING! Kami juga memperhatikan bahwa jika kita menggunakan format WebP untuk Open Graph image (og:image), maka link website yang kita share di Facebook tidak mengeluarkan gambar thumbnail-nya, tetapi hanya kotak blank saja. Sehingga untuk yang menggunakan WebP sebagai featured image artikel anda, maka sebaiknya menentukan og:image dengan format lainnya, kami sarankan menggunakan JPEG.

Penutup

Dari beberapa format gambar yang telah kami jelaskan diatas, berikut kami rangkum dalam sebuah tabel karakter beberapa format gambar dan fitur-fiturnya.

Tabel karakter beberapa format gambar dan fiturnya
Tabel karakter beberapa format gambar dan fiturnya

Demikian beberapa format gambar yang biasa digunakan untuk website. Dengan mengetahui karakter masing-masing dari format gambar tersebut, kita bisa memilih yang terbaik sehingga website kita akan lebih optimal.

Format mana yang biasa anda gunakan? Apakah anda memiliki tips dalam pemilihan format gambar untuk website? Silahkan tinggalkan komentar sobat pada kolom komentar dibawah.

Salam Digital!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

ARTIKEL TERBARU
Cara Membuat Menu Di Luar Kanvas dengan Oxygen Builder
Artikel ini menjelaskan tentang cara pembuatan menu di luar kanvas pada website yang menggunakan CMS WordPress dan plugin Oxygen Builder
Baca selengkapnya....
Konversi Website ke Oxygen Builder (Studi Kasus)
Apakah anda ingin mengkonversi website yang menggunakan Oxygen Builder? Berikut contoh kasus dan peningkatan kinerja hasil optimasinya.
Baca selengkapnya....
Bagaimana Cara Membuat Slider Dinamis dengan Flickity di Oxygen Builder Repeater?
Tutorial ini menjelaskan cara membuat slider dinamis menggunakan flickity yang digabungkan dengan elemen Oxygen Builder Repeater.
Baca selengkapnya....
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
logo digitalizer
© 2020 - 2021 Digitalizer My ID - Allright Reserved