Ditulis oleh: Ditulis pada: 10/04/2018
Cara Mudah Menggunakan CDN Staticaly Pada Gambar Blogger Dengan Javascript - Setelah sebelumnya kita mengetahui bahwa kita bisa menggunakan CDN Staticaly untuk meningkatkan akselerasi gambar. Kini saya akan membagikan cara menggunakan CDN Staticaly pada gambar dengan mudah dengan menggunakan javascript.Kenapa kita harus mencoba CDN Staticaly untuk akselerasi gambar?
CDN Staticaly untuk gambar atau Staticaly Imgpx adalah layanan akselerasi dan modifikasi gambar untuk situs yang menggunakannya. Gambar yang dikonversi di-cache secara otomatis dan disajikan dari Staticaly CDN. Gambar dapat dipotong, diubah ukurannya, dan difilter dengan menggunakan API sederhana yang dikontrol oleh argumen kueri GET. Ketika gambar dihantarkan dengan Staticaly Imgpx, gambar dihantarkan dengan sangat cepat ke seluruh dunia.
Yang membuat "HARUS" mencoba Staticaly Imgpx adalah bahwa layanan Staticaly Imgpx kini menawarkan dukungan tanpa batas untuk format gambar WebP. Fitur ini memberikan pengurangan ukuran hingga 34% untuk gambar yang disajikan dibandingkan dengan JPEG dari tingkat kualitas visual setara. Satu hal yang perlu diingat, WebP saat ini belum didukung oleh semua browser, salah satunya browser Firefox.
Walaupun WebP belum didukung pada semua browser, tidak perlu ragu untuk menggunakan Staticaly Imgpx. Trik dalam menyajikan format WebP secara universal adalah dengan mendeteksi secara otomatis browser mana yang mendukungnya, layanan ini mampu mendeteksi dan melayani format gambar terbaik untuk setiap permintaan browser.
Project ini sudah didukung perusahaan besar tingkat dunia dan perusahaan besar lainnya di Indonesia, dan akan terus mengembangkan platform ke dalam lingkup yang lebih baik lagi dan terutama lebih cepat.
Untuk menggunakan layanan Staticaly Imgpx dengan mudah untuk sumber CDN semua gambar, kita bisa menggunakan bantuan javascript. Sehingga kita tidak perlu mengedit semua gambar, javascript ini akan mengganti protokol URL semua gambar menjadi
https://cdn.statically.io/img/Simpan kode javascript berikut ini di atas kode
</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>
Sekarang silahkan inspect semua gambar untuk melihat URL-nya.
Namun javascript ini tidak bisa merubah URL gambar yang ditampilkan menggunakan javascript lain seperti gambar pada related post dari DTE. Cara mengatasinya harus dirubah langsung pada javascriptnya. Saya akan memjelaskannya pada postingan selanjutnya.
Javascript di atas bukan hanya untuk Blogger, tapi bisa juga digunakan pada Wordpress dan lainnya.
Selamat mencoba dan semoga bermanfaat.