SVG vs PNG/JPG: mengapa format vektor penting untuk performa dan SEO

PNG dan JPG: sempurna untuk foto, terlalu berat untuk antarmuka

PNG dan JPG adalah format raster: gambar berupa kisi piksel. Logo 512×512 yang diekspor sebagai PNG "memotret" setiap titik. Agar tetap tajam pada layar Retina, Anda sering kali harus menyajikan versi dua atau tiga kali lebih besar, sehingga ukurannya menjadi dua atau tiga kali lipat dalam KB. JPG memampatkan foto dengan lebih baik, tetapi menghancurkan warna solid, menambahkan artefak di sekitar teks, dan tidak mendukung transparansi. Keduanya tidak dirancang untuk logotipe atau ikon yang harus ditampilkan pada 24 piksel di navigasi dan 240 piksel di banner.

SVG (Scalable Vector Graphics) mendeskripsikan bentuk melalui kurva dan koordinat, bukan piksel. Memvektorisasi PNG dengan PixelToPath berarti mengganti bitmap statis dengan jalur yang digambar ulang oleh browser pada ukuran layar yang tepat. Hasilnya: file umumnya jauh lebih ringan dan sama tajamnya di ponsel, komputer, dan layar 4K.

Apa yang sebenarnya diubah SVG pada sebuah situs web

Untuk antarmuka, SVG bukan sekadar tambahan estetika. Ini adalah pendorong performa: lebih sedikit byte di jaringan, lebih sedikit varian untuk dikelola, cache yang lebih sederhana, dan rendering vektor bawaan di semua browser modern.

Keuntungan paling nyata bagi seorang developer atau ahli SEO:

• Ukuran: logo sederhana yang awalnya 40 hingga 80 KB dalam format PNG bisa turun menjadi beberapa KB saja dalam bentuk SVG, dan Anda bisa menghapus ekspor @2x / @3x
• Skalabilitas: satu file, tajam pada 16 piksel maupun 4K layar penuh, tanpa srcset atau media queries untuk gambar
• Core Web Vitals: lebih sedikit data yang diunduh (LCP) dan ruang cadangan stabil menggunakan viewBox (CLS)
• SEO teknis: halaman lebih cepat di perangkat seluler, format yang dipahami Google, dan teks yang bisa disematkan di dalam SVG

PNG vs SVG: ukuran logo sangatlah penting

Gambar masih menjadi penyumbang terbesar beban halaman. Kita mengoptimalkan foto ke dalam format WebP, tapi lupa dengan logo di header dan sekitar dua puluh ikon PNG dalam CSS. File-file ini diulang di semua URL: setiap milidetik yang terbuang berlaku untuk seluruh situs.

Perbandingan ukuran setelah vektorisasi dengan PixelToPath, pada skenario umum situs web perusahaan atau aplikasi web:

Skenario	PNG / JPG	SVG
Logo 512 px dengan transparansi	40 hingga 80 KB	2 hingga 12 KB tergantung warna dan simpul
Logo yang sama disajikan @2x (1024 px) untuk Retina	Bobot berlipat dua, kadang tiga kali lipat	Satu berkas, tidak berubah
20 ikon UI diekspor @3x (72×72)	Ditambah 40 hingga 160 KB	Totalnya hanya beberapa KB
Logo berwarna datar dari JPG	Artefak dan halo di sekitar bentuk dan teks	Tepi bersih, dan berkas yang lebih ringan lagi

Aturannya sederhana: apa pun yang berbentuk geometri, teks, piktogram, atau logotipe sebaiknya menggunakan SVG. Foto dan tangkapan layar sebaiknya menggunakan JPG, WebP, atau AVIF. SVG bukan pengganti untuk segalanya: melainkan format yang paling tepat untuk antarmuka.

Skalabilitas: satu file yang tajam dari smartphone hingga 4K

PNG hanya akan tampak tajam pada resolusi aslinya. Jika diperbesar, pikselnya akan terlihat. Jika diperkecil secara ekstrem, browser harus melakukan resampling ulang. Hal ini menyebabkan kerumitan dalam mengelola file @1x, @2x, @3x, srcset, dan kepadatan piksel CSS. Setiap breakpoint baru atau kepadatan layar baru (Retina, ponsel terbaru, monitor 4K) memerlukan ekspor gambar baru, atau memaksa penggunaan file yang terlalu besar "untuk berjaga-jaga".

