Pengenalan - Salah satu tugas yang krusial dalam optimasi website yang sering dilupakan oleh sebagian orang adalah gambar. Bagaimana cara meningkatkan performa website secara efektif dengan menggunakan teknik serving scaled images dan bagaimana cara mengoptimasi gambar JPEG baseline menjadi progressive.
Apa beda antara gambar JPEG baseline dan progressive?
Secara umum, gambar JPEG di-load dari atas ke bawah dan itu disebut gambar baseline. Pada gambar JPEG progressive, gambar ditampilkan langsung sambil me-load bagian data. Artinya, gambar akan terlihat seperti berkotak-kotak, hingga sampai ter-load dengan sempurna. Contoh gambar berikut ini akan mengilustrasikan cara kerjanya.
"PENTING! Beberapa browser (misalnya Internet Explorer yang dibuat sebelum adanya Windows 7) tidak mendukung penggunaan gambar JPEG progressive. Namun, versi setelahnya sudah mendukung."
Sebelum memulai panduan ini Anda membutuhkan akses FTP.
Langkah 1 – Analisa Website Anda
Untuk menemukan gambar JPEG baseline yang bisa digantikan dengan progressive, kita akan menggunakan tool WebPageTest. Tool ini sangat bermanfaat, karena Anda akan bisa mendapatkan versi progressive dari gambar baseline tanpa harus menggunakan bantuan tool tambahan.
Berikut ini adalah hasil Performance Review setelah analisa test dilakukan:
Langkah 2 – Download gambar JPEG progressive
Ada banyak variasi tool yang bisa Anda gunakan untuk meng-convert gambar JPEG baseline ke progressive, antara lain:
Opsi 1 – Kompres JPEG baseline ke tipe progressive menggunakan WebPageTest
Setelah mendapatkan daftar gambar yang ingin diganti, masuk ke bagian Details dan klik View All Images.
Bagian tersebut akan menampilkan seluruh gambar di halaman Anda. Klik Analyze JPEG di setiap gambar yang terdapat pada Langkah 1 di tutorial ini dan scroll ke bawah.
Anda akan melihat ada Quality 85 Image dari gambar asli Anda. Simpan semua Quality 85 Image ke komputer Anda dan lanjutkan langkah selanjutnya. Kami sangat merekomendasikan agar Anda menyimpan gambar dengan nama yang sama seperti yang asli, agar proses penggantian akan jauh lebih mudah dan cepat.
Opsi 2 – Mengkonversi gambar JPEG baseline ke progressive dengan Optimizilla
Jika Anda berencana untuk meng-upload banyak gambar ke website Anda, atau jika website Anda belum di-upload, Anda bisa menggunakan Optimizilla untuk mengkonversi gambar JPEG baseline Anda ke progressive. Dengan menggunakan tool ini, Anda bisa mengoptimasi hingga 20 gambar dan merampingkannya dengan algoritma kompresi ke Quality 85 atau lebih kecil.
"PENTING! Bila Anda memilih kurang dari 85, hasil gambar akan kurang baik. Pilih kualitasnya dengan hati-hati."
Langkah 3 – Mengganti gambar yang lama
"PENTING! Pastikan Anda mem-backup website atau gambar yang ingin Anda ganti."
Dengan menggunakan File Manager atau aplikasi FTP, temukan gambar di Langkah 1. Hapus dan ganti gambar tersebut dengan gambar Quality 85 yang sudah kita buat di Langkah 2. Sekali lagi, mohon pastikan gambar tersebut sudah memiliki nama yang sama agar Anda terhindar dari error 404 atau masalah loading lainnya.
Langkah 4 – Mengecek perubahan
Setelah seluruh gambar di-upload, bersihkan cache browser Anda dan buka website Anda untuk melihat perubahannya. Anda juga bisa mengunakan mode private browser pada website. Setelah itu, Anda bisa menganalisa website Anda dengan menggunakan WebPageTest untuk memeriksa apakah semuanya sudah berjalan sesuai yang Anda inginkan atau belum. Berikut ini adalah kira-kira hasil yang akan Anda lihat di bagian Details:
Kesimpulan
Semakin lancar pengalaman visual dan semakin kecil ukuran, akan membuat Anda dan pengunjung website Anda senang. Selain itu, penggunaan resource juga menjadi lebih rendah, serta membantu meningkatkan SEO dan performa website. Dan jangan lupa untuk selalu memilih Jasa Web Hosting Terbaik. Pada dasarnya ini adalah kondisi yang sama-sama menguntungkan untuk semua orang.
