Percepat Blog Anda Menggunakan Gambar Progressive JPEG
Blog Tutorial

Percepat Blog Anda Menggunakan Gambar Progressive JPEG

Salah satu hal yang cukup krusial namun sering terlewat dalam blog yaitu optimasi pada gambar. Dalam tutorial ini, kami akan membahas secara spesifik bagaimana caranya untuk mempercepat loading blog dengan optimasi baseline JPEG menjadi progressive JPEG.

Daftar Isi Artikel

Apa Sih Perbedaan Gambar Baseline JPEG dan Progressive JPEG?

Pada umumnya, loading gambar tipe JPEG dimulai dari atas ke bawah. Cara tersebut biasa disebut dengan Gambar Baseline. Sementara itu, Progressive JPEG akan menampilkan gambar secara langsung dengan menyeluruh, gambar yang diawali dengan kualitas piksel rendah atau low kemudian tampil sepenuhnya secara perlahan-lahan dengan kualitas yang lebih baik dari sebelumnya.

Di bawah ini Anda dapat melihat perbedaan jelas antara Baseline JPEG dan Progressive JPEG.

1. Proses loading dengan Baseline JPEG lebih lambat namun hasilnya lebih baik.

 

proses loading baselin JPEG
idwebhost

 

2. Proses loading dengan Progressive JPEG cepat dan hasilnya juga lebih baik.

 

Proses loading Progressive JPEG
idwebhost

Bagaimana Cara Kerja Gambar Progressive JPEG untuk Meningkatkan Performa Website

Selain menampilkan hasil tampilan yang lebih baik, ukuran gambar yang dihasilkan dengan Progressive JPEG lebih kecil 2% hingga 10% dibandingkan dengan hasil gambar yang dihasilkan dari Baseline. Hal ini tentu saja akan semakin meningkatkan performa dan kecepatan loading website Anda.

Proses Request ke server juga akan lebih menyingkat waktu dan efisien, sehingga akan mengurangi pengguna resource seperti bandwidth serta disk space dari hosting yang dipakai. Hal ini tentu akan membuat kinerja website anda lebih efisen, terutama jika Anda memakai layanan hosting yang gratis ataupun shared hosting.

Website Anda Jadi Lebih Ringan

Website yang menggunakan gambar dari baseline JPEG berjumlah banyak, pasti akan terbantu karena perubahan ke Progressive JPEG. Akses pengunjung pun ketika mau membuka website Anda melalui perangkat mobile akan lebih cepat dan tidak membuat bosan pengunjung blog. Jikalau Koneksi internet lambat pun dapat teratasi bisa dengan leluasa mengakses website yang berisikan gambar Progressive JPEG.

PENTING : Beberapa browser atau peramban (misalnya Internet Explorer versi sebelum Windows 7) tidak mendukung untuk gambar progressive JPEG.

Apa Sih yang Anda Butuhkan?

Sebelum memulai tutorial singkat ini, pastikan bahwa Anda telah memiliki :

  • Akses FTP (File Transfer Protocol)

Langkah 1: Analisa Website Anda

Untuk bisa mendapatkan gambar baseline JPEG yang dapat diubah dengan progressive JPEG pada blog, di tutorial kali ini kami akan menggunakan WebPageTest.org.

Gambar Berikut adalah hasil cek performa berdasarkan analisis pada website Anda.

 

hasil analisa website anda
idwebhost

Langkah 2: Unduh Gambar Progressive JPEG

Ada cukup banyak jenis tool yang bisa Anda pakai untuk melakukan konversi gambar Baseline JPEG ke Progressive JPEG. Berikut adalah beberapa contohnya, di antaranya :

Pilihan 1 – Kompresi Baseline JPEG menjadi Progressive JPEG memakai WebPageTest.org

