Lutfi HanifKecepatan adalah salah satu faktor penting yang menentukan peringkat sebuah website di search engine. Semakin cepat website bisa diakses, maka semakin besar peluang website mendapatkan peringkat tertinggi di hasil pencarian. Dalam artikel ini, kami akan berbagi cara untuk optimasi gambar pada website dengan berbagai cara.
Berbicara tentang kecepatan loading pada website, ada beberapa faktor utama yang sering kali menyebabkan website menjadi lambat. Salah satu faktor tersebut adalah gambar.
Sering kali, kita sebagai pemilik website tidak terlalu memperhatikan banyaknya gambar yang ditampilkan hingga besar gambarnya. Oleh karena itu, kami akan berbagi tips bagaimana cara optimasi gambar di website, agar kecepatan loading website Anda semakin meningkat.
Faktor yang memengaruhi kecepatan website
Sebelum melangkah lebih jauh tentang cara optimasi gambar, kita perlu memahami faktor apa saja yang menjadikan gambar sebagai penyebab load akses pada website. Ada 2 faktor yang sering menyebabkan load pada website menjadi tinggi, yaitu filesize dan jumlah gambar.
Filesize
Sering kali kita hanya melakukan upload image, tanpa memikirkan besar file yang kita upload. Hal ini harus menjadi perhatian Anda kedepan, agar selalu mengecekan file image size sebelum menguploadnya ke website.
Anda bisa melakukan compress gambar, agar ukuran gambar lebih kecil sehingga page load akan lebih ringan dan website bisa diakses lebih cepat.
Jumlah gambar
Yang kedua adalah banyaknya file gambar yang di upload. Seringkali dalam sebuah page, ada puluhan gambar yang harus diload agar website dapat tampil dengan baik. Tentu kita tahu, bahwa sebuah website maupun artikel tentu tidak lengkap tanpa adanya gambar sebagai ilustrasi pendukung.
Namun kami sarankan agar Anda membatasi jumlah gambar dalam satu halaman, sehingga load per page akan jauh lebih ringan.
Cara optimasi gambar di website
Selain membatasi jumlah gambar dan filesize image, ada beberapa cara yang bisa Anda lakukan untuk optimasi gambar pada website, seperti :
1. Kompres Gambar
Idealnya, kompresi dilakukan dengan tetap memperhatikan keseimbangan antara ukuran gambar dan kualitas hasil kompresi. Tujuannya, agar file menjadi lebih kecil dan ringan, tapi kualitas gambar tidak menurun terlalu signifikan.
Untuk melakukan kompresi, ada beberapa pilihan tools yang bisa digunakan. Untuk tools offline atau desktop, perangkat lunak seperti Windows Paint, Adobe Photoshop hingga Gimp bisa jadi pilihan. Selengkapnya tentang aplikasi kompres gambar bisa anda baca pada artikel : Aplikasi Kompres Foto Gratis di HP dan PC
Sedangkan untuk yang online, fitur kompresi yang tersedia di tinypng.com, imageoptim.com dan compressjpeg.com bisa jadi alternatif yang tak kalah mudah untuk dioperasikan.
2. Memilih format gambar yang tepat
Untuk ditampilkan dalam website, dua format image yang direkomendasikan adalah PNG dan JPEG. Keduanya dipilih karena mampu menghasilkan file kompresi yang relatif lebih baik bila dibandingkan dengan format lainnya. Format PNG biasanya digunakan untuk gambar yang memiliki ukuran lebih kecil, seperti untuk logo, screenshot, favicon, dan vektor. Sedangkan format JPEG biasanya digunakan untuk gambar-gambar solid yang umumnya punya ukuran file yang besar, seperti hasil dari fotografi.
3. Plugin optimasi gambar
Untuk website yang dibuat dengan manual programming seperti html, php, laravel atau CI, metode optimasi image yang paling baik dilakukan dengan cara manual. Yaitu, dengan melakukan pemaksimalan gambar melalui software online atau offline, dengan melakukan resize hingga reduce file image.
Namun, untuk website yang dibuat dengan CMS Seperti WordPress atau Joomla, plugin tambahan bisa dimanfaatkan untuk melakukan optimasi. Berikut beberapa pilihan plugin yang bisa digunakan :
WordPress
- ShortPixel Image Optimizer
Optimasi yang dilakukan plugin ini cukup menarik, yaitu dengan memisahkan file asli dengan hasil kompresi dari plugin. Sehingga, file asli dan versi kompresi disa dibandingkan untuk melihat perbedaan kualitasnya. Plugin ini bisa mengkompresi file gambar hingga 42% lebih rendah dengan kualitas gambar yang tidak jauh beda. - reSmush.it
Plugin ini memungkinkan pengguna untuk melakukan optimasi gambar secara otomatis sesaat setelah gambar diunggah ke website. Selain opsi otomatis, plugin ini dilengkapi juga dengan fitur optimasi masal untuk gambar yang lebih lama. - WP Smush
Merupakan salah satu plugin optimasi gambar paling populer di WordPress. Plugin ini juga bisa digunakan untuk optimasi gambar secara masal, hingga 50 file dalam sekali compressing. Plugin ini sangat bermanfaat dalam menghemat waktu, jika perlu memproses gambar dalam jumlah banyak. - EWWW Image Optimizer
Plugin ini merupakan pilihan yang tepat untuk kompresi gambar WordPress, karena mudah digunakan dan dapat mengoptimalkan gambar yang diunggah sebelumnya secara masal. - TinyPNG
Untuk bisa menggunakan plugin ini, registrasi perlu dilakukan terlebih dahulu untuk mendapatkan akun. Dengan akun gratis, pengoptimasian bisa dilakukan untuk 100 gambar setiap bulannya. Plugin ini juga disertai dengan pemilihan ukuran gambar, sehingga pengguna bisa memilih ukuran gambar sesuai dengan kebutuhan.
Joomla
- ImageRecycle image optimizer
Algoritma optimasi pada plugin ini mampu mengurangi ukuran gambar hingga 85%, dengan hasil kompresi hampir identik dengan gambar aslinya. Tidak hanya gambar, plugin ini juga mampu mengoptimasi file pdf. - PXLCompressor
Plugin ini memungkinkan untuk mengompresi dan mengubah ukuran setiap gambar yang diunggah secara otomatis. Selain gambar, plugin ini juga bisa digunakan untuk mengompresi file berformat pdf. - ShortPixel Website Optimizer
Tidak hanya tersedia untuk WordPress, plugin ini juga tersedia untuk CMS Joomla. Plugin ini menggunakan API ShortPixel, sehingga proses optimasi gambar menghasilkan kompresi yang lebih baik. Cara kerja optimasi dilakukan sesuai folder atau directory yang diinginkan.
Pengujian Core Web Vitals
Core web vitals adalah salah satu metrik yang digunakan oleh Google untuk mengukur page experience atau pengalaman pengunjung saat mengakses suatu website. Ada beberapa indikator dari Core web vitals, seperti LCP (Largest Contentful Paint), INP (Interaction to Next Paint), hingga CLS (Cumulative Layout Shift).
Dari beberapa indikator diatas, load page atau loading pada website menjadi salah satu faktor utama yang dinilai. Oleh karena itu, Anda harus memastikan bahwa gambar telah dioptimasi, sehingga waktu muat website Anda baik dan peluang untuk mendapatkan peringkat terbaik terbuka lebar.
Untuk mengetahui nilai core web vitals pada website, Anda dapat menggunakan Google PageSpeed Insight. Karena sangat penting, Anda harus memastikan gambar telah teroptimasi untuk meningkatkan waktu muat pada website.
Setelah melakukan pengujian melalui Google PageSpeed, Anda akan diberikan ‘saran optimasi’ yang perlu dilakukan. Biasanya, Google PageSpeed akan memberikan informasi gambar mana saja yang perlu di optimasi seperti gambar diatas.
Demikian beberapa cara optimasi gambar pada website dari Rumahweb Indonesia. Semoga dengan halaman yang telah dioptimasi, website Anda mendapatkan peringkat terbaik di Google. Semoga bermanfaat.
