Cara Mengoptimalkan Gambar untuk Situs Web: Panduan Praktis

Gambar sering menjadi bagian besar transfer halaman dan dapat memengaruhi penemuan, decoding, tata letak, serta Largest Contentful Paint. Optimasi dapat memberi hasil berarti, tetapi tidak ada penghematan tetap atau hasil peringkat untuk semua halaman. Berikut alur yang dapat diukur tahap demi tahap.

Mengapa Optimasi Gambar Lebih Penting dari Sebelumnya

Laporan bobot halaman HTTP Archive menunjukkan gambar tetap penting di banyak halaman walau median berubah. Largest Contentful Paint (LCP) mengukur saat elemen layak terbesar di viewport dirender; sering berupa gambar, tetapi tidak selalu.

Ambang LCP Google menganggap hingga 2.5 detik baik dan di atas 4 detik buruk pada persentil ke-75 kunjungan. Pekerjaan gambar dapat memindahkan halaman jika sumber LCP adalah hambatan, tetapi sendiri tidak menjamin lulus Core Web Vitals atau posisi pencarian.

Langkah 1: Pilih Format yang Tepat

Pemilihan format sangat memengaruhi ukuran dan kemampuan. Perbandingan berikut bersifat kualitatif karena benchmark bergantung pada sumber, encoder, pengaturan, dan sasaran kualitas:

WebP adalah kandidat default berguna, bukan jawaban universal. Jika pipeline dan audiens mendukung AVIF, uji sebagai <source> lebih awal dengan fallback WebP atau JPEG. Anda dapat mengonversi JPG ke WebP atau ke AVIF di Vizua; file diproses di browser dan tidak dikirim ke server kami.

Untuk perbandingan lebih jauh, lihat WebP vs AVIF dan penjelasan kompresi lossy vs lossless.

Langkah 2: Ubah Ukuran ke Dimensi Tampilan Sebenarnya

Foto 4000 × 3000 piksel yang tampil 800 × 600 memiliki jauh lebih banyak piksel daripada slotnya. Layar responsif berkepadatan tinggi mungkin memerlukan kandidat lebih besar, tetapi mengirim asli kamera biasanya menambah transfer dan decoding yang tidak perlu.

Prinsipnya menawarkan kandidat dekat ukuran dan kepadatan render. Gunakan srcset dan sizes agar browser memilih, serta pertimbangkan lebar layout, kepadatan perangkat, kualitas, zoom, dan art direction, bukan mengunci satu pengali “Retina”.

Contoh dimensi awal untuk disesuaikan dengan layout:

• Hero selebar penuh: mulai dari slot render terbesar, lalu buat kandidat untuk kepadatan dan breakpoint relevan
• Gambar konten: cocokkan kolom dan keadaan responsif yang lebih lebar
• Thumbnail: buat kandidat dekat tiap ukuran kartu, bukan memakai ulang hero
• Avatar: perhitungkan lingkaran atau kotak, kepadatan, dan tampilan profil rinci

Gunakan pengubah ukuran gambar Vizua sebelum kompresi. Penghematan bergantung pada jumlah piksel awal dan target; ukur file yang dibuat.

Langkah 3: Kompres dengan Pengaturan Kualitas yang Tepat

Setelah memilih format dan ukuran, atur encoder. Skala kualitas tidak linear dan tidak baku antar-encoder atau format. Nilai rendah biasanya menukar lebih banyak informasi dengan lebih sedikit byte pada encoder lossy, tetapi ukuran dan perubahan visual harus diukur pada output.

Pengaturan kualitas yang direkomendasikan:

• JPEG: 75–85 dapat menjadi rentang awal konservatif. Skala berbeda; periksa output.
• WebP: 75–80 adalah rentang awal, bukan setara terjamin dengan JPEG.
• AVIF: 60–75 dapat menjadi awal di beberapa alat; skala dan encoder berbeda.
• PNG: coba kompresi lossless lebih kuat dahulu. Kuantisasi palet hingga maksimal 256 entri dapat lebih hemat, tetapi mengurangi warna secara lossy dan perlu diperiksa.

Kompresor JPEG Vizua memungkinkan pengaturan kualitas dan pemeriksaan output. Untuk metode rinci, lihat kompresi tanpa kehilangan kualitas.

Langkah 4: Sajikan Gambar Secara Efisien

Kompresi yang baik baru setengah pekerjaan. Cara Anda menyajikan gambar ke browser sama pentingnya untuk performa.

Tentukan dimensi secara eksplisit

Beri setiap <img> width dan height intrinsik akurat, atau simpan slot dengan aturan layout. Browser dapat menetapkan rasio lebih awal. Ini mengurangi gerak akibat gambar, tetapi font, konten suntikan, animasi, dan gaya responsif salah masih memengaruhi Cumulative Layout Shift (CLS).

Terapkan lazy-load untuk gambar di bawah fold

Pertimbangkan loading="lazy" untuk gambar cukup jauh dari viewport awal. Jangan gunakan otomatis pada gambar LCP atau konten yang segera dibutuhkan. Heuristik browser, carousel, cetak, scroll cepat, dan layout tersembunyi memerlukan pengujian.

Prioritaskan gambar hero Anda

Jangan tunda gambar LCP yang mungkin. Pertimbangkan fetchpriority="high" jika benar-benar layak mendapat bandwidth awal dan pastikan ditemukan dalam HTML awal. Jangan memberi prioritas tinggi secara luas; pastikan efek lewat trace dan data lapangan.

Gunakan gambar responsif

srcset dan sizes memberi kandidat serta menjelaskan slot. Browser mempertimbangkan viewport, kepadatan, cache, dan implementasi. Pastikan sizes sesuai layout; nilai salah dapat memilih kandidat terlalu besar atau kecil.

Langkah 5: Audit dan Ukur Secara Berkala

Optimasi bukan pekerjaan sekali selesai. Setiap gambar baru yang Anda tambahkan adalah peluang terjadinya kemunduran.

• PageSpeed Insights: jalankan PageSpeed Insights pada halaman perwakilan. Tinjau LCP lapangan dan lab terpisah lalu diagnosis gambar saat ini, bukan label audit yang dapat berubah.
• Network DevTools: urutkan request menurut ukuran dan periksa gambar besar dalam konteks. Tanyakan apakah dimensi, format, kompresi, cache, dan prioritas sesuai peran, bukan memaksakan batas KB universal.
• Otomatiskan: tambahkan optimasi ke pipeline build agar gambar terlalu besar ditemukan sebelum tayang.

Daftar Periksa Cepat

• Buat dan bandingkan varian JPEG, WebP, AVIF, PNG, atau SVG yang sesuai
• Ubah ukuran ke dimensi tampilan sebenarnya, tidak lebih lebar dari perlu
• Mulai dengan pengaturan konservatif, bandingkan byte dan tampilan; jangan samakan angka kualitas antarformat
• Simpan slot akurat untuk tiap <img>, biasanya dengan width dan height intrinsik
• Pertimbangkan fetchpriority="high" untuk gambar LCP lalu ukur
• Tunda gambar luar layar yang tepat; uji scroll dan layout
• Gunakan srcset/sizes untuk distribusi responsif
• Tetapkan anggaran performa dari halaman, audiens, dan data lapangan
• Hapus metadata pribadi tak perlu, tetapi simpan profil warna atau data yang diperlukan alur — lihat EXIF dan privasi
• Audit secara rutin dengan PageSpeed Insights

Pertanyaan yang Sering Diajukan