Mengamankan Bandwidth Hosting Dari Image Postingan

Berbeda dengan blog gratis seperti misalnya blogspot atau wordpress.com yang dapat mengupload gambar atau image tanpa batas, wordpress self hosted harus mikir dua kali untuk menambahkan image ke dalam postingan.

Gambar merupakan salah satu unsur yang cukup banyak mengkonsumsi bandwidth pada hosting. Jika ingin menghemat bandwidth, sebaiknya gunakan share image hosting seperti Google+ atau Picassa. Namun ada yang mengatakan bahwa image yang dihosting di pihak lain akan memperlambat loading blog.

Nah untuk itu kini saya share cara agar image yang dihosting di pihak lain tidak memperlambat loading blog wordpress self hosted.

Sebenarnya cara ini sama dengan cara mempercepat loading blogspot dengan menunda penayangan image postingan (deferring image). 

Baca juga: Deferring Images That Have Been Published

Namun seperti halnya blogspot, wordpress yang menggunakan gambar yang dihosting di pihak lain tidak bisa menampilkan thumbnail di homepage atau widget lain yang menggunakan thumbnail. Biasanya wordpress memiliki fitur Featured Image untuk thumbnail postingan. Dengan begitu kita perlu penanganan lanjutan agar gambar postingan bisa tampil sebagai thumbnail di homepage.

Nah penundaan penampilan gambar ini menggunakan trik menggunakan gambar dengan data:base64 dengan size yang sangat kecil untuk mengganti sementara gambar sesungguhnya. Dengan begitu peramban tidak mengupload gambar bersamaan dengan loading blog (sementara gambar diganti dengan gambar base64), namun setelah blog termuat seluruhnya. Dengan begitu loading blog tidak akan terganggu oleh loading image.

Penempatan gambarnya menggunakan kode di bawah ini.

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="URL IMAGE ASLI DARI PICASSA ATAU LAINNYA" alt="" title="" width="" height="" />

Kemudian tambahkan javascript di bawah ini di atas kode </body>. Pada tema yang saya gunakan memiliki fitur Theme Options yang bisa menempatkan script di atas kode </body>.

<script type='text/javascript'>

function init() {

var imgDefer = document.getElementsByTagName('img');

for (var i=0; i<imgDefer.length; i++) {

if(imgDefer[i].getAttribute('data-src')) {

imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));

} } }

window.onload = init;

</script>

Nah jika ternyata thumbnail postingan tidak muncul, silahkan gunakan script php untuk menampilkan gambar postingan (gambar pertama/first image post) pada link di bawah ini.

Trik ini sudah saya coba di blog wordpress saya AyoInter.net, silahkan coba lihat thumbnail postingan di homepage atau postingan. Klik kanan pada thumbnail dan open image in new tab kemudian lihat url image di address bar. Itu adalah url image dari Picassa bukan dari hosting wp saya.

Dengan ini pula kita bisa menghindari pencurian bandwidth karena penggunaan image (yang dihosting sendiri) yang digunakan orang lain.