Image Formats Explained: JPG vs PNG vs WebP vs SVG — pic0.ai

Kesalahan $47,000 yang Mengubah Cara Saya Memikirkan Format Gambar

Tiga tahun dalam karier saya sebagai konsultan kinerja web, saya menyaksikan situs e-commerce klien saya mengalami keruntuhan yang spektakuler selama penjualan Black Friday mereka. Penyebabnya? Gambar produk yang tidak dioptimalkan yang membuat server mereka tersungkur dan menghabiskan sekitar $47,000 dalam pendapatan yang hilang selama enam jam. Hari itu secara fundamental mengubah cara saya mendekati optimasi gambar, dan itulah sebabnya saya menulis panduan ini hari ini.

Saya Marcus Chen, dan saya telah menghabiskan dua belas tahun terakhir untuk mengoptimalkan kinerja web untuk perusahaan yang berkisar dari startup hingga pengecer Fortune 500. Dalam waktu itu, saya telah menganalisis lebih dari 2,000 situs web dan mengurangi total pengiriman gambar mereka menjadi sekitar 340 terabyte. Jika ada satu hal yang saya pelajari, itu adalah ini: memilih format gambar yang tepat bukan hanya keputusan teknis—ini adalah keputusan bisnis yang secara langsung memengaruhi pendapatan Anda.

Pemandangan format gambar telah berkembang secara dramatis sejak saya mulai di bidang ini. Kembali pada tahun 2012, kami pada dasarnya memiliki dua pilihan: JPG atau PNG. Hari ini, kami menavigasi ekosistem format yang kompleks termasuk WebP, AVIF, SVG, dan bahkan opsi yang muncul seperti JPEG XL. Setiap format memiliki kekuatan, kelemahan, dan kasus penggunaan idealnya. Memahami perbedaan ini bisa berarti perbedaan antara situs yang memuat dalam 1,2 detik dan satu yang memerlukan 8 detik—dan dalam kinerja web, 6,8 detik tersebut mungkin sama seperti keabadian.

Dalam panduan komprehensif ini, saya akan membahas empat format gambar paling penting yang perlu Anda pahami: JPG, PNG, WebP, dan SVG. Saya akan membagikan data kinerja di dunia nyata, saran implementasi praktis, dan kerangka pengambilan keputusan yang saya gunakan bersama klien saya. Baik Anda seorang pengembang, desainer, pemasar, atau pemilik bisnis, pada akhir artikel ini, Anda akan tahu persis format mana yang harus digunakan untuk setiap situasi.

JPG: Kuda Pekerja yang Masih Menguasai Web

Ayo kita mulai dengan format yang masih menyumbang sekitar 42% dari semua gambar di web: JPG (atau JPEG, kedua nama tersebut merujuk pada format yang sama). Dikembangkan oleh Joint Photographic Experts Group pada tahun 1992, JPG tetap sangat relevan selama lebih dari tiga dekade. Tapi mengapa?

"Dalam kinerja web, keterlambatan 6 detik bukan hanya menjengkelkan—itu adalah pembunuh konversi. Studi menunjukkan bahwa 53% pengguna seluler meninggalkan situs yang memerlukan lebih dari 3 detik untuk memuat, dan optimasi gambar adalah cara tercepat untuk mendapatkan kembali detik yang hilang itu."

JPG menggunakan kompresi lossy, yang berarti ia mencapai ukuran file yang lebih kecil dengan secara permanen membuang beberapa data gambar. Kejeniusannya JPG adalah bahwa ia membuang informasi yang lebih mungkin tidak diperhatikan oleh mata manusia. Ia mengeksploitasi fakta bahwa mata kita lebih sensitif terhadap perubahan kecerahan daripada perubahan warna, dan menggunakan ini untuk mengompres informasi warna secara lebih agresif dibandingkan data luminance.

Dalam pengujian saya, foto resolusi tinggi biasa pada 4000x3000 piksel mungkin memiliki ukuran 18-25 MB sebagai file yang tidak terkompresi. Simpan gambar yang sama sebagai JPG pada tingkat kualitas 85 (pada skala 0-100), dan Anda melihat ukuran file sekitar 2.1-2.8 MB—pengurangan sekitar 88-90%. Turunkan kualitas menjadi 75, dan Anda mungkin bisa turun hingga 1.2-1.6 MB dengan kehilangan kualitas yang minimal pada tampilan web.

Di sinilah menjadi menarik: hubungan antara pengaturan kualitas dan ukuran file tidaklah linear. Dalam pengalaman saya, titik manis untuk sebagian besar gambar web adalah antara kualitas 75-85. Melalui peralihan dari kualitas 85 menjadi 95 mungkin hanya memperbaiki kualitas visual sebesar 3-5% sambil meningkatkan ukuran file sebesar 40-60%. Sebaliknya, menurunkan dari 75 menjadi 60 dapat mengurangi ukuran file hingga 30-40%, tetapi penurunan kualitas menjadi jauh lebih terlihat, terutama di area dengan detail halus atau teks.

