Gambar pada blog merupakan komponen yang tidak bisa kita lepaskan satu sama lain. Sebuah blog pasti membutuhkan sebuah gambar baik untuk komponen banner iklan ataupun gambar yang dimasukan kedalam artikel. 

Nah permasalahannya banyak dari kita para blogger belum tahu cara mengoptimalkan gambar pada blog/website. Karena gambar ini kerap kali menjadi momok masalah berupa loading blog yang menurun sehingga waktu akses blog kita yang melambat dimata pengunjung.

Kita tahu sendiri kecepatan akses / loading blog menjadi salah satu penilaian penting dari google dalam meranking di hasil pencarian mereka. Semakin cepat blog kita diakses maka semakin orang nyaman (user experience) dan google suka jika para pengunjung yang mencari di google juga nyaman.

Walaupun gambar ini bisa menjadi penyebab load blog kita yang lama, bukan berarti kita sebagai blogger langung anti dengan gambar. Terus kita menulis sebuah artikel gak pakai gambar atau dengan gambar yang sedikit padahal disini kita perlu tuh banyak gambar untuk bisa menjelaskan ke pengunjung tentang tutorial atau informasi yang ingin kita sampaikan.

Kalau saya tidak ada masalah tersendiri dengan gambar banyak dalam sebuah blog asal kita tahu dalam mengoptimasinya, agar gambar yang banyak anda sisipkan dalam artikel itu tetap tidak membebani loading blog anda. 

Lalu bagaimana caranya? silakan simak artikel ini lebih lanjut.

Cara Optimasi Gambar Pada Blog Agar Tidak Membebani Loading Blog

Disini mungkin sedikit disclaimer bahwa saya menggunakan platform blogger, untuk wordpress ya tetap bisa tentunya mengikuti tutorial ini cuman di wordpress sudah ada banyak plugin optimasi loading/gambar yang bisa membantu memudahkan anda.

Kalau anda pengguna blogger yang gratisan ya kita harus sedikit repot, langsung saja masuk ke step-by-stepnya.

Compress Gambar

Mengompress gambar yang akan anda gunakan pada artikel blog anda adalah suatu hal yang wajib. Kenapa wajib karena dengan anda kompress gambar yang akan anda gunakan di artikel akan mempunyai ukuran file yang lebih kecil dari versi aslinya. Dengan ukuran file yang lebih kecil tentunya akan lebih mempercepat loading blog anda, tidak membebani karena pengunjung akan menload gambar dengan ukuran yang lebih kecil.

Mungkin ada yang bertanya apa nanti kualitas gambarnya tidak menurun? ya kalau menurut saya tentunya akan menurun tapi tidak akan begitu terlihat, pengunjung tidak akan merasakan pengurangan kualitas gambar yang anda gunakan tapi manfaat dari ukuran size foto yang lebih kecil ketika anda compress gambar tersebut akan lebih terasa.

Untuk melakukan compress gambar cukup mudah tidak perlu menginstall software khusus, anda cukup gunakan tools online via website. Favorit saya ada https://tinyjpg.com (untuk mengompress jpg) dan https://tinypng.com (untuk mengompress png). 

Untuk penggunannya anda cukup upload gambar yang akan gunakan pada artikel, tunggu proses compress selesai, lalu download file yang sudah di compress dan gunakan file gambar yang sudah melalui proses compress.

Dari tiny sendiri mengklaim bisa mengurangi hingga 70% ukuran file tanpa pengurangan berarti dari segi detail dan kualitas gambar.

Gunakan Format Gambar WebP

Banyak mungkin dari kita yang berdebat mana format gambar yang terbaik untuk di upload online dalam hal ini untuk artikel dalam sebuah blog. Ada yang bilang jpg lebih baik, png lebih baik, dll. 

Tapi untuk sekarang ini dan kedepannya format gambar WebP akan menjadi masa depan dari format gambar bagi para blogger.

WebP ini merupakan format file gambar yang dikembangkan oleh google sendiri dengan keunggulan memberikan kompresi lossy (layaknya jpeg), mendukung format animasi serta mendukung juga transparansi (layaknya PNG). Dari segi kompresi WebP ini jauh lebih baik dari 3 format yang sering di gunakan di dunia web JPEG, PNG, dan GIF. 

Ibarat kata WebP ini seperti menyatukan semua dukungan yang ada di JPEG, PNG dan GIF dalam satu format gambar yang memiliki kompres yang lebih baik (30% lebih kecil dibanding JPEG) sehingga ukuran file jadi lebih efisien dan kualitaspun tidak mengalami penurunan.

Mungkin satu isue yang menjadi kekurangan dari format Webp adalah belum mendukung semua jenis browser yang ada. Tapi menurut saya ini bukan menjadi sebuah alasan untuk tidak beralih ke format Webp. Berdasar situs caniuse.com/webp format ini sudah didukung 93,55% secara global hanya 2 jenis browser yang belum support pertama Internet Explorer yang mana sekarang ini sudah mulai ditinggalkan (bahkan windows 10 sudah beralih ke Edge dengan basis chromium) dan KaiOS Browser (penggunnya tidak sampai 0,08% secara global).

