Panduan Pemula untuk JPEG vs PNG (Dan Cara Menggunakan Keduanya)

Apa jadinya web dengan gambar? Dalam beberapa dekade, internet telah berubah dari printer dot matrix digital menjadi server dinamis multimedia, termasuk gambar, video, animasi, dan banyak lagi. Namun, ketika berbicara tentang diam digital, mungkin ada kebingungan tentang JPEG vs PNG, khususnya kapan harus menggunakan masing-masing.

Jika Anda melihat gambar JPEG di samping yang sama tetapi sebagai PNG, Anda mungkin tidak akan melihat perbedaan. Ini adalah yang ideal, karena kedua format gambar bertujuan untuk mereproduksi gambar terbaik untuk web. Padahal, ada kasus penggunaan dan teknik pengoptimalan yang berbeda yang perlu Anda perhatikan.

Pada artikel ini, kami akan membandingkan JPEG vs PNG, dan memberi tahu Anda kapan Anda harus menggunakan setiap format gambar. Namun pertama-tama, mari perkenalkan Anda pada setiap jenis file.

Perbedaan Antara JPEG vs PNG

Di permukaan (dalam arti harfiah), tidak ada perbedaan antara JPEG dan PNG. Dengan kata lain, jika kami memasang dua gambar dan meminta Anda untuk memilih yang mana JPEG dan mana yang PNG, Anda tidak akan dapat memberi tahu sebagian besar waktu. Sebagai contoh, ambil gambar berikut:

Apakah Anda dapat membuat keputusan tentang apakah kupu-kupu Scarlet Mormon ini bergambar JPEG atau PNG? Tentu saja, tanpa kerangka acuan Anda tidak dapat membuat perbandingan:

Ada perbedaan yang pasti, meskipun tidak akan membuat banyak perbedaan dalam kasus ini. Saat Anda mencoba memutuskan (tanpa mengintip alat pengembang browser Anda), ada beberapa detail teknis yang dapat kami bagikan:

• Format file Joint Photographic Experts Group (JPEG) menawarkan kompresi gambar digital yang hilang. Ini berarti kualitas gambar terlihat jika keseimbangan antara ini dan ukuran file berubah terlalu jauh. JPEG adalah file 'datar'. Dengan kata lain, mereka tidak dapat menampilkan transparansi dalam file. Meskipun Anda dapat menyesuaikan tingkat kompresi, bahkan pada pengaturan terbaiknya, JPEG akan menjadi file 8-bit, yang memengaruhi rentang dinamis. Terlebih lagi, JPEG sering menyertakan profil warna, yang memberi tahu monitor cara menampilkan warna di dalamnya.
• Sebaliknya, gambar Portable Network Graphics (PNG) adalah file web-ready. Ini adalah format yang lebih dinamis daripada JPEG, dengan kemampuan untuk menghasilkan file 24-bit. Ini juga merupakan format 'lossless', yang berarti Anda dapat menduplikasinya tanpa menurunkan kualitas gambar. Padahal, Anda tidak dapat menyesuaikan kompresi untuk file PNG, dan tidak ada profil warna. Meskipun demikian, PNG sangat cocok untuk web, berdasarkan spesifikasi teknisnya.

Tampaknya jelas – PNG cocok untuk web, dan JPEG tidak. Nah, ini bukan cerita lengkapnya. Setiap jenis file sangat bagus untuk aplikasi tertentu. Selanjutnya, kita akan membahasnya.

JPEG vs PNG: Kapan Anda Harus Menggunakan Masing-masing

Web mendapatkan yang terbaik dari JPEG dan PNG. Bahkan, mereka cocok dengan cara yang bagus tanpa banyak silang. Sebagai soundbite yang berguna, inilah saatnya Anda harus menggunakan JPEG vs PNG:

Jika Anda ingin menampilkan foto, gunakan JPEG. Untuk file lain – terutama grafik digital – gunakan PNG.

