Mengenal Apa Itu Progressive Images

Konten visual seperti gambar (image) merupakan salah satu bagian terpenting di situs web, tetapi kinerja yang buruk pada gambar dan kurangnya pengoptimalan bisa juga memberikan pengaruh buruk untuk situs dan konten anda.

Untuk menghindari itu pastikan anda memilih format gambar yang tepat seperti JPEG Progresif (Progressive Images) yang akan saya jelaskan di artikel ini.

Apa Itu Progressive Images?

Progressive images atau juga disebut dengan progressive jpeg adalah gambar yang dibuat dengan algoritme kompresi, memuat gambar dalam gelombang yang berurutan (progresif) hingga seluruh gambar terbentuk dengan jelas.

Gelombang pemuatan gambar (progressive images) hanya terjadi kurang lebih sepersepuluh detik saja, jadi mungkin prosesnya tidak begitu terlihat jika tidak diperhatikan dengan teliti. Hal inilah yang membuat progressive images tampak dimuat lebih cepat jika dibandingkan dengan jpeg standar (baseline).

Manfaat Dan Kelebihan Progressive Images

Dari sisi manfaat progressive images atau jpeg progresif dapat meningkatkan pengalaman pengguna di situs web atau yang sekarang lebih kita kenal dengan istilah core web vitals. Di awal pemuatan gambar, pengunjung akan melihat gambar dengan resolui rendah tetapi mereka sudah bisa melihat keseluruhan gambar dan berinteraksi di situs web.

Selain itu progressive images juga dapat mengurangi penggunaan sumber daya seperti bandwidth, ruang disk dan penggunaan data karena umumnya file size pada progressive images lebih kecil sehingga sangat tepat jika dikatakan progressive images membantu menigkatkan performa situs web anda karena progressive images dapat dimuat dengan lebih cepat.

[ads id="ads1"] Secara ditel inilah 6 poin manfaat sekaligus yang menjadi kelebihan progressive images untu situs web anda.

1. Mempertahan stabilitas core web vitals.
2. Meningkatkan performa situs web.
3. Menghemat penggunaan data ketika memuat situs.
4. Tingkat kompresi yang sangat baik.
5. Menurunkan bounce rate, dan
6. Support di banyak browser modern.

Rendering: Progressive Images Loading

Dalam sebuah artikel The Webmaster, Jonathan Griffin membagikan perbandingan yang sangat bagus dan tepat untuk mengilustrasikan rendering gambar progresif (progressive images loading). Untuk memahami secara jelas bagaimana proses rendering progressive images silahkan lihat perbandingan yang dicontohkan pada gambar berikut ini:

Baseline vs Progressive - 30% Loaded

Perhatikan di awal perenderan jpeg baseline dimuat dengan resolusi tajam dari atas ke bawah sedangkan jpeg progressive dimuat dengan resolusi rendah tetapi anda dapat langsung melihat seluruh gambar dan biasanya pada level ini pengguna anda sudah bisa melakukan interaksi seperti scroll dan lainnya.

Baseline vs Progressive - 70% Loaded

Sedangkan di 70% perenderan, resolusi JPEG progressive meningkat dan sebagian besar gambar cukup jelas meskipun masih 70 persen gambar yang dimuat.

Bisa dibilang progressive image sedikit mirip seperti lazyload tetapi pada progressive image bukan elemen yang dimuat dengan malas (lazyload) tetapi pada resolusi gambarnya.

Mulai Membuat Dan Menggunakan Progressive Images

Untuk mebuat progressive images setidaknya kamu harus memiliki salah satu software untuk membuat progressive images yaitu Photoshop atau alat pengonversi jpeg progressive yaitu RIOT (Radical Image Optimization Tool).

Saya sendiri menggunakan Photoshop untuk untuk membuat progressive images, jika di komputer kamu sudah tersedia Photoshop CS (All version), silahkan lihat panduan lengkap membuat progressive images di photoshop.

Kesimpulan

Dengan menggunakan progressive images, situs web terlihat memuat halaman dengan lebih cepat karena tidak ada spasi kosong, semua gambar terlihat di awal pemuatan, dan resolusi gambar akan ditingkatkan ketika rendering seluruh halaman dimuat.

Sampai disini saja penjelasan saya tentang progressive images, semoga artikel ini memberikan referensi dan pengetahuan tambahan yang bermanfaat untuk anda dalam mengoptimalkan situs web.