Artikel
Optimalkan media situs web untuk kecepatan dan Core Web Vitals
Gambar dan video biasanya menyumbang 60 hingga 80 persen dari total bobot halaman web. 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, tetapi WebM dengan VP9 20 hingga 40 persen lebih kecil pada kualitas yang sama, yang penting bagi pengguna seluler dengan koneksi terbatas. Pendekatan praktisnya adalah mengonversi sekali ke WebM, menyajikannya sebagai sumber pilihan dalam elemen video, dan mempertahankan MP4 sebagai cadangan. Pengonversi video di sini memakai FFmpeg yang dikompilasi ke WebAssembly: konversi berjalan di dalam peramban Anda, tidak ada yang diunggah, dan berkas berukuran berapa pun bekerja selama perangkat Anda punya cukup memori. 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.
Alat dalam artikel ini
- Kompres gambar Kurangi ukuran berkas gambar tanpa mengunggah. Slider kualitas atau ukuran target dalam KB. Batch didukung.
- Ubah ukuran gambar Ubah ukuran dan konversi gambar (JPEG, PNG, WebP) tanpa mengunggahnya.
- Pengoptimal SVG Optimalkan dan perkecil berkas SVG dengan SVGO langsung di browser Anda. Tanpa unggah.
- Konverter video Konversi video antara MP4, WebM, MKV, dan MOV (H.264/H.265/VP9) di browser. Tanpa unggah.
- Gambar ke Base64 Konversi gambar ke data URI Base64 (dan sebaliknya) langsung di browser Anda. Salin, snippet CSS, 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.