Mengamankan Bandwidth Hosting Dari Image Postingan

Mengamankan Bandwidth Hosting Dari Image Postingan

Bola Hero Gawai

Mengamankan Bandwidth Hosting Dari Image Postingan

Mengamankan Bandwidth Hosting
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). 


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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×