Padahal, saran ini tidak berlaku untuk setiap situasi (walaupun relevan untuk hampir setiap kasus). Misalnya, jika Anda menggabungkan gambar digital dengan gambar stok, baik JPEG dan PNG secara teknis akan salah untuk digunakan. Nantinya, Anda akan memiliki lebih banyak pengetahuan untuk membuat keputusan yang tepat, meskipun ada beberapa petunjuk lain yang bisa Anda berikan.

Misalnya, jika Anda membayangkan menyalin gambar, gunakan format file yang berbeda dari JPEG. Ini karena format kompresi lossy hanya merekonstruksi versi perkiraan file. Sebaliknya, PNG adalah reproduksi 1:1 karena menawarkan kompresi lossless.

Juga, jika Anda ingin mengubah ukuran gambar setelah Anda menyimpannya, gunakan JPEG karena ini menangani penskalaan dengan baik. PNG menggunakan struktur pengkodean yang berbeda, yang menurun setelah Anda mengubah dimensi (atau atribut teknis lainnya).

Format Gambar Lain Yang Harus Anda Ketahui

Tentu saja, JPEG vs PNG bukan satu-satunya perbandingan format file gambar yang perlu dipertimbangkan. Ada banyak jenis file lain yang bersaing untuk mendapatkan perhatian, dan memiliki kasus penggunaan lain:

• Format Antarmuka Grafis (GIF). Jika Anda memposting meme atau video reaksi ke Twitter yang bernyawa, itu adalah GIF. Faktanya, PNG terlihat untuk menggantikan file GIF dalam spesifikasi aslinya, dan keduanya menawarkan lapisan transparansi.
• Format File Gambar Tagged (TIFF). Format file berbasis raster ini sangat bagus untuk dicetak karena mendukung ruang warna CMYK.
• Format gambar mentah (RAW). Anda hanya akan menggunakan ini jika Anda seorang fotografer, dan ini eksklusif untuk kamera yang Anda gunakan. Meskipun Anda dapat melihat file RAW di komputer Anda, Anda memerlukan perangkat lunak khusus untuk melihatnya. Ukuran file sangat besar, karena datanya lengkap. Faktanya, format RAW bukanlah gambar, tetapi data yang ketika dikodekan mewakili gambar.
• File Gambar Efisiensi Tinggi (HEIF). Ini adalah format file utama perangkat iOS. Ini menawarkan kompresi dan ukuran file yang lebih baik daripada JPEG, dan dapat menangani banyak format multimedia yang berbeda.

Sementara masing-masing file gambar ini akan digunakan di web (dengan pengecualian file RAW sehubungan dengan tampilan), JPEG vs PNG masih mendominasi. Keduanya memiliki kasus penggunaan khusus yang pro dan kontranya seimbang.

Bagaimana Mempersiapkan Gambar Anda Untuk Diunggah (Dalam 3 Cara)

Meskipun JPEG vs PNG keluar sebagai hasil imbang sehubungan dengan kualitas tampilan akhir, Anda harus menangani setiap format dengan cara yang berbeda untuk mendapatkan yang terbaik darinya. Ada tiga area yang dapat Anda pengaruhi ukuran file, kualitas, dan persiapan keseluruhan gambar Anda:

• Pastikan dimensi memperhitungkan kasus penggunaan relevan yang akan Anda hadapi.
• Pilih resolusi untuk gambar Anda yang sesuai untuk web.
• Gunakan kompresi 'selera' untuk lebih mengurangi ukuran file gambar Anda tanpa terlalu memengaruhi kualitas.

Seperti yang Anda harapkan, ada keseimbangan yang bagus di sini. Mari kita mulai dengan dimensi gambar Anda.

1. Tetapkan Dimensi Anda

