10 Cara Optimasi Gambar, Mempercepat Loading Blog Blogger
Bagi kebanyakan blogger, mengoptimalkan blog agar lebih SEO-friendly adalah satu hal yang penting. Berbagai cara dilakukan agar blog mereka mendapat perhatian lebih dari mesin pencari, seperti Google. Optimasi gambar di blog adalah satu dari sekian cara mengoptimalkan blog dalam Search Engine Optimization (SEO).
Banyak cara mengoptimalkan image atau gambar blog di Blogger atau Blogspot agar bersahabat dengan search engine. Artikel ini akan merangkum sebagian di antaranya. Setidaknya terdapat 10 cara bagaimana optimasi gambar di blog jika Anda menggunakan plaform blog Blogger. Lihat daftar dan tutorialnya berikut ini:
Gunakan Format File Gambar yang Tepat
Jenis Format Gambar di artikel blog umumnya adalah JPEG. Sementara itu, format PNG lebih dipakai untuk logo, vektor atau gambar dekoratif berukuran kecil. JPEG lebih bagus untuk gambar postingan karena ukuran lebih kecil dan kualitasnya bagus. Opsi lain adalah format WebP, sizenya kecil dan kualitasnya cukup baik.
Kompres Gambar sebelum Upload ke Blog
Size gambar adalah hal yang penting Anda perhatikan. Semakin kecil sizenya semakin baik, meski juga perlu mempertimbangkan kualitas gambarnya. Dalam mengkompres gambar, seimbangkan antara kualitas dan ukurannya. Jika menggunakan Photoshop, pastikan menyimpan dengan Save for Web dan tentukan berapa persen kualitasnya.
Resize Gambar, Maksimalkan Penayangan
Mengoptimalkan gambar di blog Blogger, penting juga me-resize gambar sebelum di upload ke blog. Tentukan dimensi gambar yang ideal untuk template blog. Misalnya, Anda butuh dimensi gambar 800 x 800 jangan mengupload gambar berdimensi lebih dari itu. Dimensi gambar yang terlalu besar memungkinkan loading blog lambat.
Isi Nama File Gambar dengan Kata Kunci
Setelah mengkompres dan resize, simpan gambar dengan memberi nama sesuai keyword atau kata kunci yang Anda bidik. Jika kata kuncinya "Optimasi Gambar di Blog", gunakanlah sebagai nama file gambarnya. Jika image lebih dari satu, beri nama dengan keyword senada. Misalnya, "Cara Optimasi Gambar SEO di Blogger", dll.
Optimasi Title Tag Gambar di Blog Blogger
Yang di atas adalah optimasi gambar offline, kini waktunya optimasi online di blog. Setelah upload, beri gambar dengan title tag. Meski tidak berdampak SEO, trik ini bisa meningkatkan pengalaman pembaca. Caranya klik image agar popup pengaturan muncul. Pilih ikon setting dan isi kolom title tag dengan kata kunci.
Optimasi Alt Tag agar Gambar SEO Friendly
Di bawah kolom title tag pada pengaturan gambar, isi juga keyword di kolom alt tag (alternative teks). Inilah salah satu bagian penting dalam SEO gambar. Fungsi alt tag adalah memberitahu Google mengenai topik suatu artikel. Apabila gambar lebih dari satu, usahakanlah alt tag di gambar pertama berisi kata kunci yang utama.
Title Tag dan Alt Tag Otomatis di Blogger
Optimasi title tag dan alt tag di atas adalah cara manual. Anda perlu mengisinya pada setiap gambar yang diupload. Dalam hal ini, title tag dan alt tag bisa juga terisi otomatis (tidak direkomendasikan) dengan memasang script di dalam template blog. Yang paling penting, Anda memberi nama file gambar dengan benar (point 4).
Script ini bekerja dengan mengambil nama file gambar. Jadi, pastikan mengisi nama file dengan kata kunci. Jika lebih dari satu, namai gambar selanjutnya dengan kata kunci yang relevan. Cara memasangnya, buka menu Tema dan klik Edit HTML. Cari kode </body> dan copy paste script berikut di atas atau sebelum kode </body>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){ var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>Gunakan lebih dari Satu Gambar di Blog
Meski tidak perlu dipaksakan, memberi beberapa gambar pada satu artikel adalah ide yang bagus. Artikel dengan banyak gambar berguna untuk meningkatkan pengalaman pengunjung. Manfaat lainnya adalah menarik kunjungan melalui mesin penelusuran gambar Google. Pastikan saja mengisi title tag dab alt tag pada setiap gambarnya.
Optimalkan Image Load dengan Lazy Load
Kecepatan blog menjadi pertimbangan penting dalam optimasi mesin pencari atau SEO. Banyaknya gambar di blog turut memberi beban yang memperlambat blog. Karena itu, berbagai cara ditempuh para blogger agar blog lebih ringan, termasuk optimasi gambar di blog dengan menempatkan script Lazyload di dalam tema.
Dalam fungsinya, Lazyload memungkinkan gambar dimuat setelah pengunjung menggulir (scroll) halaman. Dengan menggunakan script ini, page speed blog meningkat dan loading blog menjadi lebih cepat. Caranya, akses menu Tema lalu Edit HTML. Cari </body> dan copy paste script berikut ini di atas (sebelum) kode tersebut.
<script>
//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGliCGCY34zXgYxXrHxtnJjWJCkPy5HvPp6U0BLu5DXze0fj4KjeITgzOdzTQ8elY6voSIVtFck9VR0Ab4JoLkFbcy1OfRht_CsIdc-IDDTgZbArz2nzwiiet6ZRawn5_FCMh2kYJ0v0XO/s1/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>Optimasi Gambar di Blogger Dengan CDN
Opsi terakhir dalam mengoptimalkan gambar artikel di blog Blogger adalah memanfaatkan CDN untuk semua gambar. Trik optimasi ini sangat berguna untuk benar-benar memangkas image size secara drastis. Alhasil, otomatis kecepatan blog menjadi lebih meningkat. Ada dua cara untuk menerapkannya.
Pertama, tiap kali selesai upload gambar, buka Tampilan HTML pada menu di sisi kiri halaman postingan. Perhatikanlah URL gambar dan temukan https://. Ganti https:// dengan https://cdn.statically.io/img/. Cara manual ini berguna jika Anda hanya menginginkan gambar tertentu yang dioptimalkan.
Sementara itu, jika ingin cara yang lebih mudah, coba metode kedua. Cara ini memungkinkan semua gambar di blog otomatis menggunakan CDN Statically. Dengan memilih cara ini, Anda kembali berurusan dengan template Blogger. Buka menu Tema dan Edit HTML. Copy paste kode berikut di atas </body>.
<script>
//<![CDATA[
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].src = images[i].src.replace(/.*?:\/\//g ,
"https://cdn.statically.io/img/");
};
//]]>
</script>
