{"id":15921,"date":"2022-01-21T17:39:03","date_gmt":"2022-01-21T10:39:03","guid":{"rendered":"\/tutorial\/?p=15921"},"modified":"2023-01-18T15:45:59","modified_gmt":"2023-01-18T08:45:59","slug":"format-gambar","status":"publish","type":"post","link":"\/id\/tutorial\/format-gambar","title":{"rendered":"13 format gambar paling umum dan penggunaannya"},"content":{"rendered":"

Tahukah Anda kalau setiap jenis format gambar sebenarnya dioptimalkan untuk kegunaan yang berbeda? Jadi, sebelum memutuskan untuk menggunakan format file gambar tertentu, ada baiknya Anda memahami perbedaannya lebih dulu agar tahu kapan harus menggunakannya.<\/span><\/p>

Lebih dari 90% website pasti memasukkan file grafis pada kontennya. Sebab, elemen visual bisa menarik perhatian pembaca atau menjelaskan informasi rumit dalam satu tampilan saja, baik melalui infografis maupun screenshot. Gambar juga bisa meningkatkan konversi dan kemungkinan konten Anda dibagikan ke media sosial.<\/span><\/p>

Namun, apabila tidak menggunakan format gambar yang tepat, website Anda mungkin akan menjadi lambat atau bahkan bisa terkena masalah yang tidak diinginkan, dan akhirnya memberikan pengalaman pengguna yang buruk.<\/span><\/p>

Dalam artikel ini, kami akan membantu Anda memahami perbedaan format gambar yang paling umum digunakan saat ini dan penggunaannya dengan tepat. Pastikan untuk menyimaknya, ya. Selamat membaca!<\/span><\/p>

\"\"<\/a><\/figure>

Jenis-Jenis Format Gambar: Raster vs Vektor<\/h2>

Sebelum membahas perbedaan <\/span>raster<\/b> dan <\/span>vektor<\/b>, penting untuk memahami perbedaan <\/span>kompresi lossy vs lossless<\/span><\/a> lebih dulu.<\/span><\/p>

Lossy<\/b> dan <\/span>lossless<\/b> lebih didefinisikan sebagai teknik kompresi, sedangkan raster dan vektor adalah jenis file gambar.<\/span><\/p>

Kompresi lossy adalah proses yang menghapus beberapa data dalam file Anda. Meskipun mengurangi ukuran file secara signifikan, kualitasnya juga akan menurun.<\/span><\/p>

Sementara itu, kompresi lossless hanya menghilangkan metadata yang tidak penting. Ukuran file yang dikurangi memang hanya sedikit, tapi kualitas gambar tetap dipertahankan.<\/span><\/p>

Raster bisa berupa lossy atau lossless, sedangkan vektor tidak bisa berupa lossy atau lossless karena ukurannya sudah kecil dan tidak memerlukan kompresi apa pun.<\/span><\/p>

Untuk memilih format file gambar terbaik, Anda harus mempertimbangkan kualitas, kecepatan loading yang Anda inginkan, dan ruang yang Anda miliki untuk menyimpannya.<\/span><\/p>

Format Gambar Raster<\/h3>

Gambar raster adalah gambar yang terdiri dari grid (kisi) kecil, atau titik-titik persegi yang disebut piksel. Setiap piksel berisi warna, yang tertata untuk membentuk sebuah elemen visual. Semakin tinggi resolusinya, semakin detail pula tampilan gambar.<\/span><\/p>

Jenis ini biasanya berukuran lebih besar daripada vektor. Contoh format gambar raster termasuk <\/span>JPEG<\/b>, <\/span>GIF<\/b>, dan <\/span>PNG<\/b>, yang merupakan format paling umum di website.<\/span><\/p>

Penggunaan raster paling cocok untuk grafis yang rumit yang memiliki tepi halus dan gradien warna, seperti proyek desain grafis dan foto.<\/span><\/p>

Setiap piksel dalam file raster memiliki warna, posisi, dan proporsi yang ditentukan sesuai resolusinya. Artinya, kalau Anda mengubah resolusi file, piksel akan melebar untuk mengisi ruang tambahan sehingga gambar pun menjadi buram, terdistorsi, atau berpiksel.<\/span><\/p>

Format Gambar Vektor<\/h3>

Gambar vektor adalah gambar yang disusun dari jalur atau garis yang didasarkan pada persamaan matematika. Wah, terdengar rumit ya.<\/span><\/p>

Jadi, yang dimaksud dengan jalur yaitu adanya titik awal dan akhir, yang dihubungkan oleh garis dan kurva. Bisa berupa garis lurus, persegi, atau bentuk melengkung. Setiap jalur bisa berisi berbagai properti, seperti warna guratan, warna isian, dan ketebalan.<\/span><\/p>

Karena gambar berjenis vektor ditentukan berdasarkan algoritme, bukan berdasarkan jumlah piksel tertentu, Anda bisa sekali meningkatkan skalanya tanpa menimbulkan distorsi atau menurunkan kualitasnya.<\/span><\/p>

Image vector banyak digunakan untuk gambar-gambar logo, ikon, atau font, yang tampilannya harus bisa diperbesar atau diperkecil secara fleksibel dalam berbagai situasi tanpa mengganggu kualitas.<\/span> Format gambar yang digunakan umunya seperti EPS<\/strong>, SVG<\/strong>, dan AI<\/strong>. File vektor biasanya memiliki ukuran yang lebih kecil daripada raster.<\/p>

\n
\"raster<\/figure><\/div>

Jika dibandingkan, kualitas vektor tidak berubah saat diperbesar. Sementara itu, memperbesar format raster bisa menurunkan kualitasnya.<\/span><\/p>

Macam-Macam Ekstensi File Gambar yang Umum Digunakan <\/h2>

Nah, setelah mempelajari perbedaan raster dan vektor, selanjutnya kami akan membahas format gambar yang paling sering digunakan. Kami akan membahas kelebihan dan kekurangan setiap format, dukungan browser dan sistem operasi, serta penggunaan yang paling tepat.<\/span><\/p>

Daftar di bawah ini dimulai dengan 8 format gambar raster terpopuler, kemudian diikuti oleh 5 format gambar vektor.<\/p>

Berikut adalah 13 format file gambar yang saat ini paling banyak digunakan:<\/p>

1. JPEG dan JPG<\/h3>

Joint Photography Experts Group<\/b> atau JPEG adalah format gambar dari jenis raster dengan kompresi lossy, yang berupa flat image atau semua pengeditan disimpan ke dalam satu lapisan (tidak bisa di-reverse<\/em>).<\/p>

Format JPEG biasanya digunakan untuk menyimpan gambar di kamera digital dan printing, yang tidak mengharuskan Anda melakukan banyak pengeditan. Format file gambar ini juga tidak mendukung transparansi.<\/p>

Tidak ada perbedaan antara <\/span>JPEG<\/b> dan <\/span>JPG<\/b>, keduanya adalah format file yang sama, tapi dengan akronim dan ekstensi file yang berbeda.<\/span> Karena menggunakan kompresi lossy, JPEG menghilangkan beberapa data untuk mengurangi ukuran file, yang sebaliknya akan menurunkan kualitasnya.<\/span><\/p>

Format gambar ini adalah pilihan yang tepat untuk website. Pengunjung website bisa memuatnya dengan cepat, t<\/span>api penurunan kualitasnya hampir tidak terlihat.<\/span> Selain itu, JPEG atau JPG adalah salah satu format file gambar yang <\/span>paling umum<\/span><\/a>, karena mendukung semua browser dan OS serta menawarkan kompresi yang relatif optimal.<\/span><\/p>

\"jpeg<\/figure>
\"jpeg<\/figure>

Semua browser pada umumnya, seperti <\/span>Google Chrome<\/b>, <\/span>Safari<\/b>, dan <\/span>Mozilla Firefox<\/b> mendukung format file gambar ini sejak versi paling awal.<\/span><\/p>

Namun, JPEG bukanlah pilihan terbaik untuk elemen visual yang memiliki teks di dalamnya, seperti screenshot artikel dan infografis karena kompresinya menurunkan kualitas, yang bisa membuat teks menjadi sulit dibaca.<\/span><\/p>

2. PNG<\/h3>

Portable Network Graphics<\/b> atau PNG adalah format gambar dari jenis raster dengan kompresi lossless<\/span>, yang berarti kualitasnya dan data aslinya akan dipertahankan meskipun sudah di-compress<\/em>.<\/span><\/p>

Hasilnya, PNG memiliki kualitas yang lebih tinggi daripada JPEG, dengan detail dan kontras warna yang tetap bagus.<\/span> File PNG juga bisa mempertahankan transparansi yang sangat sesuai untuk membuat logo<\/a>.<\/p>

Selain itu, teks dalam file PNG tampak lebih jelas daripada JPEG sehingga format gambar ini cocok untuk grafik yang mengandung teks, seperti screenshot, infografis, atau banner.<\/span><\/p>

Format file PNG juga dioptimalkan untuk penggunaan digital, mendukung lebih banyak warna daripada format GIF, yaitu hingga 16 juta warna, sementara GIF hanya mendukung 256 warna.<\/span><\/p>

Data dan kualitas yang dipertahankan dalam format file gambar PNG secara umum membuat ukurannya lebih besar dari JPEG. Tapi, format gambar ini sangat bagus untuk visual berkualitas tinggi, seperti karya desain dan foto untuk website portofolio. Ingat, jangan menggunakannya secara berlebihan karena bisa memperlambat website.<\/span><\/p>

Meskipun Anda bisa mengedit file PNG tanpa kehilangan kualitasnya, jenis format gambar ini bukanlah pilihan terbaik untuk dicetak karena resolusinya yang relatif rendah dibanding format khusus pencetakan, seperti AI dan TIFF.<\/span> PNG didukung oleh hampir semua browser dan image viewer standar OS.<\/span><\/p>

3. BMP<\/h3>

Bitmap<\/b> atau BMP adalah format gambar raster yang mendistribusikan piksel individu, sehingga menghasilkan sedikit sekali atau tidak ada kompresi pada file tertentu.<\/span><\/p>

Ukuran file BMP lebih besar dan tidak praktis untuk disimpan atau diproses, dan kualitasnya tidak jauh lebih baik dibanding gambar jenis raster seperti PNG atau WebP. Oleh karena itu, BMP bukanlah pilihan terbaik untuk digunakan di website.<\/span><\/p>

Semua browser dan OS utama mendukung BMP, dan sebagian besar image viewer serta editor default seperti <\/span>MS Paint<\/b> juga mendukung format file gambar ini. Dulunya, BMP adalah salah satu format gambar yang paling umum digunakan, tapi saat ini sudah dianggap ketinggalan zaman karena kurang dioptimalkan.<\/span><\/p>

4. GIF<\/h3>

Graphics Interchange Format<\/b> atau GIF adalah format gambar dari jenis raster dengan kompresi lossless<\/span>, menyajikan 8 bit per piksel dan hanya bisa menampilkan 256 warna.<\/p>

Artinya, GIF memiliki kualitas yang kurang tajam dibandingkan format raster lainnya. Sebagai perbandingan, JPEG bisa menyajikan hingga 24-bit per piksel, yang menyediakan 16.777.216 variasi warna.<\/span><\/p>

Keterbatasan ini menjadikan ukuran file GIF tetap kecil, sehingga cocok untuk membuat konten animasi pendek yang menarik.<\/span> Selain itu, GIF cukup populer karena format file gambar ini mampu menyampaikan konten visual yang lebih rumit daripada gambar statis.<\/span><\/p>

GIF didukung oleh semua browser dan OS utama, serta image viewer standar sistem operasi tersebut.<\/span><\/p>

5. TIFF<\/h3>

Tagged Image File Format<\/b> atau TIFF adalah format gambar jenis raster yang mendukung kompresi lossy, tapi orang-orang biasanya menggunakan TIFF sebagai lossless. TIFF dan TIF adalah format yang sama, hanya akronim dan ekstensi filenya saja yang berbeda.<\/span><\/p>

Format file TIFF biasanya digunakan untuk printing karena kualitasnya yang tinggi.<\/span><\/p>

Sejumlah besar perangkat scanner juga menggunakan format TIFF untuk menjaga kualitas gambar atau dokumen yang dipindai.<\/span> Dengan format TIFF, Anda bisa mempertahankan beberapa layer sehingga bisa mengedit gambar lebih lanjut. Tapi tentu saja ada konsekuensinya, yaitu ukuran file yang lebih besar.<\/span><\/p>

File TIFF juga tidak secara otomatis didukung oleh browser yang umum digunakan. Anda harus menginstal add-on atau ekstensi untuk merender file TIFF di web browser.<\/span> Untuk membuka file TIFF di komputer secara lokal, gunakan tool editing atau tool profesional seperti <\/span>Adobe Photoshop<\/b>.<\/span><\/p>

Kalau Anda menggunakan Windows, file TIFF bisa dibuka dengan <\/span>Windows Photo Viewer<\/b>.<\/span><\/p>

6. HEIF<\/h3>

High-Efficiency Image File Format<\/b> atau HEIF adalah jenis format gambar dari jenis raster yang didasarkan pada mapping piksel, yang berarti kualitasnya akan berkurang saat Anda memperbesarnya.<\/span><\/p>

Format HEIF diciptakan untuk menyaingi JPEG, tetapi kompresinya dua kali lipat lebih efisien dari format JPEG. Dengan ukuran file yang sama, HEIF bisa menyajikan kualitas yang jauh lebih baik daripada JPEG.<\/span><\/p>

\n
\"contoh<\/figure><\/div>

Kelemahan HEIF adalah dukungan OS yang terbatas dan tidak didukung oleh banyak web browser. Hanya <\/span>macOS Sierra<\/b>, <\/span>iOS 11<\/b>, dan versi yang lebih baru yang memiliki dukungan default untuk HEIF, yang bahkan tidak mencakup Safari.<\/span><\/p>

Sejauh ini, HEIF digunakan oleh beberapa perangkat baru untuk menyimpan gambar dengan kualitas yang lebih tinggi, dan menyediakan ukuran file yang lebih optimal daripada JPEG.<\/span><\/p>

7. RAW<\/h3>

RAW adalah format gambar yang digunakan oleh kamera digital untuk menyimpan gambar berkualitas penuh, umumnya untuk pascaproduksi, seperti retouching foto.<\/span><\/p>

RAW menyajikan 14-bit, sedangkan <\/span>JPEG distandarisasi sebagai file 8-bit<\/span><\/a>. Jadi, Anda bisa mengubah warna dan kontras file RAW secara lebih fleksibel dalam proses pascaproduksi karena format gambar ini memuat lebih banyak data terkait nuansa dan warna.<\/span><\/p>

\n
\"raw<\/figure><\/div>

Nah, kualitas yang tinggi memang hampir selalu tidak sejalan dengan efisiensi ukuran. Yap, RAW memiliki ukuran file besar. Bahkan, satu file RAW bisa berukuran hingga ratusan megabyte.<\/span><\/p>

File RAW juga tidak cocok untuk website atau file sharing karena tujuan utamanya adalah untuk pascaproduksi.<\/span><\/p>

Untuk melihat gambar RAW pada OS yang digunakan, Anda harus menggunakan software editor foto profesional seperti <\/span>Adobe Lightroom<\/b>. Kalau menggunakan macOS, Anda bisa mengedit file RAW menggunakan <\/span>iCloud Photos<\/b> dan <\/span>Apple Photos<\/b>.<\/span><\/p>

8. PSD<\/h3>

Photoshop Document <\/b>atau PSD adalah format file gambar dari Adobe Photoshop untuk menyimpan gambar dan pekerjaan yang sedang dilakukan. PSD termasuk dalam jenis raster dengan kompresi lossless.<\/span><\/p>

Pada umumnya, file PSD memiliki ukuran file yang besar<\/span> karena memuat semua elemen visual Adobe Photoshop, seperti layer, path, dan filter. Elemen-elemen ini menghasilkan file PSD yang sepenuhnya bisa diedit dan disesuaikan, sehingga Anda bisa lanjut mengedit proyek sampai puas dengan hasilnya.<\/span><\/p>

9. SVG<\/h3>

Scalable Vector Graphics<\/b> atau SVG adalah format gambar berbasis vektor, yang kualitasnya tidak akan menurun ketika diperbesar.<\/span> Format ini berbasis XML yang dioptimalkan untuk grafik 2D dan web publishing. Selain itu, SVG sangat cocok untuk mengimpor karya dari aplikasi grafis 2D ke software 3D modeling.<\/span><\/p>

File dengan format SVG juga bisa langsung dimasukkan ke halaman web sebagai kode CSS. Ukurannya yang cenderung kecil hanya akan mengambil sedikit ruang pada penyimpanan Anda. Oleh karena itu, SVG menjadi format file gambar <\/span>paling umum ketiga<\/span><\/a> untuk digunakan di website.<\/span><\/p>

SVG mendukung gambar transparan dan bisa menyertakan animasi, tapi paling baik digunakan untuk visual sederhana seperti logo, ikon, atau ilustrasi simpel.<\/span><\/p>

Format ini tidak cocok untuk menampilkan dan mencetak gambar kompleks dengan color depth<\/em> tinggi karena dirender menggunakan titik dan jalur.<\/span><\/p>

\n
\"svg<\/figure><\/div>

Semua browser web utama mendukung format file gambar ini. Tapi, editor default pada OS apa pun biasanya tidak mendukung SVG. Sebab, format SVG tidak cocok untuk gambar kompleks seperti foto, dan editor OS default umumnya digunakan untuk menampilkan gambar kompleks.<\/span><\/p>

Untungnya, sebagian besar software ilustrasi mendukung SVG dan bisa menampilkan format gambar ini.<\/span> Anda bahkan bisa mengaktifkan dukungan WordPress SVG untuk menampilkan SVG di website WordPress Anda menggunakan <\/span>plugin SVG <\/span><\/a>WordPress<\/a>.<\/span><\/p>

10. EPS<\/h3>

Encapsulated PostScript<\/b> atau EPS adalah gambar berjenis vektor dengan kompresi lossless, yang umumnya digunakan untuk menyimpan ilustrasi atau karya desain grafis dalam software ilustrasi seperti <\/span>Adobe Illustrator<\/b> dan <\/span>CorelDraw<\/b>.<\/span><\/p>

Seperti SVG, EPS awalnya dikembangkan sebagai dokumen berbasis teks yang memberikan outline pada bentuk dan garis menggunakan coding.<\/span><\/p>

Sayangnya, piksel dan warna tidak turut dipetakan seperti pada gambar jenis raster. Metode coding ini menghasilkan file EPS yang bisa melakukan penskalaan tanpa kehilangan kualitas.<\/span><\/p>

Sama seperti file TIFF, file EPS juga banyak digunakan untuk keperluan pencetakan.<\/span> Untuk melihat file EPS, gunakan software ilustrasi di OS yang digunakan, karena format file gambar ini tidak didukung oleh web browser<\/span> utama mana pun dan tidak bisa dilihat menggunakan image viewer default.<\/span><\/p>

11. PDF<\/h3>

Portable Document Format<\/b> atau PDF adalah format gambar yang termasuk dalam vektor dengan kompresi lossless, memungkinkan Anda memperbesar gambar sejauh yang Anda mau.<\/span> Meskipun lebih terkenal sebagai format dokumen, PDF<\/span> juga bisa digunakan untuk gambar dan ilustrasi.<\/span><\/p>

File PDF dibuat dengan bahasa PostScript yang sama dengan EPS sehingga menjadi pilihan yang sangat baik untuk dicetak. Format gambar ini juga merupakan pilihan terbaik untuk laporan visual interaktif atau infografis, karena bisa diindeks dan memiliki teks yang bisa dicari.<\/span><\/p>

Anda juga bisa menyertakan elemen interaktif dalam PDF, misalnya, link dan tombol CTA.<\/span><\/p>

Semua browser utama mendukung format PDF, tapi Anda tidak bisa menggunakan PDF untuk menampilkan gambar sebagai konten web. Anda bisa memasukkannya sebagai bagian dari konten website, tapi file PDF akan dibuka di tab baru yang terpisah.<\/span><\/p>

Anda juga tidak bisa menampilkan file PDF menggunakan image viewer bawaan OS atau software editor foto. Nah, tapi, Anda bisa menggunakan editor dokumen standar, seperti <\/span>MS Word<\/b>, <\/span>OpenOffice<\/b> , atau <\/span>Google Documents<\/b> untuk membukanya.<\/span><\/p>

Kalau menggunakan WordPress sebagai CMS favorit Anda, gunakan plugin WordPress PDF viewer<\/a><\/span> agar pengunjung Anda bisa menampilkan file PDF di browser mereka.<\/span><\/p>

12. INDD<\/h3>

InDesign Document <\/b>atau INDD adalah format gambar vektor yang digunakan oleh <\/span>Adobe InDesign<\/b> untuk menyimpan file proyek. Adobe InDesign adalah software desktop publishing yang umumnya digunakan untuk layouting atau desain halaman untuk kepentingan cetak dan digital, seperti majalah, koran, dan brosur.<\/span><\/p>

File INDD menyertakan semua elemen proyek, seperti konten halaman, style, dan color swatch, sehingga Anda bisa menyesuaikan atau mengeditnya di lain waktu. Namun, satu file INDD mungkin berukuran cukup besar karena bisa memuat beberapa halaman.<\/span><\/p>

Sama seperti PSD, Anda harus menginstal Adobe InDesign di komputer untuk melihat format ini secara lokal di OS apa pun karena image viewer default tidak mendukung INDD. Kemudian, INDD juga bukan merupakan format web-safe, yang artinya Anda tidak bisa membukanya langsung di browser apa pun.<\/span><\/p>

13. AI<\/h3>

Masih termasuk dalam format gambar dari Adobe, <\/span>Illustrator Artwork <\/b>atau AI adalah format asli software grafis vektor <\/span>Adobe Illustrator<\/b>. Anda bisa menyimpan gambar dan proyek, baik yang sudah selesai maupun masih dikerjakan. File AI khususnya digunakan untuk membuat ilustrasi dan vector art<\/em>.<\/span><\/p>

Karena AI termasuk dalam format vektor, Anda bisa mengatur skalanya sebesar atau sekecil yang Anda mau. File AI berisi semua elemen desain AI, termasuk goresan, garis, dan bentuk, yang memungkinkan Anda mengedit file kembali. Layer konten yang kompleks ini menyebabkan AI memiliki ukuran file yang relatif besar.<\/span><\/p>

Seperti format file gambar khusus Adobe lainnya, AI tidak didukung oleh browser apa pun dan image viewer default OS. Satu-satunya cara untuk melihat format ini adalah melalui Adobe Illustrator sendiri.<\/span><\/p>

\"\"<\/a><\/figure>

Kesimpulan<\/h2>

Menggunakan format gambar yang tepat akan membantu Anda mengoptimalkan kinerja sesuai kebutuhan. Misalnya, dengan format yang cocok untuk website, Anda pun bisa mempercepat loading website<\/a>, meringankan loading server, dan meningkatkan pengalaman pengguna.<\/span><\/p>

Nah, untuk membantu Anda, kami akan merangkum lagi semua pembahasan di atas.<\/span><\/p>

Macam-macam gambar<\/span> dan ekstensi file yang banyak digunakan di antaranya:<\/p>