JPG sangat baik untuk foto dan gambar kompleks dengan banyak warna dan gradasi. Baru-baru ini saya mengoptimalkan situs perjalanan dengan 1,200 foto tujuan. Dengan mengonversi file PNG aslinya ke JPG pada kualitas 80, kami mengurangi total pengiriman gambar mereka dari 340 MB menjadi 87 MB—pengurangan 74%—tanpa keluhan dari pengguna tentang kualitas gambar.

Namun, JPG memiliki batasan signifikan. Ia tidak mendukung transparansi, yang langsung mengeluarkannya dari pertimbangan untuk logo, ikon, atau gambar apa pun yang perlu berada di latar belakang yang bervariasi. Ia juga kesulitan dengan tepi yang tajam, teks, dan grafik dengan warna solid. Saya pernah melihat seorang klien mencoba menggunakan JPG untuk logo mereka—artifak kompresi di sekitar teks membuatnya terlihat seolah-olah telah difotokopi tujuh belas kali.

Pertimbangan kritis lainnya: kompresi JPG bersifat destruktif dan kumulatif. Setiap kali Anda membuka, mengedit, dan menyimpan ulang JPG, Anda menerapkan putaran kompresi lossy lain. Saya telah melihat gambar yang telah diedit dan disimpan ulang beberapa kali mengalami penurunan hingga tidak dapat digunakan. Aturan saya: selalu simpan file master yang tidak terkompresi dan hanya ekspor ke JPG sebagai langkah akhir.

PNG: Ketika Kualitas dan Transparansi Paling Penting

PNG (Portable Network Graphics) dikembangkan pada tahun 1996 sebagai alternatif bebas paten untuk GIF, dan telah menjadi format andalan setiap kali Anda membutuhkan kompresi tanpa kehilangan atau transparansi. Tidak seperti JPG, PNG tidak membuang data gambar apa pun—apa yang Anda masukkan adalah apa yang Anda dapatkan.

PNG hadir dalam dua varietas utama: PNG-8 dan PNG-24. PNG-8 mendukung hingga 256 warna dan sangat baik untuk grafik sederhana, ikon, dan gambar dengan palet warna terbatas. PNG-24 mendukung jutaan warna dan adalah apa yang kebanyakan orang maksud ketika mereka mengatakan "PNG." Ada juga PNG-32, yang pada dasarnya adalah PNG-24 dengan saluran alpha 8-bit untuk transparansi.

Dukungan transparansi di PNG sangat mengesankan. Tidak seperti transparansi biner GIF (sebuah piksel sepenuhnya transparan atau sepenuhnya buram), PNG mendukung 256 level transparansi. Ini memungkinkan efek anti-aliasing yang halus dan semi-transparan. Baru-baru ini saya bekerja dengan sebuah agen desain yang perlu menempatkan logo klien mereka di berbagai latar belakang berwarna. Transparansi alpha PNG membuat ini menjadi hal yang sepele—logo tersebut terlihat sempurna di setiap latar belakang tanpa halo putih atau tepi yang bergerigi.

Namun, kompresi lossless PNG datang dengan biaya: ukuran file. Foto 4000x3000 yang sama yang saya sebutkan sebelumnya? Sebagai PNG-24, itu mungkin berukuran 12-18 MB—sekitar 6-10 kali lebih besar dibandingkan JPG yang sebanding. Untuk foto dan gambar kompleks, penalti ukuran ini jarang dibenarkan untuk penggunaan web.

Di mana PNG benar-benar bersinar adalah dengan grafik, logo, tangkapan layar, dan gambar yang mengandung teks. Saya menjalankan tes perbandingan dengan tangkapan layar dari editor kode. Sebagai JPG pada kualitas 85, ukuran filenya 340 KB, tetapi teksnya sedikit kabur dan ada artifak kompresi yang terlihat di sekitar tepi yang tajam. Sebagai PNG, ukuran filenya 890 KB, tetapi teksnya sangat tajam dan terbaca. Untuk dokumentasi teknis atau situasi di mana kejelasan sangat penting, perbedaan 550 KB itu sangat berharga.

PNG juga unggul dengan gambar yang memiliki area besar warna solid. Algoritma kompresi sangat efisien dengan pola berulang dan warna solid. Sebuah logo sederhana dengan tiga warna solid mungkin berukuran 15-20 KB sebagai PNG tetapi 45-60 KB sebagai JPG, meskipun JPG seharusnya menjadi format "lebih kecil".

Salah satu teknik optimasi yang sering saya gunakan adalah kuantisasi PNG—mengurangi palet warna untuk membuat file PNG-8 yang lebih kecil. Alat seperti pngquant dapat mengurangi PNG-24 ke PNG-8 dengan pemilihan warna yang cerdas, sering kali mencapai pengurangan ukuran file 60-80% dengan kehilangan kualitas yang minimal terlihat. Saya menggunakan teknik ini pada satu set ikon untuk aplikasi seluler, mengurangi total ukuran dari 2,3 MB menjadi 580 KB sambil mempertahankan kualitas visual yang tidak dapat dibedakan oleh pengguna.

WebP: Format Modern yang Harus Menjadi Default Anda

Jika saya bisa memberikan Anda hanya satu saran dari seluruh artikel ini, itu akan menjadi ini: mulailah menggunakan WebP untuk hampir semua...