Optimasi Website dengan Progressive Image

Pernahkan Anda mendengar istilah Progressive Image ? Sebenarnya apa itu Progressive Image dan apa bedanya dengan Baseline.

Pada kesempatan ini saya akan membagikan tips untuk melakukan optimasi website dengan progressive image pada website anda.

Perbedaan Progressive & Baseline Image

Pada dasarnya perbedaan antara progressive image dan baseline adalah di saat gambar melakukan load atau pemanggilan, Berikut detailnya :

  • Baseline Image Gambar akan di load dari atas ke bawah, atau mungkin bisa di lihat saat anda coba malekukan akses gambar maka tampilan akan muncul dari atas ke bawah hingga gambar terload seluruhnya.
  • Progressive Image berbeda dengan baseline, ketika gambar di load maka progressive akan menampilkan secara keseluruhan langsung, namun masih dalam bentuk kotak-kotak atau pixel-pixel kecil, hingga nantinya terload sevara jelas keseluruhan.

Bagaimana progressive image bisa lebih cepat dari Baseline ? jawabannya di karenakan progressive image biasanya berukuran 2% sampai 10% lebih kecil dari pada Baseline namun dengan kualitas yang sama, sehingga dapat mempercepat load website 🙂

Langsung saja kita coba untuk melakukan prakteknya agar segera bisa di implementasikan,.

1. Analisa Kecepatan website Anda

Langkah Pertama yaitu melakukan Analisa speed website Anda, kita akan amati dahulu keadaan sebelum melakukan implementasi progressive image ini.

Kami bisa sarankan Anda agar mudah dalam melakukan analisa kecepatan ini menggunakan tools online yang pastinya free ini 🙂

Salah satunya adalah GTMetrix dan WebPagetest

Silahkan isikan kolom URL di kedua tools tersebut dengan nama domain anda, tool di atas sangat bermanfaat untuk melakukan pengecekan dan langkah optimasi website dengan progressive image.

optimasi website dengan progressive image
optimasi website dengan progressive image

 

2. Mengkonversi atau Melakukan Compress progressive Image

Setelah kita lakukan analisa website dan kecepatannya maka langkah selanjutnya adalah melakukan konversi atau compress image menjadi progressive.

Untuk melakukan optimasi website dengan Progressive Image anda bisa menggunakan tools yang bernama Optimizilla .

Tools tersebut secara otomatis akan melakukan penyesuaian pada gambar yang anda upload nantinya, silahkan coba akses dan upload gambar yang ingin anda optimasi.

Kami sarankan juga untuk pilih Quality di atas 75 agar kualitas gambar tetap baik.

Optimasi progressive image
Optimasi progressive image

Silahkan download gambar yang sudah di compress menjadi progressive dan lakukan upload atau pasang ke website Anda.

Lakukan testing atau analisa speed website Anda setelah melakukan optimasi website dengan progressive image ini, dan lihat lah hasilnya.

Harusnya website anda saat ini akan terasa lebih cepat saat di akses atau melakukan load di browser 🙂

Sekian tips dan panduan dari kami tentang optimasi website dengan progressive image, semoga dapat bermanfaat.

Terimakasih

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *