Artikel
Optimalkan media situs web untuk kecepatan dan Core Web Vitals
Gambar biasanya menyumbang sekitar 40 persen dari total bobot sebuah halaman web, lebih besar dari jenis sumber daya lainnya, dan video menambah jauh lebih banyak lagi pada halaman yang kaya media. Membenahinya adalah hal berdaya ungkit tertinggi yang dapat Anda lakukan untuk kecepatan muat, skor Core Web Vitals, dan peringkat pencarian. Kabar baiknya: tidak satu pun dari itu memerlukan perangkat lunak khusus atau server, dan berkas Anda tidak pernah perlu meninggalkan perangkat Anda.
Pilih format yang tepat sebelum hal lainnya
Pilihan format lebih penting daripada penggeser kualitas mana pun. Untuk foto di halaman web, WebP adalah bawaan yang tepat: ia 25 hingga 35 persen lebih kecil daripada JPEG pada kualitas visual yang sama dan setiap peramban modern mendukungnya. AVIF mengompres lebih jauh lagi, hingga 50 persen lebih baik daripada JPEG, dengan ongkos penyandian yang lebih lambat. Gunakan AVIF untuk gambar hero dan foto produk yang Anda kompres sekali; gunakan WebP untuk apa pun yang Anda proses secara massal atau butuhkan dengan cepat. PNG hanya pantas dipakai ketika Anda butuh ketepatan tanpa kehilangan atau latar transparan. SVG adalah satu-satunya pilihan masuk akal untuk logo, ikon, dan ilustrasi: ia menyesuaikan ukuran apa pun dan kerap berbobot beberapa kilobita berbanding ratusan untuk padanan rasternya.
Kompres gambar tanpa kehilangan kualitas yang terlihat
Mulai dengan mengubah ukuran ke dimensi tampilan sebenarnya: gambar hero yang ditampilkan selebar 1280 piksel tidak memerlukan data 4000 piksel. Ubah ukuran lebih dulu, lalu kompres. Untuk foto, kualitas 80 di WebP atau JPEG adalah ambang praktis yang di bawahnya pengunjung awam mulai menyadari perbedaan, jadi bidik 75 hingga 85 dan amati keluaran pada zum penuh sebelum menerbitkan. Untuk grafis dengan teks dan area rata, PNG tanpa kehilangan atau SVG menjaga ketajaman yang dileburkan oleh format lossy. Kompresor gambar di situs ini menangani semua format tersebut, berjalan sepenuhnya di peramban Anda, dan menerapkan algoritme yang sama dengan alat desktop khusus.
Konversi video untuk web tanpa mengunggahnya
Perulangan latar dan video tersemat adalah bagian di mana optimasi media web sering meleset. MP4 dengan H.264 diputar di mana saja, dan WebM adalah alternatif bebas royalti yang didukung setiap peramban modern. Pengonversi video di situs ini meng-encode WebM dengan VP8, yang berada di kelas kompresi yang sama dengan H.264: sekadar berganti kontainer saja tidak memperkecil berkas, keuntungan sebenarnya adalah rantai codec yang sepenuhnya bebas royalti dan dukungan native untuk kanal alfa. Pendekatan praktisnya adalah mengonversi sekali ke WebM, menyajikannya sebagai sumber pilihan dalam elemen video, dan mempertahankan MP4 sebagai cadangan untuk peramban yang lebih lama. Konversi berjalan di dalam peramban Anda melalui FFmpeg yang dikompilasi ke WebAssembly: tidak ada yang diunggah, dan berkas hingga 500 MB dikonversi tanpa antrean. Untuk video latar sebaris, pertimbangkan juga pemangkas video untuk membuang detik-detik mati sebelum penyandian: durasi adalah pendorong terbesar ukuran berkas.
Aset sebaris: base64 dan SVG
Gambar sangat kecil, ikon, dan favicon yang disematkan langsung di HTML atau CSS sebagai untaian base64 menghapus satu perjalanan bolak-balik jaringan per aset. Ini masuk akal untuk aset di bawah sekitar 2 KB yang muncul di setiap halaman, seperti sprite logo atau indikator pemuatan. Aset yang lebih besar sebaiknya tetap menjadi berkas terpisah karena base64 menyandikan 33 persen lebih besar daripada binernya, dan peramban menyimpan rujukan berkas dalam cache tetapi tidak data sebaris secara terpisah. Pengoptimal SVG menghapus sisa-sisa editor dari SVG yang diekspor tanpa menyentuh tampilan visualnya. Pengonversi gambar-ke-base64 menghasilkan URI data siap tempel di peramban Anda.
Sajikan ukuran yang tepat dan muat terlebih dahulu
Dua detail pengiriman sama pentingnya dengan file itu sendiri. Yang pertama adalah ukuran responsif. Dengan daftar srcset menggunakan deskriptor lebar (image-400.webp 400w, image-800.webp 800w, dan seterusnya), browser memilih file terkecil yang masih mencakup layar, dengan mengalikan lebar CSS dengan rasio piksel perangkat (device pixel ratio) sebelum meminta apa pun. Ponsel dengan tata letak 390px dan layar 3x membutuhkan sekitar 1170 piksel, sehingga ia mengambil versi 1200w dan melewati file asli untuk desktop. Yang kedua adalah prioritas. Browser menjalankan pemindai pramuat (preload scanner) yang membaca ke depan dan mulai mengunduh gambar sebelum parser utama mencapainya; menambahkan fetchpriority="high" pada gambar terbesar di area yang langsung terlihat (above-the-fold) memberi tahu browser untuk mengambilnya lebih dulu, yang biasanya menentukan Largest Contentful Paint halaman tersebut.
Alat dalam artikel ini
- Kompres gambarKurangi ukuran berkas gambar tanpa mengunggah. Slider kualitas atau ukuran target dalam KB. Batch didukung.
- Ubah ukuran gambarUbah ukuran dan konversi gambar (JPEG, PNG, WebP) tanpa mengunggahnya.
- Pengoptimal SVGOptimalkan dan perkecil berkas SVG dengan SVGO langsung di browser Anda. Tanpa unggah.
- Konverter videoKonversi video antara MP4, WebM, MKV, dan MOV (H.264/VP8) di browser Anda. Tanpa unggah.
- Gambar ke Base64Konversi gambar ke data URI Base64 (dan sebaliknya) langsung di browser Anda. Salin, snippet CSS, tanpa unggah.
- Slider perbandingan gambarBandingkan dua gambar secara berdampingan atau dengan slider (sebelum/sesudah). Tanpa unggah.
Pertanyaan yang sering diajukan
Apakah kompresi gambar memengaruhi peringkat pencarian saya?
Google memakai Core Web Vitals sebagai sinyal peringkat, dan Largest Contentful Paint hampir selalu berupa gambar atau poster video. Halaman yang gambar hero-nya memuat dalam kurang dari satu detik mendapat skor lebih baik daripada yang memerlukan tiga detik. Kompresi dan format yang tepat secara langsung memengaruhi metrik ini, jadi ya, optimasi gambar memberi dampak SEO yang terukur. Efeknya paling kuat di seluler, di mana koneksi lebih lambat dan penalti untuk gambar berat lebih besar.
Mengapa memproses media secara lokal alih-alih memakai layanan web?
Sebagian besar alat media daring mengharuskan mengunggah berkas Anda ke server jarak jauh, yang memakan waktu, menghabiskan bandwidth, dan berarti salinan berkas Anda ada di infrastruktur yang tidak Anda kendalikan. Alat di situs ini berjalan sepenuhnya di peramban Anda: gambar dan video Anda diproses di perangkat Anda dan keluarannya diunduh langsung. Tidak ada akun, tidak ada waktu tunggu unggah, dan tidak ada apa pun tentang berkas Anda yang pernah dikirim ke server.