Rahasia Loading Website Kilat: Optimasi Gambar dan Media dengan HTML & CSS
Sedang menempuh pendidikan S1 dalam lingkup bidang Informatika, Universitas Pembangunan Jaya
·waktu baca 4 menit
Tulisan dari Fikri Armia Fahmi tidak mewakili pandangan dari redaksi kumparan
PerbesarDalam era digital, kecepatan loading sebuah website sangat penting. Pengguna cenderung meninggalkan website yang lambat, yang pada akhirnya dapat menurunkan peringkat SEO dan merugikan bisnis. Salah satu faktor yang sering memperlambat loading adalah gambar dan media yang tidak dioptimalkan. Dengan teknik yang tepat dalam penggunaan HTML dan CSS, kita bisa meningkatkan performa website secara signifikan. Berikut beberapa cara untuk mengoptimalkan gambar dan media agar loading website lebih cepat.
1. Menggunakan Format Gambar yang Tepat
Pemilihan format gambar yang tepat dapat sangat mempengaruhi kecepatan loading. Berikut adalah beberapa format gambar yang umum digunakan dan kegunaannya:
JPEG - untuk gambar dengan banyak warna, seperti foto. Memiliki ukuran file yang lebih kecil dibanding PNG.
PNG - untuk gambar dengan transparansi atau detail yang lebih tajam. Namun, ukuran file bisa lebih besar.
WebP - Format gambar modern yang menawarkan kompresi lebih baik tanpa mengorbankan kualitas. WebP bisa menjadi pilihan yang tepat untuk gambar web karena ukuran filenya lebih kecil dari JPEG dan PNG.
Contoh Penggunaan HTML:
<img src="image.webp" alt="Contoh gambar dengan format WebP">
2. Mengompres Gambar Sebelum Upload
Kompresi gambar adalah langkah krusial dalam mempercepat waktu loading. Menggunakan alat seperti TinyPNG atau ImageOptim bisa membantu mengurangi ukuran gambar hingga 50% tanpa kehilangan kualitas yang signifikan.
3. Menggunakan Atribut srcset untuk Responsive Images
Fitur srcset memungkinkan browser memilih gambar yang paling cocok berdasarkan ukuran layar pengguna. Dengan cara ini, gambar yang lebih kecil dapat ditampilkan pada perangkat mobile, sementara gambar resolusi tinggi ditampilkan pada layar yang lebih besar.
<img src="image-small.jpg"
srcset="image-small.jpg 300w, image-medium.jpg 768w, image-large.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Gambar responsive">
Dalam contoh di atas, browser akan memilih gambar yang paling sesuai dengan lebar layar pengguna, yang akan membantu mengurangi bandwidth dan mempercepat loading.
4. Memanfaatkan Lazy Loading untuk Gambar
Lazy loading memungkinkan gambar dimuat hanya ketika pengguna mulai menggulir ke bagian halaman yang menampilkan gambar tersebut. Mengimplementasikan lazy loading, cukup tambahkan atribut loading="lazy" pada elemen gambar di HTML.
Contoh HTML:
<img src="image.jpg" alt="Contoh gambar lazy loading" loading="lazy">
Dengan cara ini, gambar tidak akan dimuat sampai pengguna menggulir mendekati posisi gambar tersebut, yang dapat secara drastis mengurangi waktu loading awal halaman.
5. Menggunakan Video dengan Bijak
Video seringkali menjadi salah satu elemen paling berat di sebuah website. Oleh karena itu, penting untuk mengoptimalkan cara video ditampilkan.
Format Video yang Tepat
MP4: Format video yang paling umum dan didukung oleh banyak browser. MP4 biasanya memiliki ukuran file yang relatif kecil dengan kualitas yang masih baik.
WebM: Alternatif modern dengan ukuran file yang lebih kecil dibanding MP4, cocok untuk kompresi yang lebih baik di situs web.
Menggunakan Poster untuk Video
Menampilkan gambar poster sebelum video dimuat adalah praktik baik untuk mempercepat waktu render halaman.
<video controls poster="poster-image.jpg" loading="lazy">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Dengan menambahkan atribut poster, gambar akan muncul sebelum video dimainkan, sehingga pengguna mendapatkan pengalaman visual yang lebih cepat sebelum video sepenuhnya dimuat.
6. Mengoptimalkan Gambar Latar dengan CSS
Gambar latar sering kali membuat halaman menjadi lebih lambat, terutama jika gambar-gambar ini memiliki resolusi tinggi atau tidak dioptimalkan. CSS dapat digunakan untuk mengontrol bagaimana gambar latar ditampilkan, serta mengurangi penggunaan data secara berlebihan.
- Gunakan background-size: cover; dengan Bijak
Pengaturan background-size: cover; akan memastikan gambar latar menutupi elemen secara penuh tanpa distorsi, tetapi bisa menambah waktu loading jika gambar terlalu besar.
Contoh CSS:
.hero {
background-image: url('background-large.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
- Gunakan Gambar Latar yang Terkecil
Sama seperti gambar lainnya, gambar latar juga harus dioptimalkan. Kompres gambar sebelum di-upload dan pilih format yang tepat, seperti JPEG untuk foto atau WebP untuk latar dengan ukuran lebih kecil.
7. Menggunakan CDN untuk Media
Content Delivery Network (CDN) memungkinkan gambar dan media diakses dari server terdekat dengan pengguna. CDN dapat mempercepat pengiriman gambar karena mereka memiliki titik distribusi di berbagai lokasi global, mengurangi waktu yang dibutuhkan untuk mengirim file besar dari server pusat.
Layanan seperti Cloudflare, Amazon S3, atau Google Cloud Storage adalah beberapa penyedia CDN yang bisa Anda pertimbangkan untuk meng-host gambar dan media.
Referensi:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading?hl=id