Hosting Gambar Gratis dan Lazyload Untuk Mempercepat Loading

Ketika membuat sebuah website atau blog yang kita hosting atau mengguna server tersendiri.

Maka gambar/image adalah komponen yang tidak bisa lepas dari hal tersebut.

Jika kita menggunakan hosting atau server dengan spesifikasi tinggi maka kita bisa dengan mudah mengupload semua gambar terutama untuk postingan di hosting kita begitu saja.

Namun untuk kalangan untuk yang kaum kere hore seperti saya, yang membuat sebuah blog dengan hosting paket termurah haruslah pintar-pintar mengakali hal ini.

Tujuannya tidak lain dan bukan untuk penghematan resource hosting tersebut.

Dengan mengupload gambar untuk keperluan blog di penyedia lain kita bisa menghemat ruang penyimpanan hosting dan juga bandwidth jika blog kita dikunjungi banyak pengunjung setidaknya gambar yang terload berada diluar host kita.

Nah pada kali ini saya akan membagikan tempat untuk bisa anda mengupload gambar, yang bisa kita manfaatkan untuk hosting gambar blog.

Hosting Gambar Gratis Anti Down

Untuk tempat terbaik sebagai host gambar blog kita jatuh ke kepada blogger.com

Ya disini kita bisa memanfaatkan server blogger ya mana itu juga server dari google.

Tentunya masalah kecepatan dan untuk penggunaan jangka panjangpun tidak akan menjadi sebuah masalah.

Kita tahu seberapa powerfull server dari blogger so tidak perlu mengkhawatirkan masalah seperti server down sekalipun.

Untuk caranya kurang lebihnya seperti ini:

1. Masuk ke blogger.com dan silakan login ke akun google kalian.
2. Masuk ke akun blog kalian, atau jika belum punya blog di blogger bisa membuat blog baru hanya untuk keperluan host gambar.
3. Buat sebuah postingan baru.
4. Disini anda bisa mengupload gambar yang ingin anda host, atau akan anda gunakan di blog anda sekarang ini.
5. Silakan upload gambar anda.
6. Anda bisa memilih ukuran gambar juga agar link gambar bisa disesuaikan ukurannya.
7. Selanjutnya jika sudah selesai anda bisa menyalin link url gambar untuk anda gunakan di blog atau website hosting anda sekarang.

Nah menariknya dalam host gambar di blogger sudah support format gambar terbaru yaitu webp.

Jadi disini anda mau upload format .jpg .jpeg .png .gif sekalipun bisa langsung menjadi format webp yang akan kita gunakan.

Kita tidak perlu mengubah formatnya secara manual.

Format WebP ini tergolong baru, memiliki kelebihan ukurannya yang kecil dan tidak mengurangi kualitas.

Webp ini merupakan metode kompresi lossy dan lossless. Memiliki kualitas yang sama dengan JPEG dan ukuran lebih kecil sebanyak 30%.

Lalu bagaimana cara memanfaatkan format gambar Webp dari link url gambar tadi.

Jika anda mengupload gambar tadi di blogger kurang lebihnya link urlnya seperti ini:

https://blogger.googleusercontent.com/img/a/AVvXsEjb6Injn9rQdrMYFDjg0kpT7Rnka5MKgWDTq4n47NjUIAPVjEJUEvgrJ8SgvEHMzADn0byNgKCdrU0IrfRF3WLJU0vugOlRfoCPpfmzOU9blVgp2V6cEFzHd4F7JePt7dvRBi4k8qd56IFOayu3RZyr-ELkxBmSB1f52qIshPPSI-yZn_mK67uYi4Vv=w640-h282

Disana anda tinggal menambahkan -rw pada akhiran url, menjadi seperti ini

https://blogger.googleusercontent.com/img/a/AVvXsEjb6Injn9rQdrMYFDjg0kpT7Rnka5MKgWDTq4n47NjUIAPVjEJUEvgrJ8SgvEHMzADn0byNgKCdrU0IrfRF3WLJU0vugOlRfoCPpfmzOU9blVgp2V6cEFzHd4F7JePt7dvRBi4k8qd56IFOayu3RZyr-ELkxBmSB1f52qIshPPSI-yZn_mK67uYi4Vv=w640-h282-rw

Anda bisa mencoba menyalin link url diatas yang sudah saya tambahkan -rw lalu menyimpannya maka formatnya berubah menjadi .webp ketika anda download.

Mungkin yang sedikit jadi catatan dengan format webp ini adalah supportnya terhadap browser.

Saat ini format .webp belum mendukung 100% browser yang ada. Berdasarkan situs caniuse.com .webp support 95,77% browser.

Ya kalau menurut saya angka tersebut sudah cukup tinggi, anda akan lebih merasakan manfaat ukuran size yang lebih kecil sehingga mempercepat proses loadnya.

Mau pakai format .webp atau tidak itu kembali lagi kepada anda pemilik situs.

Tambahan Lazyload Biar Loading Makin Ngacir

Untuk anda yang blognya menggunakan thema AMP tidak perlu menambahkan lazyload karena secara default AMP HTML sudah terlazyload semua komponennya.

Untuk pengguna wordpress yang belum pakai plugin lazyload mungkin bisa mencoba lazyload dari lazysize.js ini.

Semuanya blog/web support asal non AMP dan belum memasang script/plugin lazyload lainnya.

Disini kita bisa menambahkannya secara manual pada theme blog kita, tambahkan kode script ini diatas kode </body>

<script src="https://cdn.jsdelivr.net/gh/aFarkas/lazysizes@gh-pages/lazysizes.min.js" async=""></script>

Untuk javascript diatas bisa anda simpan dan taruh di hosting anda untuk lebih cepatnya atau kalau mau tetap pakai juga tidak akan terlalu masalah karena sudah menggunakan CDN dari JsDeliver.

Untuk penggunaanya ada bisa secara manual menambahkan class="lazyload" untuk setiap tag <img atau <iframe (karena mendukung lazyload image & iframe) jika tidak mau repot mengedit satu persatu postingan anda bisa menambahkan javascript dibawah ini, diatas kode yang sebelumnya:

Auto Add Class="lazyload" pada tag <img

<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="));
//]]>
</script>

Jika anda ingin lazyload untuk gambar dan iframe video youtube, bisa menggunakan kode ini:

<script>
//<![CDATA[
for(var imgEl=document.querySelectorAll(".post-body img"),i=0;i<imgEl.length;i++)imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].className+=" lazyload",imgEl[i].setAttribute("loading","lazy");
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("loading","lazy");
        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>

Jika sudah silakan simpan.

Dengan kedua cara diatas anda bisa menghemat resource host blog anda, setidaknya anda bisa mencegah blog menjadi down ketika pengunjung naik drastis.

Untuk kecepatan load tidak kalah dengan host diserver sendiri dengan hosting dari blogger dan lazyload dari lazysize.

Kalau seadainya image blog kita dicopy atau dipakai web lain pun tidak menjadi masalah karena kita juga numpang host di google (gak perlu khawatir masalah bandwidth)

Ya intinya disini kita bisa berhemat dengan bijak dalam pemakaian resource hosting untuk kedepannya.

Jika ada pertanyaan dan ada tambahan bisa diskusikan di kolom komentar dibawah.