Cara Kompres Gambar dengan CDN Staticaly

Dalam tutorial kali ini saya akan membagikan cara kompress gambar dengan CDN Staticaly. Gambar adalah salah satu elemen yang penting dalam sebuah blog.

Tanpa adanya gambar, blog akan tampak monoton dan membosankan untuk dibaca. Apalagi untuk jenis blog tutorial yang membutuhkan gambar untuk membantu menjelaskan langkah-langkah yang ditulis.

Tapi seperti yang sudah kita ketahui, gambar juga bisa menjadi elemen yang memberatkan blog ketika di-load. Semakin banyak gambar dalam sebuah blog, maka semakin berat dan lama sebuah blog dibuka.

Jika pengunjung merasa gambar terlalu lama dibuka, bukan tidak mungkin mereka akan mem-blacklist situs kamu. Tentu hal ini akan merugikan kamu karena jumlah pengunjung akan berkurang.

Ada beberapa cara yang bisa kamu lakukan untuk mempercepat loading blog atau website. Antara lain :

1. Mengurangi jumlah gambar yang tampil dalam satu halaman.
2. Mengurangi resolusi masing-masing gambar.
3. Mengaktifkan kompresi gambar otomatis.

Jika poin 1 dan 2 sudah kamu lakukan tapi halaman masih lambat dibuka, maka gunakan cara ke-3.

Ada banyak tutorial tentang bagaimana cara compress image atau gambar secara online ataupun offline. Sayangnya, sebagian besar dilakukan secara manual. Kompres gambar dilakukan satu per satu pada setiap gambar yang ada. Cara ini tentu memakan waktu dan tenaga.

Solusi Kompres Gambar Otomatis

Saya menemukan sebuah solusi sederhana yang dipaparkan oleh Mas Adhy dari Kompi Ajaib, yakni memanfaatkan CDN Imgpx dari Staticaly.

Dengan menggunakan CDN Imgpx Staticaly, setiap gambar yang ada di blog kamu akan dikompres secara otomatis menjadi lebih kecil dan disimpan dalam cache server CDN super cepat yang dimiliki Staticaly.

Ukuran file gambar yang lebih kecil tentu akan meningkatkan performa situs kamu GTmetrix atau Google Page Speed. Berikut adalah perbandingan ukuran gambar yang di-host langsung pada Blogger dan yang telah melewati CDN Staticaly :

Cara Pasang Script Compress Image di Blogger

Kamu tidak perlu melakukan submit satu per satu setiap gambar yang ada di blog ke Staticaly. Cukup gunakan kode javascript yang pendek dan tidak memberatkan, semua gambar yang ada di situs kamu akan dikompresi secara otomatis oleh Staticaly.

Untuk memasang script Javascript ini, bukalah dashboard Blogger kamu kemudian seperti biasa masuk ke menu Theme dan klik tombol Edit HTML.

Copy dan paste script di bawah ini tepat sebelum tag </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.staticaly.com/img/");
  };
//]]>
</script>

Klik tombol Simpan dan refresh blog atau situs kamu.

Untuk mengetahui apakah script sudah berjalan atau tidak, kamu bisa melakukan Inspect Element pada gambar yang ada di blog. Pastikan setiap tag img sudah mengarah ke https://cdn.staticaly.com/

Kekurangan atau kelemahan kompresi gambar

Gambar yang dikompres pasti mengalami penurunan kualitas. Gambar biasanya dihiasi noise dan lebih buram. Bahkan pada gambar dengan dimensi/resolusi yang lebih kecil bisa hampir tidak terbaca atau terlihat.

Silahkan lihat perbedaan gambar yang dihost di Blogger (default) dan yang setelah dikompress oleh CDN Staticaly di bawah ini :

Gambar Blogger

Gambar CDN Staticaly

Untuk mengatasi gambar yang buram karena kompresi, ubah ukuran gambar pada masing-masing posting/artikel ke Large atau X-Large agar masih nyaman dibaca.

Lalu kenapa blog Mas Aping tidak memasang script ini? Blog ini banyak menulis tentang tutorial. Otomatis penurunan kualitas gambar akan berdampak buruk pada kenyamanan membaca. Jika blog kamu tidak banyak memiliki gambar, trik di atas sangat patut kamu coba.

Catatan :Gambar yang terkompresi adalah gambar pada tag img. Jika kamu menyertakan link ke sumber gambar di Blogger maka gambar asli tidak terpengaruh kompresi.