Dalam era digital yang mengutamakan kecepatan, performa sebuah website sering kali ditentukan oleh seberapa cepat elemen visualnya dimuat. Gambar merupakan elemen yang paling sering mengonsumsi sumber daya besar dalam sebuah halaman web. Tanpa optimasi yang benar, gambar berkualitas tinggi dapat menjadi beban yang memperlambat waktu pemuatan (loading time), merusak pengalaman pengguna, dan menurunkan peringkat SEO di mesin pencari. Google, melalui alat PageSpeed Insights, memberikan perhatian khusus pada bagaimana sebuah website mengelola aset gambarnya.
Optimasi gambar bukan berarti mengorbankan kualitas visual demi kecepatan. Sebaliknya, ini adalah proses teknis untuk memastikan gambar disajikan dalam ukuran, format, dan metode pemuatan yang paling efisien. Bagi pemilik website, memahami langkah mudah optimasi gambar adalah investasi krusial untuk menurunkan bounce rate dan meningkatkan konversi. Artikel ini akan membahas langkah-langkah sistematis yang dapat Anda terapkan agar aset gambar Anda tidak lagi menjadi penghambat skor PageSpeed yang sempurna.
1. Memilih Format Gambar yang Tepat: Era WebP dan Avif
Langkah awal dalam optimasi dimulai dari pemilihan format file. Format tradisional seperti JPEG dan PNG sering kali memiliki ukuran file yang terlalu besar untuk standar web modern.
-
WebP: Format ini adalah standar emas saat ini. Dikembangkan oleh Google, WebP menawarkan kompresi lossy dan lossless yang jauh lebih baik daripada JPEG dan PNG tanpa kehilangan kualitas yang terlihat secara signifikan.
-
AVIF: Jika Anda ingin selangkah lebih maju, AVIF menawarkan efisiensi kompresi yang bahkan lebih tinggi daripada WebP, meskipun dukungan peramban lama mungkin masih terbatas.
-
SVG: Untuk ikon, logo, atau ilustrasi berbasis vektor, gunakan selalu format SVG. Selain skalabel tanpa pecah, ukuran filenya sangat kecil karena berbasis kode XML.
2. Melakukan Kompresi Gambar Tanpa Kehilangan Kualitas
Kompresi adalah kunci untuk mengurangi bobot file. Ada dua jenis kompresi: Lossy (mengurangi data untuk ukuran lebih kecil) dan Lossless (menjaga semua data tetap utuh). Untuk kebutuhan website, kompresi lossy yang diatur dengan baik biasanya lebih disarankan.
Anda dapat menggunakan alat daring seperti TinyPNG, Squoosh.app, atau plugin otomatis seperti Imagify dan Smush jika menggunakan WordPress. Tujuannya adalah mengurangi ukuran file hingga di bawah 100 KB per gambar jika memungkinkan, tanpa membuat gambar tampak buram atau pecah. Langkah ini secara langsung akan menjawab peringatan “Efficiently encode images” pada laporan Google PageSpeed.
3. Menyesuaikan Ukuran Gambar secara Fisik (Resizing)
Salah satu kesalahan pemula yang paling sering dideteksi oleh PageSpeed adalah mengunggah gambar dengan resolusi mentah (misalnya 4000px) untuk ditampilkan pada kontainer yang hanya berukuran 800px. Ini memaksa peramban mengunduh data besar hanya untuk mengecilkan tampilannya secara visual.
Pastikan Anda mengubah ukuran (resize) gambar ke dimensi maksimum yang diperlukan oleh tema website Anda sebelum mengunggahnya. Gunakan atribut srcset dalam kode HTML Anda. Atribut ini memungkinkan peramban memilih ukuran gambar yang paling sesuai berdasarkan resolusi layar perangkat pengguna (ponsel, tablet, atau desktop).
4. Menerapkan Teknik Lazy Loading
Lazy loading adalah teknik di mana gambar hanya akan dimuat ketika pengguna menggulir halaman ke posisi gambar tersebut berada. Dengan cara ini, peramban tidak perlu memuat seluruh gambar di halaman secara bersamaan saat pertama kali dibuka.
Google PageSpeed sangat menyukai teknik ini karena secara drastis meningkatkan metrik Initial Load Time. Sebagian besar sistem manajemen konten (CMS) modern seperti WordPress sudah mendukung lazy loading secara bawaan. Namun, pastikan Anda mengecualikan gambar Above-the-Fold (gambar yang tampak pertama kali tanpa menggulir, seperti gambar pahlawan atau banner utama) dari lazy loading agar tidak merusak skor Largest Contentful Paint (LCP).
5. Menetapkan Dimensi Lebar dan Tinggi (Width & Height)
Pernahkah Anda melihat konten website yang “melompat” saat gambar baru saja termuat? Fenomena ini disebut Layout Shift. Google mengukur ini melalui metrik Cumulative Layout Shift (CLS).
[Image showing Cumulative Layout Shift (CLS) example on a website]
Untuk mencegah hal ini, selalu tentukan atribut width dan height pada tag gambar di kode HTML Anda. Dengan memberikan dimensi yang jelas, peramban dapat memesan ruang kosong untuk gambar sebelum gambar tersebut selesai diunduh, sehingga tata letak halaman tetap stabil dan tidak mengganggu kenyamanan membaca pengguna.
6. Memanfaatkan Content Delivery Network (CDN) Khusus Gambar
Jika website Anda memiliki banyak audiens internasional atau menggunakan banyak gambar resolusi tinggi, pertimbangkan untuk menggunakan Image CDN seperti Cloudinary, Imgix, atau fitur CDN dari Cloudflare. CDN gambar akan secara otomatis mengoptimalkan, mengubah ukuran, dan menyajikan gambar dalam format terbaik berdasarkan perangkat pengguna secara otomatis lewat peladen terdekat dengan lokasi mereka.
Kesimpulan
Optimasi gambar bukan hanya soal teknis, tetapi soal menghargai waktu dan kuota internet pengunjung Anda. Dengan menerapkan format WebP, melakukan kompresi yang tepat, mengatur dimensi gambar, dan menerapkan lazy loading, Anda telah menyelesaikan lebih dari 50% tantangan performa website.
Langkah-langkah di atas secara kolektif akan membantu website Anda lolos uji Google PageSpeed dengan nilai yang memuaskan. Ingatlah bahwa SEO di masa kini sangat bergantung pada pengalaman pengguna, dan kecepatan adalah mata uang utama dalam pengalaman tersebut. Mulailah mengaudit pustaka media Anda hari ini dan rasakan peningkatan performa yang signifikan pada website Anda.
