Performa web modern sebagian besar didorong oleh pengoptimalan sumber daya, dengan fokus yang besar pada gambar. Gambar mewakili proporsi yang signifikan dari data yang digunakan oleh situs web. Oleh karena itu, menyajikan gambar dalam format yang paling efisien dapat berdampak besar pada kinerja situs, pengalaman pengguna, dan peringkat SEO. Alat audit Lighthouse Google memberikan wawasan penting untuk membantu mencapai pengoptimalan ini, salah satunya adalah peluang untuk "Menyajikan gambar dalam format modern". Fitur ini, yang terletak di bagian Peluang laporan Lighthouse, mengidentifikasi semua gambar di situs yang menggunakan format lama, menyarankan peningkatan kinerja potensial yang dapat dicapai dengan menyajikan gambar ini dalam format modern, seperti AVIF dan WebP.
Masalah dengan Format Gambar Tradisional
Banyak situs web masih menggunakan format tradisional seperti JPEG, PNG, dan GIF untuk gambar mereka. Meskipun format ini memiliki kekuatan dan telah melayani web dengan baik selama bertahun-tahun, format ini tidak seefisien beberapa format modern dalam hal kompresi dan kualitas. Format lama ini sering menghasilkan ukuran file yang lebih besar, yang dapat memperlambat kinerja situs, terutama bagi pengguna dengan koneksi internet yang lebih lambat atau menggunakan perangkat seluler.
Janji Format Gambar Modern
Dalam beberapa tahun terakhir, dua format muncul sebagai opsi unggulan untuk gambar web: AVIF dan WebP.
AVIF , atau Format File Gambar AV1, didasarkan pada format pengkodean video AV1 yang dikembangkan oleh Alliance for Open Media. Ini menawarkan peningkatan kompresi yang signifikan dibandingkan dengan format lama, yang berarti dapat memberikan gambar berkualitas tinggi dengan ukuran file yang jauh lebih kecil. Ini menjadikan AVIF pilihan yang sangat baik untuk situs web dengan konten gambar yang berat.
WebP , yang dikembangkan oleh Google, juga menawarkan kemampuan kompresi yang mengesankan, terutama untuk gambar dengan transparansi (saluran alfa), yang secara signifikan mengungguli PNG. Format ini mendukung kompresi lossy dan lossless, memungkinkan pengembang untuk menyeimbangkan kualitas gambar dan ukuran file sesuai kebutuhan mereka.
Mengidentifikasi Peluang dengan Lighthouse
Alat Lighthouse berperan penting dalam menemukan peluang untuk meningkatkan kinerja situs. Dengan menganalisis sumber daya situs, ini memberikan daftar semua gambar yang saat ini disajikan dalam format lama. Laporan mendetail ini menunjukkan potensi penghematan dalam kilobyte (KB) atau megabyte (MB) yang dapat diperoleh dengan mengonversi gambar ini ke format modern.
Untuk setiap gambar, Lighthouse menghitung selisih antara ukuran file saat ini dan perkiraan ukuran file jika ditampilkan dalam format modern. Ini kemudian menyajikan penghematan potensial ini, menawarkan panduan yang jelas kepada pengembang tentang kemungkinan peningkatan kinerja yang dapat dicapai.
Mengimplementasikan Perubahan
Setelah mengidentifikasi gambar yang akan dikonversi, langkah selanjutnya melibatkan pembuatan versi AVIF atau WebP dari gambar ini. Ada beberapa alat dan pustaka yang tersedia untuk ini, termasuk Squoosh , aplikasi web kompresi gambar online yang dikembangkan oleh Google, dan ImageMagick , rangkaian perangkat lunak tangguh yang menangani konversi dan manipulasi gambar.
Setelah gambar dikonversi, gambar harus disajikan kepada pengguna dengan cara yang kompatibel dengan browser mereka. Ini sering kali melibatkan penggunaan elemen HTML 'gambar' atau metode serupa, yang memungkinkan versi gambar yang berbeda disajikan sesuai dengan kemampuan browser.
Kesimpulan
Menyajikan gambar dalam format modern adalah komponen penting dari pengoptimalan kinerja web. Dengan memanfaatkan fitur "Sajikan gambar dalam format modern" dari Lighthouse, pengembang web dapat dengan mudah mengidentifikasi potensi penghematan yang ditawarkan oleh format ini. Merangkul AVIF dan WebP tidak hanya meningkatkan kinerja situs; itu meningkatkan pengalaman pengguna dan dapat berdampak positif pada peringkat SEO. Format gambar modern akan tetap ada, dan memanfaatkannya secara maksimal adalah peluang yang tidak boleh dilewatkan.
