Optimasi Format, Ukuran dan Responsivitas Gambar (Bagian 2)

Gambar adalah elemen visual penting pada sebagian besar halaman web, namun juga sering menjadi penyebab utama perlambatan. Untungnya, standar web modern telah menyediakan serangkaian atribut pada tag <img> yang, meskipun terlihat remeh, adalah instruksi krusial bagi bot PSI dan browser dalam memahami dan menyajikan konten secara optimal.

Notes

<img
src"url-gambar-anda.webp"
	alt="Deskripsi Singkat Gambar Anda "
	width="675"
	height="379" 
	decoding="async"
	fetchpriority="Auto"
srcset="
	UrlGambarAnda.webp   412w,
	UrlGambarAnda.webp   675w,
	UrlGambarAnda.webp   1200w
"
sizes="100vw atau atur dengan dimensi yang sesuai, misal (max-width:1200px)50vw, 678px "			
/>

Atribut Krusial Pada Tag <img>

Seringkali titik awal paling efektif dan berdampak besar justru berasal dari elemen yang tampak sederhana: optimasi tampilan gambar.Setiap atribut memiliki peran spesifik yang berkontribusi pada pengalaman pengguna dan penilaian performa:

• alt (Alternative Text): Ini lebih dari sekadar SEO. Atribut alt menyediakan deskripsi tekstual gambar, penting untuk aksesibilitas (bagi pengguna tunanetra yang menggunakan screen reader) dan juga membantu mesin pencari memahami konteks gambar Anda. Tanpa alt, gambar adalah kotak hitam bagi bot dan sebagian pengguna. dengan kata lain banyak faktor dinamis dan kompleks yang saling memengaruhi.

• width dan height: Menentukan dimensi intrinsik gambar (lebar dan tinggi dalam piksel) sangat penting untuk mencegah Cumulative Layout Shift (CLS). Dengan dimensi yang jelas, browser dapat mencadangkan ruang yang tepat untuk gambar bahkan sebelum diunduh, menghindari pergeseran tata letak yang mengganggu pengguna dan menurunkan skor PSI Anda.

• srcset dan sizes: Inilah duo kekuatan untuk gambar responsif.

  • srcset menyediakan daftar URL gambar alternatif dengan lebar intrinsik yang berbeda (misalnya, gambar-kecil.webp 400w, gambar-medium.webp 800w). Ini memungkinkan browser memilih resource gambar yang paling sesuai berdasarkan lebar viewport perangkat dan densitas piksel.
  • sizes memberi tahu browser ukuran gambar yang akan dirender pada viewport tertentu (misalnya, (max-width: 600px) 100vw, 50vw). Tanpa sizes, srcset tidak dapat bekerja optimal. Bersama-sama, keduanya memastikan perangkat seluler tidak mengunduh gambar berukuran desktop yang masif.

• decoding="async": Atribut ini memberi petunjuk kepada browser untuk mendekode gambar secara asinkron. Artinya, proses dekompresi dan persiapan gambar untuk ditampilkan dapat dilakukan di background thread tanpa memblokir main thread yang bertanggung jawab untuk rendering elemen lain di halaman. Ini krusial untuk menjaga responsivitas UI dan mempercepat First Contentful Paint (FCP).

• fetchpriority: Meskipun lebih baru, atribut ini sangat kuat untuk mengatur prioritas pengunduhan.

  • fetchpriority="high": Digunakan untuk gambar-gambar yang sangat penting, seperti hero image atau gambar kandidat Largest Contentful Paint (LCP), agar browser memprioritaskan pengunduhannya.
  • fetchpriority="low": Untuk gambar yang tidak terlalu penting atau below-the-fold, memberi sinyal kepada browser untuk menunda pengambilannya.
  • fetchpriority="auto" (atau tidak ditentukan): Mempercayakan browser untuk menentukan prioritas berdasarkan heuristik cerdasnya.

Kesimpulan

Pada akhirnya, mencapai skor PageSpeed Insights yang optimal bukanlah sulap, melainkan buah dari implementasi detail teknis yang cermat. Atribut-atribut pada tag <img> yang disebutkan di atas mungkin terlihat sepele, namun mereka adalah "bahasa" yang kita gunakan untuk berkomunikasi secara jelas dengan bot PSI dan browser. Dengan memberikan instruksi yang presisi tentang bagaimana konten visual disajikan—mulai dari kapan diunduh, bagaimana didekode, hingga seberapa besar tampilannya—kita tidak hanya meningkatkan skor teknis, tetapi yang lebih penting, menciptakan pengalaman web yang cepat, responsif, dan menyenangkan bagi setiap pengguna. Optimasi gambar adalah investasi kecil dengan dampak performa yang sangat besar.

Karawang | Jawa Barat | Indonesia | 41353