Mengenal Apa Itu Progressive Images
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.
Secara ditel inilah 6 poin manfaat sekaligus yang menjadi kelebihan progressive images untu situs web anda.
- Mempertahan stabilitas core web vitals.
- Meningkatkan performa situs web.
- Menghemat penggunaan data ketika memuat situs.
- Tingkat kompresi yang sangat baik.
- Menurunkan bounce rate, dan
- Support di banyak browser modern.
Rendering: Progressive Images Loading
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)