Setelah anda memiliki daftar gambar yang nantinya ingin Anda ganti lebih baik, silahkan pilih menu pada bagian Details, kemudian klik View All Images. Bagian tersebut akan menampilkan semua gambar. Lalu silahkan anda klik Analyze JPEG pada setiap gambar yang tersedia di Langkah 1, kemudian scroll cursor anda sampai ke bawah.

Anda nanti akan menemukan kumpulan Quality 85 Image dari gambar asli. Silakan anda simpan semua kumpulan Quality 85 Images tersebut ke komputer lalu silahkan lanjutkan ke proses selanjutnya. Cara diatas direkomendasikan untuk menyimpan gambar dengan nama file gambar yang sama dengan gambar loading asli, agar nanti jika dibutuhkan dapat di-replace dengan mudah.

Pilihan 2 – Kompresi Baseline JPEG ke Progressive JPEG memakai Optimizilla

Jika ke depannya Anda berencana untuk mengunggah lebih banyak file gambar ke website, Anda dapat menggunakan aplikasi Optimizilla yang berfungsi untuk mengubah gambar Baseline menjadi gambar Progressive JPEG. Dengan tool ini, Anda dapat mengubah lebih dari 20 file gambar dan mengecilkannya dengan Quality 85 atau lebih rendah.

PENTING : Gambar dengan Quality di bawah 85 akan menurunkan kualitas gambar. Karenanya, Anda perlu tentukan dengan teliti.

Pilihan 3 – Bagaimana Cara Mempercepat Loading Blog dengan Menggunakan Plugin pada WordPress

Apabila Anda sudah memiliki blog WordPress, Anda dapat dengan mudah melakukan sendiri optimasi gambar Baseline JPEG menggunakan plugin WP Smush. Plugin tersebut adalah plugin WordPress yang berguna untuk memadatkan atau mengkompres suatu file gambar.

Langkah 3: Ubah gambar

PENTING : Pastikan bahwa Anda melakukan backup website terlebih dahulu atau gambar yang akan diganti sebelum melanjutkannya ke proses ini.

Gunakan aplikasi File Manager atau aplikasi FTP client untuk mencari gambar yang ada. pada Langkah 1. Kemudian, anda hapus dan ganti dengan gambar yang baru dengan gambar yang berkualitas 85 yang ada pada Langkah 2. Sekali lagi, pastikan lagi bahwa Anda menggunakan nama file yang sama pada gambar untuk menghindari masalah Error 404 atau masalah loading.

Baca Juga : Cara Mempercepat Loading Wprdpress dengan Mudah

Langkah 4: Tes Perubahan

Jika semua gambar sudah anda unggah atau upload,  silakan anda hapus cache browser lalu buka website Anda untuk memastikan lagi tidak ada error ataupun masalah yang muncul. Setelah itu, Anda dapat melakukan analisis pada website wordpress dengan memakai WebPageTest.org yang berguna untuk mengecek semua gambar yang sudah anda unggah tersebut. Di bawah ini adalah hasil yang akan muncul jika proses telah berhasil. Kemudian anda Klik bagian Details.

 

proses berhasil dengan webpagetest
idwebhost

Kesimpulan

Pada tutorial kali ini Anda telah mempelajari bagaimana caranya untuk mempercepat loading blog wordpress anda menggunakan gambar Progressive JPEG dengan mengubah gambar Baseline. Salah satu manfaatnya adalah tampilan blog WordPress anda akan terlihat lebih smooth dan loading blog menjadi lebih cepat karena ukuran gambar yang kecil tentu tanpa mengurangi kualitas gambar tersebut. Dalam waktu yang sama, optimasi ini juga bermanfaat untuk mengurangi penggunaan resource hosting anda, yang dalam waktu jangka panjang akan meningkatkan performa SEO website wordpress anda.

Anda Ingin selalu mendapatkan update terbaru insight serta tutorial menarik dari kami? Ayo subscribe sekarang menggunakan email Anda yah.

Helmy Ashari

Seorang yang tak pandai dalam berkata cuma bisa menuangkannya lewat tulisan saja.