Daftar isi
Gambar membantu pelanggan menilai produk dan memahami kualitas visual pekerjaan. Namun file yang lebih besar tidak selalu memberikan informasi yang lebih baik di layar. Optimasi gambar bertujuan mengirim detail yang memang dibutuhkan, pada waktu yang tepat, sambil menjaga komposisi dan keterbacaan.
Yang perlu Anda pertimbangkan
- Siapkan ukuran gambar berdasarkan tempat tampil dan perangkat, bukan hanya file sumber.
- Prioritaskan gambar utama; tunda gambar yang masih jauh di bawah layar.
- Periksa hasil kompresi secara visual, terutama teks kecil, warna produk, dan screenshot portofolio.
Mulai dari gambar yang paling memengaruhi pengalaman
Periksa halaman yang sering menjadi pintu masuk, seperti beranda, layanan, dan detail produk. Catat gambar utama yang langsung terlihat, gambar dalam daftar, serta visual dekoratif. Unduhan yang besar dan tampil di awal layak diperiksa lebih dulu daripada ikon kecil yang sudah tersimpan di cache.
Jangan menghapus semua gambar hanya untuk menurunkan ukuran halaman. Foto produk dapat menjadi informasi utama, sementara tekstur dekoratif mungkin dapat disederhanakan. Nilai fungsi setiap aset: apakah membantu memilih, menunjukkan detail, atau hanya mengisi ruang? Keputusan ini menentukan bagian mana yang harus dipertahankan kualitasnya.
Sesuaikan dimensi dengan ruang tampilan
File kamera beresolusi tinggi sering jauh lebih besar daripada ruang gambar pada website. Menampilkan file tersebut dalam kartu kecil tidak otomatis membuat unduhannya lebih ringan. Siapkan beberapa ukuran turunan dan gunakan mekanisme gambar responsif agar browser dapat memilih varian sesuai ukuran tampilan serta kepadatan piksel perangkat.
Contohnya, gambar kartu yang tampil sekitar 360 piksel lebar dapat memerlukan varian lebih tajam untuk layar dengan kepadatan tinggi, tetapi belum tentu membutuhkan file sumber selebar ribuan piksel. Uji hasil pada perangkat sasaran. Bila detail perlu dilihat lebih besar, halaman detail dapat menyediakan gambar terpisah yang dimuat saat pengguna membutuhkannya.
Pilih format lewat perbandingan, bukan kebiasaan
WebP atau AVIF dapat menjadi pilihan untuk banyak foto dan gambar raster, dengan keputusan akhir mengikuti kualitas, ukuran hasil, dukungan lingkungan, dan proses produksi. JPEG atau PNG tetap dapat diperlukan untuk aset tertentu. Logo dan ilustrasi vektor biasanya lebih tepat menggunakan format vektor jika sumbernya tersedia dan aman digunakan.
Bandingkan hasil kompresi pada ukuran yang benar-benar terlihat. Foto dengan gradasi, produk dengan tekstur halus, dan screenshot antarmuka memiliki kebutuhan berbeda. Kompresi yang tampak baik pada foto bisa membuat teks kecil pada screenshot sulit dibaca. Simpan file sumber agar turunan dapat dibuat ulang tanpa menumpuk penurunan kualitas.
- Periksa tepi objek, gradasi, teks kecil, dan detail yang memengaruhi keputusan pembelian.
- Jaga warna serta isi screenshot portofolio; jangan mengubahnya menjadi bukti yang berbeda.
- Bersihkan metadata file yang tidak diperlukan untuk tampilan atau pengelolaan aset.
Tentukan gambar mana yang perlu dimuat lebih dulu
Lazy loading menunda pengambilan gambar sampai mendekati area yang dilihat pengguna. Ini berguna untuk galeri panjang atau daftar artikel di bawah pembuka. Namun gambar hero yang langsung terlihat tidak seharusnya ditunda dengan pola yang sama, terutama jika gambar tersebut menjadi elemen Largest Contentful Paint.
Hindari memberikan prioritas tinggi pada semua gambar karena browser tetap perlu membagi sumber daya. Tentukan aset utama, pastikan mudah ditemukan saat halaman dimuat, dan periksa permintaan jaringan untuk membuktikan perilakunya. Perhatikan juga gambar yang disembunyikan pada mobile: pengaturan tampilan saja belum tentu mencegah file diunduh.
Sediakan ruang gambar dan keterangan yang membantu
Tetapkan dimensi atau rasio aspek agar browser menyediakan tempat sebelum gambar selesai dimuat. Dengan demikian, paragraf dan tombol tidak terdorong tiba-tiba. Jika pemotongan gambar berbeda antara desktop dan ponsel, periksa bahwa wajah, label produk, atau bagian penting screenshot tetap terlihat.
Alt text menjelaskan informasi atau fungsi gambar kepada pengguna yang tidak melihatnya. Tuliskan deskripsi yang sesuai konteks, bukan daftar kata kunci. Caption dapat memberi konteks tambahan seperti jenis produk atau status konsep desain. Gambar dekoratif yang tidak menambah informasi dapat menggunakan alt kosong agar tidak mengganggu pembacaan.
Masukkan optimasi ke alur unggah konten
Perbaikan sekali jalan akan hilang manfaatnya jika unggahan berikutnya kembali memakai file mentah. Tetapkan pedoman ukuran, format, nama file, teks alternatif, dan siapa yang memeriksa kualitas. Untuk koleksi besar, gunakan proses pembuatan turunan yang konsisten agar hasil tidak bergantung pada langkah manual setiap orang.
- Simpan sumber asli dan tentukan peran gambar pada halaman.
- Buat ukuran turunan, bandingkan format, lalu periksa detail visual.
- Atur prioritas pemuatan dan ruang gambar sesuai posisinya.
- Uji halaman di ponsel serta periksa unduhan yang benar-benar terjadi.
- Catat ukuran transfer dan perubahan tampilan sebelum menyatakan optimasi selesai.
Pertanyaan yang sering muncul
Apakah semua gambar sebaiknya memakai lazy loading?
Tidak. Gambar yang langsung terlihat, terutama gambar utama yang menjadi LCP, perlu dimuat tanpa penundaan yang tidak perlu. Lazy loading lebih cocok untuk gambar yang belum dekat area pandang pengguna.
Apakah mengubah semua file ke WebP sudah cukup?
Belum. Dimensi, tingkat kompresi, ukuran responsif, prioritas pemuatan, dan ruang tata letak tetap berpengaruh. Bandingkan hasil visual dan permintaan jaringan, bukan hanya ekstensi file.
Rujukan
Tentukan langkah yang sesuai bisnis Anda.
Bawa contoh alur kerja, kendala saat ini, dan prioritas Anda. Tim Metanotech membantu membahas cakupan, pilihan solusi, serta tahapan pengerjaannya.