Lalu bagaimana cara menggunakan format gambar yang satu ini?

Untuk anda pengguna blogger cukup gampang dan mudah. 

Pertama anda cukup menulis artikel dan mengupload gambar seperti biasanya.

Lalu setelah anda menyelesaikan artikel anda, masuk ke tab Tampilan HTML.

Selanjutnya anda tinggal mencari url gambar anda lalu tambahkan kode -rw pada bagian size yang ditandai /s640/ atau /w640-h302/ maka akan menjadi /s640-rw/ atau /w640-h302-rw/

Contoh seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwyFYnbqFKay7T2QsQZBLZmKAHHKqqrKmuJTn139zq1PiTUkv1akOg9b2SMaNQ3e0hvxMebCCUhFNSta3T8TFw5aRq5OnK2VHEZie4uUOjDs8MF5gQcEPv5cyXQd4Gb_frol_s_vofrUr/w640-h302/Unsplash.jpg

Menjadi:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwyFYnbqFKay7T2QsQZBLZmKAHHKqqrKmuJTn139zq1PiTUkv1akOg9b2SMaNQ3e0hvxMebCCUhFNSta3T8TFw5aRq5OnK2VHEZie4uUOjDs8MF5gQcEPv5cyXQd4Gb_frol_s_vofrUr//-rw/Unsplash.jpg

Lakukan penambahan -rw pada semua gambar yang ada pada artikel blog anda. Dengan penambahan kode -rw pada url gambar secara otomatis merubah format gambar pada blogger anda menjadi WebP.

Lalu untuk pengguna non blogger? anda mungkin bisa secara manual melakukan convert gambar dari jpeg ke webp atau png ke webp silakan gunakan tools online dari https://ezgif.com/jpg-to-webp anda cukup upload dan download gambar anda maka gambar anda akan menjadi format webp.

Menggunakan Lazyload

Lazyload ini merupakan metode yang cukup efektif dalam hal memperingan loading blog, terutama dalam hal ini masalah gambar. Dengan penerapan lazyload gambar suatu website hanya akan diload yang terlihat dalam viewport, browser tidak akan memuat gambar yang tidak nampak dibawahnya dan baru akan terload saat pengunjung melakukan proses scrolling.

Banyak script lazyload pilihan saya jatuh ke lazysize.js dari aFarkas, yang tutorialnya saya temui di blog kompiajaib.com.

Untuk penggunaannya anda cukup menambahkan kode javascript dibawah ini diatas kode </body> pada edit html template blogger anda.

<script async='async' src='https://cdn.statically.io/gh/SiniAja/file/master/lazyload.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].className+=" lazyload",imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));

function wrap(top, selector, bottom) {
var videos = document.querySelectorAll(selector);
    for (var i = 0; i < videos.length; i++) {
        if (videos[i].getAttribute('src')) {
            videos[i].setAttribute('data-src', videos[i].getAttribute('src'));
            videos[i].removeAttribute('src');
        }
        videos[i].setAttribute("class","lazyload");
        videos[i].setAttribute("style", "position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;");
        var modified = top + videos[i].outerHTML + bottom;
        videos[i].outerHTML = modified;
    }
}
wrap("<div style='position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%'>", "iframe[src*='youtube.com']", "</div>");
//]]>
</script>

Ini untuk pengguna blogger ya, walaupun juga bisa diimplementasi ke platform lain akan tetapi jika anda pengguna wordpress bisa menggunakan plugin untuk optimasi loading yang secara fungsi juga kurang lebih sama bahkan lebih baik berkat adanya fitur cache. 

Dengan lazyload diatas sudah mengatasi masalah load gambar dan juga video yang ada diartikel blog anda, anda tidak perlu khawatir memasukan banyak sekali gambar dan bahkan video sekalipun. Semuanya tetap smooth dan ringan berkat plugin lazy load.

Mungkin sedikit catatan buat anda yang blognya AMP tidak perlu menggunakan plugin lazyload karena memang AMP sudah terlazyload dari bawaan (udah kenceng loadnya) dan juga tidak memungkin kita menggunakan javascript dari pihak ketiga. Pengguna AMP cukup melakukan compress gambar dan menggunakan format WebP itu sudah mendapatkan hasil paling maksimal.

Mungkin itu dulu 3 cara yang bisa anda lakukan untuk mempercepat loading blog anda dari segi optimasi gambar, dengan 3 cara diatas jika anda lakukan dengan betul maka akan terasa signifikan peningkatan kecepatan load blog anda.

Karena kita tahu kenyamanan pengunjung jadi prioritas apalagi masalah loading, semakin cepat maka semakin baik blog anda meranking di google. So tidak ada salahnya memperhatikan betul faktor ini selain konten artikel blog anda.

Sekian dari saya, jika ada pertanyaan silakan ajukan komentar dibawah.