Mengubah semua gambar menjadi format yang lebih kecil belum menyelesaikan dua pertanyaan penting: apakah browser mengunduh ukuran yang sesuai, dan apakah gambar yang paling dibutuhkan dimuat tepat waktu? Foto katalog berukuran besar yang dipakai sebagai thumbnail tetap bisa memboroskan transfer.
Optimasi gambar yang baik dimulai dari fungsi dan ruang tampilnya. Kita ingin mempertahankan informasi visual sambil mengurangi pekerjaan yang tidak diperlukan.
Buat inventaris berdasarkan komponen
Kelompokkan gambar menjadi gambar utama yang langsung terlihat, thumbnail, gambar di dalam isi, galeri tambahan, dan dekorasi. Catat ukuran tampil di mobile serta desktop, ukuran file sumber, dan apakah gambar menjadi kandidat LCP.
Jangan mengandalkan satu aturan global seperti “semua gambar harus lazy load”. Gambar yang langsung dibutuhkan saat halaman terbuka memerlukan perlakuan berbeda dari foto yang baru terlihat jauh di bawah.
| Komponen | Pertanyaan utama | Bukti yang dikumpulkan |
|---|---|---|
| Hero | Apakah resource ditemukan cukup awal? | Waktu request dan elemen LCP |
| Thumbnail | Apakah file jauh lebih besar dari ruang tampil? | Dimensi file versus ukuran render |
| Galeri lanjutan | Apakah perlu diunduh sebelum pengguna membukanya? | Urutan request dan perilaku galeri |
| Diagram artikel | Apakah tulisan tetap terbaca setelah kompresi? | Pemeriksaan visual pada layar kecil |
Bedakan ukuran file dan ukuran tampilan
CSS dapat mengecilkan foto secara visual tanpa mengurangi file yang diunduh. Untuk menawarkan beberapa resolusi, HTML menyediakan srcset dan sizes. Browser menggunakan kandidat serta petunjuk ruang tampil untuk memilih resource sesuai kondisi. Panduan responsive images MDN.
Contoh berikut mengasumsikan gambar memenuhi viewport pada layar kecil dan memakai ruang 720 piksel pada layar lebih lebar. Sesuaikan dengan CSS sebenarnya:
<img
src="/images/alat-seduh-960.webp"
srcset="/images/alat-seduh-480.webp 480w,
/images/alat-seduh-960.webp 960w,
/images/alat-seduh-1440.webp 1440w"
sizes="(max-width: 720px) 100vw, 720px"
width="1440"
height="960"
alt="Tiga bagian alat seduh yang dilepas untuk dibersihkan"
>
Nama file pada contoh hanya ilustrasi. Ketiga file harus benar-benar tersedia, memiliki dimensi sesuai descriptor, dan menampilkan gambar dengan rasio yang konsisten. sizes yang tidak sesuai layout dapat membuat browser memilih resource terlalu besar atau terlalu kecil.
Jika gambar memerlukan crop berbeda agar objek tetap jelas di ponsel, pertimbangkan picture dengan sumber yang sesuai. Masalah komposisi tidak selalu selesai dengan menurunkan resolusi.
Atur kapan gambar dimuat
Gambar yang berada di luar tampilan awal dapat menjadi kandidat loading="lazy". Namun gambar utama yang segera terlihat, terutama kandidat LCP, sebaiknya tidak ditunda dengan lazy loading. fetchpriority="high" dapat menjadi petunjuk untuk resource penting, tetapi perlu digunakan selektif. Panduan browser-level lazy loading.
Prioritas tinggi bukan pengganti diagnosis. Kalau URL gambar baru dibuat setelah script panjang selesai, browser tetap terlambat mengetahuinya. Periksa markup awal dan waterfall sebelum menambahkan preload atau atribut prioritas ke seluruh katalog.
Contoh: thumbnail memakai foto master
Bayangkan kategori berisi 24 thumbnail. Masing-masing tampil sekitar 220 piksel lebar, tetapi semua memakai foto master 2.400 piksel. Ini skenario ilustratif, bukan pengukuran toko tertentu.
Langkah pertama adalah menyediakan ukuran yang sesuai untuk komponen kartu. Selanjutnya periksa variasi layar dan kepadatan piksel, sehingga gambar tetap tajam. Lalu tentukan gambar mana yang langsung terlihat dan mana yang dapat dimuat belakangan.
Jangan sekadar menilai total byte sesudah perubahan. Periksa apakah label pada kemasan masih terbaca, warna produk tetap masuk akal, dan galeri detail masih menyediakan gambar yang cukup jelas ketika dibuka.
Verifikasi resource yang benar-benar dipilih
Gunakan panel Network dan properti currentSrc pada elemen untuk mengetahui file yang digunakan browser. Uji pada viewport serta kepadatan piksel yang berbeda. Perhatikan kondisi cache karena resource besar yang sudah tersimpan dapat memengaruhi hasil pengujian berikutnya.
Isi worksheet berikut untuk setiap komponen penting:
- Ukuran ruang tampil dan ukuran file yang dipilih.
- Waktu request dimulai dibanding resource utama lain.
- Atribut loading serta prioritas yang diterapkan.
- Dimensi atau ruang yang tersedia sebelum gambar muncul.
- Kualitas visual dan keadaan ketika gambar gagal dimuat.
Kalau byte turun tetapi LCP tidak berubah, kembali ke garis waktu pemuatan. Hambatan mungkin terletak pada server, penemuan resource, atau render. Kalau CLS meningkat, periksa rasio dan ruang gambar sebelum ia selesai diunduh.
Simpan aturan per komponen di sistem website. Dengan demikian, gambar baru dari editor mengikuti pengaturan yang sama dan perbaikan tidak bergantung pada optimasi manual satu halaman saja.
