|
Gambar pada sebuah website atau blog tentu berperan penting sebagai ilustrasi serta memperjelas maksud dari isi artikel itu sendiri. Terlebih jika artikel tersebut perlu banyak dukungan gambar
Meski berperan penting gambar bisa menjadi salh satu faktor menurun nya kinerja dan performa kecepatan situs jika tidak di optimalkan dengan baik.
Karena itu diperlukan optimasi gambar agar kecepatan, pengalaman pengguna dan performa situs tetap bekerja dengan baik.
Daftar Isi
Cara Optimasi Gambar Blog
Dalam mengoptimalkan gambar ada banyak cara yang bisa di lakukan, mulai dari memilih format file gambar terbaik, kompresi, gambar responsif dan memanfaatkan layanan CDN gratis.
Di artikel kali ini, kita akan berbagi cara mengoptimalkan gambar blog dengan memanfaatkan layanan Jaringan Pengiriman Konten (CDN) gratis menggunakan CDN Statically.
Langkah Optimasi Gambar Blog Menggunakan CDN Statically
Untuk menggunakan CDN Image Statically kita cukup mengubah URL gambar mengarah ke jaringan konten Statically.
Contohnya seperti URL gambar Blogger berikut:
https://blogger.googleusercontent.com/img/.../image.png
Untuk mengarahkan URL gambar tersebut ke CDN Image Statically kalian cukup merubah https:// menjadi https://cdn.statically.io/img/ seperti berikut
https://cdn.statically.io/img/blogger.googleusercontent.com/img/.../image.png
Atau seperti URL gambar wordpress berikut:
https://www.example.com/wp-content/uploads/.../image.jpeg
Menjadi
https://cdn.statically.io/img/www.example.com/wp-content/uploads/.../image.jpeg
Praktik di atas tentu bisa melelahkan jika harus mengubah seluruh URL gambar di dalam blog secara manual.
Agar lebih mudah dan cepat melakukan optimasi gambar dengan CDN Statically, kalian bisa menggunakan javascript atau plugin tersedia.
Otomatis Optimasi Gambar Blog Dengan CDN Statically
Untuk pengguna Blogger tentu tidak memungkinkan jika menggunakan plugin statically, karena itu menerapkannya menggunakan javascript adalah praktik yang mudah.
Berikut ini langkah mengubah seluruh URL gambar blogger menggunakan CDN Statically menggunakan javascript
- Masuk ke blogger >
Tema>Edit HTML - Salin kode berikut dan paste tepat di atas tag
</body> - Terakhir Klik SIMPAN Template
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].src = images[i].src.replace(/(http|https):\/\//, 'https://cdn.statically.io/img/') + '?f=webp';
};
Untuk pengguna Wordpress kalian bisa menggunakannya dengan mudah hanya dengan menginstal Plugin Statically atau secara manual seperti di atas jika plugin tidak tersedia.
Penutup
Nah itu tadi cara optimasi gambar blog menggunakan cdn image statically. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan.