Meningkatkan Serve Scaled Images Pada Website

Sebelumnya kita mesti memahami apa itu scaled image (gambar yang diperkecil) serta manfaatnya. Berikut penjelasannya.

Scaled image adalah gambar atau foto yang di perkecil, maksud dari diperkecil disini adalah sebuah gambar yang size atau ukurannya sesuai dengan ukuran yang didefenisikan dalam CSS atau HTML.

Yang dimana, browser harus men-download file yang besar terlebih dulu, lalu mengecilkan sebelum ditampilkan. Metode ini yang lebih efisien adalah dengan membuat gambar atau file foto tersebut ukurannya disesuaikan misal menjadi 40px  x 40px, sehingga browser tidak perlu men-download dan mengecilkan gambar.

Manfaat dari Serve Scaled Images adalah dengan menggunakan ukuran yang sesuai, maka akan menghemat data dan meningkatkan performa website Anda. Khususnya di perangkat mobile atau tablet, gambar yang diperkecil hanya membutuhkan space lebih sedikit, juga akan di-muat lebih cepat serta mengurangi penggunaan resource.

Memberi gambar yang diperkecil juga merupakan salah satu rekomendasi dari berbagai tool optimasi website. Karena, bila skor meningkat, maka ranking website Anda di google juga akan berpengaruh dalam meningkatkan SEO.

Sebelum memulai yang dibutuhkan adalah :

  • Akses ke admin panel website anda

Langkah pertama Analisa website

Pada langkah ini, kita sering menggunakan tool online yaitu GTMetrix, karena disana sangat membantu untuk mengetahui detail dari website kita, salah satunya gambar skala yang harus di sesuaikan.

Sebagai contoh, pada gambar dibawah ini kita telah melakukan analisa website wordpress yang baru dibuat untuk percobaan, menggunakan tool GTMetrix dan langsung mendapatkan list gambar beserta lokasi tepatnya dan juga nilai dimensi yang direkomendasikan.

WP-analysis-1.

Menurut hasil analisa GTMetrix, menampilkan gambar yang diperkecil akan mengurangi ukuran dari setiap gambar hingga sekitar 50%. Semakin banyak gambar yang Anda miliki, maka semakin cepat gambar-gambar Anda akan bisa tampil karena telah diperkecil.

Langkah kedua – Menyesuaikan gambar

Untuk langkah ini, silahkan Anda download gambar via WordPress Media. Lihat pada gambar sebelumnya yang ada di langkah pertama. Setelah itu, Anda bisa menggunakan tool image editor seperti paint atau tool online seperti iloveimg.com untuk memperkecil gambar(resize gambar). Untuk sekarang kita menggunakan tool PicResize, kita bisa merubah semua gambar ke ukuran yang direkomendasikan.

Image-resize-1.

Kami juga merekomendasikan agar Anda menggunakan nama file yang sama untuk gambar. Dengan begitu Anda hanya akan perlu menimpa gambar yang lama tanpa perlu melakukan perubahan apapun pada script/kode. Setelah gambar yang lama ditimpa dengan yang sudah diperkecil, selanjutnya Anda hanya tinggal melakukan test ulang.

Langkah ketiga – Mengecek perubahan hasil

Sebagai perbandingan, berikut ini adalah hasil test yang kami dapat setelah gambar diperkecil:

Scaled-images-final-result.

Hal paling penting adalah untuk memastikan bahwa gambar yang telah di-upload ulang memiliki nama file yang sama, agar tidak terjadi error 404.

Source : hostinger.co.id



Leave a Reply