Kalian lebih suka menunggu loading gambar sedikit demi sedikit atau gambar itu terbuka full, namun dalam resolusi sangat rendah, kemudian perlahan resolusinya makin meningkat hingga terload sempurna? Setiap orang mungkin pernah mengalami hal ini meski tidak pernah memperhatikannya secara detail.
Terkadang orang juga tidak ambil pusing dengan hal tersebut, kecuali ya, abis dapet pertanyaan barusan? Ngapain sih hal beginian ditanyain? Ngapain juga aku harus ngejawab? But ya it’s Oke kok.
Ada yang memilih opsi pertama, ada yang suka opsi kedua, ada yang suka gambarnya tampil pelan-pelan tapi dah dalam kondisi hi-res, ada juga yang gak masalah melihat format burem terlebih dahulu. Masalahnya Google menyukai opsi kedua.
Kedua teknik loading website tersebut tidak dipengaruhi oleh teknik browser dalam melakukan loading asset static sebuah website, melainkan, teknologi format gambar yang digunakan oleh pemilik website.
Teknologi itu disebut dengan Progressive JPEG
Apa Itu Progressive JPEG?
Progressive JPEG adalah sebuah teknologi yang membagi tampilan file gambar bitmap JPG dalam beberapa lapis layer. Teknologi ini memungkinkan sebuah browser meload gambar dari satu layer ke layer lain. Dan kemampuan ini yang membuat tampilan proggresive JPEG bisa memunculkan gambar dalam scala full meski proses loading belum selesai.
Lawan teknologi ini adalah baseline JPEG yang merupakan format JPG tradisional dan default bagi semua jenis image editor.
Dengan gambar yang terload penuh meski dalam resolusi rendah, user experience pengunjung website akan berbeda dibanding saat meload formate baseline JPEG. Pengunjung bisa langsung menebak gambar apa yang tengah diload oleh browser mereka. Tidak seperti Instagram, pengguna baseline JPEG tidak akan memiliki kemewahan semacam ini, mereka terpaksa harus menunggu gambar terload sempurna.
Google search sendiri menggunakan optimasi teknologi progressive JPEG, coba lakukan search image menggunakan Google di desktop. Saat kalian memilih salah satu image, Google akan menampilkannya dalam format low-res terlebih dahulu, alih-alih melakukan drawing gambar hi-res dari sisi atas gambar ke bawah.
Tentu saja, selain alasan meningkatkan UX pengguna, penggunaan progressive JPEG ini juga mampu meningkatkan skor pagespeed blog kalian.
Sebagaimana kita tahu, gambar merupakan salah satu asset berat dalam loading website. Semakin besar ukuran file, semakin lama juga proses yang dibutuhkan browser untuk melakukan loading website tersebut.
Apalagi jika gambar yang kita pajang di blog adalah gambar berformat baseline JPEG (JPG biasa) dan dalam resolusi besar, sempurna, untuk menjatuhkan skor pagespeed kita.
Dan umumnya para blogger menempatkan gambar super besar ini justru dibagian layout website mereka, terutama di bagian header. Ini kesalahan fatal yang mungkin tidak disadari sebagian besar rekan blogger.
Untuk menguji apakah gambar kalian bertipe progressive JPEG atau baseline kalian bisa menggunakan tools Progressive JPEG Detector, namun syaratnya kalian harus mendownload dulu gambar tersebut ke komputer/smartphone kalian baru diupload ke tools online tersebut.
Gambar baseline akan ditandai dengan warna merah, sedangkan gambar berformat progressive akan diberi warna hijau. Dengan demikian kalian bisa melihat sendiri mana yang berformat baseline dan mana yang progressive, karena jujur aja, format semacam ini memang tidak kasat mata.
Jika kalian mendapati gambar kalian merupakan gambar baseline, ada baiknya jika diubah menjadi progressive, terutama jika gambar tersebut kalian gunakan sebagai asset layout seperti header maupun featured images.
Berita buruknya adalah, belum ada tools yang mampu melakukan konversi dari baseline ke progressive JPEG ini secara otomatis untuk asset gambar yang sudah terpublish di blog kita. Kita harus mendownload, mengkonversi dan mengupload ulang file-file tersebut.
Namun setidaknya saat ini sudah tersedia berbagai tools untuk melakukan konversi gambar menjadi lebih ramah terhadap browser dan pengunjung.
Untuk melakukan konversinya sendiri bisa dilakukan dengan berbagai tools. Mulai dari tools offline seperti Adobe Photoshop, maupun tools online seperti coding.tools. Cara konversi JPEG Progressive maupun deteksi progressive untuk setiap tools tersebut bisa kalian baca lebih lanjut di home blogku ya.
Jelang tahun baru 2021, yuk lebih aware dengan kesehatan blog kita masing-masing dengan tetap membuatnya user and mobile friendly
