Cara Kompres Gambar Dengan Cdn Staticaly

Gambar yaitu 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 menyerupai yang sudah kita ketahui, gambar juga dapat menjadi elemen yang memberatkan blog dikala di-load. Semakin banyak gambar dalam sebuah blog, maka semakin berat dan usang sebuah blog dibuka.

Jika pengunjung merasa gambar terlalu usang dibuka, bukan mustahil mereka akan mem-blacklist situs kamu. Tentu hal ini akan merugikan kau alasannya yaitu jumlah pengunjung akan berkurang.

Ada beberapa cara yang dapat kau 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 kau lakukan tapi halaman masih lambat dibuka, maka gunakan cara ke-3.

Ada banyak tutorial perihal 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 memakai CDN Imgpx Staticaly, setiap gambar yang ada di blog kau 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 kau GTmetrix atau Google Page Speed. Berikut yaitu perbandingan ukuran gambar yang di-host eksklusif pada Blogger dan yang telah melewati CDN Staticaly :

Cara Pasang Script Compress Image di Blogger

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

Untuk memasang script Javascript ini, bukalah dashboard Blogger kau kemudian menyerupai biasa masuk ke sajian Theme dan klik tombol Edit HTML.

Copy dan paste script di bawah ini sempurna 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, kau dapat melaksanakan 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 niscaya mengalami penurunan kualitas. Gambar biasanya dihiasi noise dan lebih buram. Bahkan pada gambar dengan dimensi/resolusi yang lebih kecil dapat 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 alasannya yaitu kompresi, ubah ukuran gambar pada masing-masing posting/artikel ke Large atau X-Large supaya masih nyaman dibaca.

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

Catatan :Gambar yang terkompresi yaitu gambar pada tag img. Jika kau menyertakan link ke sumber gambar di Blogger maka gambar orisinil tidak terpengaruh kompresi.

Bagikan Artikel ini