Optimasi Gambar Blog Menggunakan CDN Statically

Inputekno
0
Optimasi Gambar Blog Menggunakan CDN

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.

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.

Cara Mudah Konversi Gambar Ke WebP - InpuTekno
2 Cara Mudah Konversi Gambar Ke WebP Secara Online dan Offline.
www.inputekno.comwww.inputekno.com

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

  1. Masuk ke blogger > Tema > Edit HTML
  2. Salin kode di bawah berikut ini dan paste tepat di atas tag </body>
  3. 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.

Cara Buat Tabel Dinamis Menggunakan Gridjs di Blog - InpuTekno
Cara membuat tabel dinamis menggunakan library Grid.js di blog.
www.inputekno.comwww.inputekno.com

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.