Dimensi gambar lebih penting bagi pengguna akhir daripada titik lain dalam rantai. Ini karena browser harus memuat gambar, dan file yang besar akan mengikis User Experience (UX). Padahal, ini bukan satu-satunya pertimbangan. Tentu saja, kualitas adalah kuncinya juga. Jika Anda memutuskan untuk membuat gambar berukuran kecil, itu akan mempengaruhi kualitas gambar akhir (lebih untuk JPEG daripada PNG).

Jawabannya adalah untuk mencapai sweet spot di beberapa area, dimulai dengan dimensi gambar Anda. Sebagai aturan umum, Anda ingin membuat gambar Anda cukup besar sehingga dapat menyampaikan detail yang Anda butuhkan. Ada titik berlebihan di suatu tempat yang berbeda tergantung pada platform target dan gambar itu sendiri.

Sensor krop modern dan kamera digital full-frame dapat menghasilkan gambar dengan dimensi default sekitar 6.000 px x 3.000 px (walaupun ada perbedaan liar antar kamera). Sebaliknya, gambar dengan 'tepi panjang' sekitar 2.000 piksel umum di media sosial. Ingatlah bahwa ini untuk ditampilkan di viewport penuh perangkat.

Untuk gambar blog, aturan praktis 2.000 piksel ini bahkan bisa serendah 1.000 piksel. Ini juga memperhitungkan gambar definisi tinggi atau 'Retina'. Mereka sering membutuhkan dimensi dua kali lipat untuk ditampilkan setajam di layar definisi tinggi. Faktanya, resolusi adalah tempat yang baik untuk dituju.

2. Atur Resolusi yang Tepat

Salah satu elemen dasar layar digital adalah piksel. Titik-titik kecil ini membentuk keseluruhan tampilan, meskipun ukuran pikselnya tidak seragam. Karena itu, kami juga harus mempertimbangkan resolusi saat menyiapkan gambar JPEG dan PNG kami.

Kami menggunakan Pixels Per Inch (PPI) untuk membahas berapa banyak piksel yang dapat masuk ke layar. Anda juga dapat menyatakan ini dalam sentimeter, atau sebagai 'titik'. Yang terakhir adalah untuk format cetak fisik, dan lingkaran desain grafis sering menggunakan DPI. Dengan demikian, Anda akan mendengarnya digunakan dengan cara yang dapat dipertukarkan, meskipun PPI adalah istilah yang benar.

Sementara spesifikasi gambar PNG menggunakan 72 PPI sebagai resolusi desain yang optimal, ini tidak akan mempertimbangkan layar definisi tinggi modern. Meskipun Anda dapat menggandakan dimensi gambar untuk membuatnya tajam di semua layar, Anda juga dapat melakukan hal yang sama dengan resolusinya. Misalnya, ambil tangkapan layar desktop macOS Big Sur ini:

Ini adalah PNG, dengan 1.000 piksel di tepi yang panjang (dalam hal ini bagian atas dan bawah). Padahal, ia menggunakan 144 PPI – meskipun ada beberapa 'ajaib' unggahan yang mengubah resolusi menjadi 72 PPI saat mengunggah ke WordPress.

Gambar PNG dan JPEG juga dapat menggunakan PPI yang jauh lebih tinggi – resolusi siap cetak sekitar 300 DPI/PPI. Terlebih lagi, banyak gambar dari situs stok foto seperti Pixabay akan diunduh menggunakan 300 PPI:

Dengan demikian, mengurangi ini akan lebih mempersiapkan gambar Anda untuk web dan berbagai tampilannya.

3. Optimalkan Gambar Anda Menggunakan Kompresi

Kami tidak perlu memberi tahu Anda banyak tentang pengoptimalan gambar. Ini adalah topik yang dapat Anda temukan di tempat lain di blog, dan hampir semua pengguna WordPress akan tahu untuk mengoptimalkan gambar baik sebelum atau selama proses pengunggahan.