SVG mengabaikan batasan tersebut. Mesin rendering menghitung kurva ke ukuran CSS yang diminta. Baik untuk favicon 32 piksel, logo 48 piksel di navigasi, merek yang sama pada 400 piksel di spanduk, atau proyeksi 4K: semuanya menggunakan file yang sama. Tidak ada keburaman, tidak ada aliasing, tidak ada permintaan ekstra untuk versi resolusi tinggi. Untuk sebuah pustaka komponen, ini juga berarti lebih sedikit utang teknis: satu ikon, satu file, untuk semua ukuran.

Core Web Vitals dan SEO: mengapa Google peduli dengan format gambar

Kecepatan di perangkat seluler merupakan faktor peringkat. Core Web Vitals (LCP, INP, CLS) mengukur apa yang dirasakan oleh pengguna. Mengganti logo PNG yang berat atau sejumlah ikon raster dengan SVG tidak akan secara ajaib mengubah halaman berukuran 4 MB menjadi 40 KB. Namun pada tata letak antarmuka situs, efeknya langsung terasa, terutama pada jaringan 4G atau ketika skor LCP tertahan oleh logo header.

Secara konkret, format vektor membantu tiga metrik berikut, asalkan kompleksitas kurva tetap terjaga secara wajar:

• LCP (Largest Contentful Paint): jika elemen terbesar yang terlihat adalah logo atau ilustrasi datar, SVG berukuran beberapa KB akan dimuat jauh lebih cepat dibanding PNG @2x sebesar 150 KB. Ini juga mengurangi beban jaringan untuk sisa elemen halaman
• CLS (Cumulative Layout Shift): SVG dengan atribut width, height, dan viewBox akan mencadangkan ruang sejak awal penguraian HTML. Browser tidak perlu menunggu proses decoding bitmap untuk mengetahui rasio gambar, sehingga meminimalkan lompatan tata letak
• INP dan Thread Utama: SVG sederhana (logo, ikon) sangat ringan untuk dirender. Namun hindari menggunakan SVG bergaya "foto" dengan ribuan jalur: ini bisa berukuran lebih besar daripada PNG dan memaksa prosesor bekerja lebih keras. Itulah alasan pentingnya jalur (path) yang bersih melalui PixelToPath, bukan salinan per piksel
• SEO di luar kecepatan: Google dapat mengindeks file SVG. Logo yang disematkan dapat memuat judul yang dapat diakses (accessible). Penggunaan gambar SVG dengan atribut alt tetap menjadi standar dasar. Selain itu, halaman yang lebih ringan akan mengurangi rasio pentalan teknis (bounce rate), sebuah sinyal pengalaman yang turut diperhitungkan dalam peringkat

Di mana SVG lebih unggul dibanding PNG/JPG pada situs web nyata

Ini bukan sekadar teori. Berikut adalah area-area di mana format vektor memberikan keuntungan secara instan:

• Logo di header dan footer: satu file, tajam di layar Retina, sering kali menjadi elemen yang paling banyak dilihat, dan terkadang berkontribusi pada skor LCP di halaman beranda yang minimalis
• Sistem ikon: tidak perlu lagi sprite PNG berukuran 1x/2x. Setiap piktogram adalah SVG (atau sprite SVG) yang dapat disesuaikan gayanya melalui CSS (menggunakan currentColor) tanpa perlu mengekspor ulang
• Favicon dan apple-touch-icon: menggunakan favicon SVG modern yang dilengkapi dengan satu versi PNG cadangan dapat menghindari kerepotan dalam memelihara berbagai ukuran gambar seperti 16, 32, hingga 180 piksel
• Ilustrasi antarmuka dan status kosong (empty state): gambar datar berformat vektor tetap tajam meskipun ditampilkan dalam layar penuh, tanpa menghabiskan banyak ukuran file layaknya gambar header
• Halaman pendaratan SEO (Landing page): setiap kilobyte yang dihemat pada tata letak visual akan meningkatkan skor di Lighthouse, PageSpeed Insights, serta meningkatkan kenyamanan di perangkat seluler—semua ini adalah sinyal penting yang dikumpulkan untuk menentukan peringkat

Gunakan format JPG/WebP untuk foto-foto. Pindahkan logo, piktogram, dan ilustrasi datar Anda ke dalam format SVG. Ini adalah metode pengelompokan yang sudah diterapkan oleh situs-situs web dengan performa tercepat.