Konsep umumnya adalah Anda menerapkan kompresi ekstra pada gambar, seringkali dengan cara yang hilang. Ini memang memengaruhi kualitas gambar, dan itu terlihat jika Anda membuat perubahan besar pada dimensi dan resolusi sebelum menerapkan kompresi lossy yang berat.

Artefak ini harus minimal untuk menyajikan gambar dengan baik. Karena itu, ada banyak alat yang tersedia untuk melakukan pekerjaan itu. Yang paling mudah diakses adalah TinyPNG, meskipun juga mengompresi JPEG:

Padahal, kompresi yang diterapkannya lembut pada beberapa gambar, yang mungkin tidak cukup menurunkan ukuran file. Layanan seperti ShortPixel memiliki format kompresi lossy agresif yang tersedia, sementara kompresi Glossy-nya melakukan pekerjaan yang mengagumkan dibandingkan dengan TinyPNG.

Kesimpulannya di sini adalah Anda harus menyeimbangkan tingkat kompresi dengan ukuran file, dan semua elemen gambar lainnya. Di bagian berikutnya, kita akan membahas pendekatan terbaik yang harus diambil.

JPEG vs PNG: Cara Memaksimalkan Setiap Format

Terlepas dari perbedaan dalam format file, sifat penjelajahan web berarti Anda dapat mempersingkat persiapan gambar Anda sebagai berikut:

• Gunakan dimensi antara 1.000–2.048 piksel di tepi panjang.
• Tetapkan resolusi 144 PPI untuk semua gambar Anda, untuk memastikan tampilannya tajam dan jernih di semua layar.
• Terapkan kompresi halus melalui pengoptimalan gambar untuk membantu menurunkan ukuran file. Dengan mempertimbangkan semuanya, sebagian besar gambar berukuran sekitar 100–200kb.

Ada sedikit lagi di sini berdasarkan format file tertentu:

• Untuk file PNG, mengurangi dimensi dapat menurunkan kualitas gambar terlalu banyak. Idenya di sini adalah untuk menjaga resolusi setinggi mungkin untuk mengurangi faktor-faktor tersebut.
• File JPEG tidak tahan untuk disalin, karena setiap duplikasi lebih terdegradasi daripada yang terakhir. Jika Anda dapat mengontrol dari mana asal JPEG (misalnya, jika Anda mengambil foto), buat JPEG dari file TIFF atau RAW untuk mempertahankan kualitas di dalam gambar.
• Dalam pengalaman kami, JPEG tidak mengambil kompresi serta format file lainnya. Ini berarti penting untuk mempersiapkan dan mengoptimalkan gambar tersebut sebelum Anda mendapatkan tahap kompresi.

Sekarang, Anda harus memiliki pemahaman yang kuat tentang JPEG vs PNG, kapan menggunakannya, dan bagaimana mempersiapkan file Anda; dan jika Anda masih ingin tahu gambar mana yang JPEG dari awal artikel, itu yang pertama!

Membungkus

Sepertinya gambar menjalankan web. Karena itu, kami memiliki sejumlah format file untuk membantu kami memberikan kualitas yang tepat dengan ukuran file yang sesuai untuk aplikasi. JPEG vs PNG adalah perbandingan umum karena tidak jelas apa yang baik, dan keduanya adalah format gambar yang populer.

Singkatnya, JPEG adalah untuk foto, dan PNG untuk grafik. Untuk menyiapkan file Anda, perhatian utama harus menjaga kualitas gambar tetap tinggi daripada ukuran file. Namun, meskipun penyesuaian resolusi memberi Anda perubahan terbesar, ini lebih berdampak pada kualitas gambar. Triknya adalah menyeimbangkan dimensi, resolusi, dan kompresi untuk mencapai gambar web-ready terbaik.

Apakah Anda menyiapkan gambar untuk web seperti yang telah kami uraikan di sini, atau apakah Anda melakukan sesuatu yang berbeda? Beri tahu kami di bagian komentar di bawah!

Kredit gambar: minka2507, christels .