Kompres Otomatis Gambar di Artikel Blogger
Selamat malam semua, muahahaha, di edisi kesepian kali ini gue mau bagiin hasil Eksperimen gue seduaharian, tentang gimana caranya ngurangi pemakaian sumberdaya Gadget yang akses Blog gue, yang sebelumnya berat, jadi eumm lanjay jaya...
Sebelum ke topik, gw mau jelasin hasil analisa atas blog gue yang kemaren-kemaren lemot banget buat diakses (dari segi Internet, maupun pemakaian sumber daya gadget), terutama Artikel Tentang Wisata, minta ampun dah lemotnya, nah disini gue berspekulasi bahwa Gambar dengan Resolusi besarlah yang mungkin jadi biang keroknya, toh bisa jadi itu yang buat Browser lebih lama Ngerendernya, dari sini gue smpet mikir, gimana kalo Gambar ini otomatis di kompres aja, dari resolusi yang gede, jadi resolusi "sekian-sekian" dan juga gimana nih resolusi gambar bisa dikecilin tapi tetep bisa Responsive (ukuran Original *bukan Medium atau Large*).
Baca Juga : Cara Custom Thumbnail Utama Agar Berbeda Dengan Artikel Blogger
Baca Juga : Cara Custom Thumbnail Utama Agar Berbeda Dengan Artikel Blogger
Akhirnya ketemulah gue logikanya, dan jujur gue baru sadar.. ternyata Blogger udah nyiapin auto Compress dengan mengubah atau manipulasi Link gambar yang kita Upload via Artikel (Blogger), padahal nih blog udah dibuat ulang beberapa kali buat Compress gambar seKecil-kecilnya dengan cara Manual, lo pikir sendiri seberapa niatnya gue wkwkwk.
Dah dah.... Kelamaan basa-basi, Okey langsung aja yak.
Dah dah.... Kelamaan basa-basi, Okey langsung aja yak.
Buka Tema Editor
Pertama lo buka Tema > Edit Html, gaperlu dijelasin panjang lebar ini mah wkwkwk...
Tempelkan Kode
Tempelkan Kode berikut tepat dibawah tag <Head>, Kode ini gue upload di Google Drive gue, atau lo bisa Copas langsung kode dari Pastebin dibawah silahkan pilih.
Versi Simplenya :
<script async='async' src='https://docs.google.com/uc?export=download&id=1TDaCj2hamujwg1AbPxnEC7h0ietaN8Zq' type='text/javascript'/>
Versi Ribetnya :
Penjelasan Fungsi Kode
Sebelum gue jelasin Fungsi kode ini, pertama gue mau jelasin dulu tentang Compress gambar dengan manipulasi Link kaya yang gue bilang diatas, nah gue contohin 1 Link Gambar.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhrEHIP2YsbXChaEwunHfS-v5LP3CWbL6NzBwlUCZ1zVzfU3oKb7_Tel4rOi5O344t5pnx7WtxQxzm4KSZzb4Jp0a0oUxz9dKDB2NcX4THSKFGHrLXj0cfTSfLLWu4RvIdR60Apymx2U0/s1600/Ilustrasi%2BRank%2B-%2BCatatan%2BNizwar%2BID.jpg
Kata yang gue buat merah itulah yang menentukan Ukuran Fisik pada Gambar (bukan ukuran tataletak), dan s1600 itu menunjukan Ukuran Original, kalo lo ubah s1600 itu dengan angka yang lebih kecil, misalnya s700, maka Gambar yang diload lebih Kecil + Ringan dan sudah di Compress.
Nah Fungsi Kode yang gue bagiin disini mengubah ukuran Gambar s1600 menjadi s550 secara otomatis, Dengan Catatan, setiap Gambar yang lo siapkan harus Original (Liat gambar diatas), apa alasan gue pake ukuran Original ketimbang Medium? jawabnya karna ukuran itu bakal Responsive dengan lembar Tulisan Blog, sementara Medium, ukuran Height dan Widthnya sudah ditentukan sebagai Tata Letak (Bukan gambar fisik) jadinya gambar itu gabakal responsive pas diakses di HP atau perangkat dengan resolusi kecil... masih ga ngerti?
Baca Juga : Hajar Balik Pelaku Jingling, Anti Jingling Versi Gue!
Baca Juga : Hajar Balik Pelaku Jingling, Anti Jingling Versi Gue!
Coba perhatikan Gambar ini!
Lo bisa liat perbedaannya kan? teknik Original inilah yang gue pake buat bikin Blog biar jadi *rada gimana gitu* pas diakses di tiap Perangkat, tapi kekurangannya, ukuran Gambar bakal lebih besar dari ukuran Layout Editor Artikel (lumayan ngerepotin)... singkatnya bakal kaya gini...
Tenang aja, biarkan gambar itu membesar kaya gitu, karna di Postingan bakal jadi Responsive...
Disinilah gue coba mikir, gimana kalo gambar dengan Resolusi Gede, dipaksain Tata Letaknya kecil (Resolusi Gambar Fisik tetep Gede), disitu pasti bakal banyak makan Memori RAM, CPU pas Ngerender Halam dan Kuota Data buat akses artikel tentunya wkwkwk....
Jadi intinya, Kode diatas itu buat mengReplace / Menggantikan s1600 dengan s550 pada URL Gambar lalu Gambar bakal diLoad Ulang sesuai ukuran yang udah diubah... Tapi tenang, saat Gambar di klik, Resolusi Preview Gambar bakal kembali Original jadi Gambar ga akan pecah pas pengunjung blog lo klik tuh gambar, dengan cara ini juga Ukuran gambar bisa berkurang hampir 80%, jadi kecepatan akses dan membaca Artikel Blog lo bisa ditingkatkan 😊😊😊, Code ini make JQuery, pastikan Blog lo make beginian.
Baca Juga : Cara Membuat Slide Foto di Artikel Blogger, kaya Artikel Wisata Gue!
Baca Juga : Cara Membuat Slide Foto di Artikel Blogger, kaya Artikel Wisata Gue!
Okeh sekian tips Blogging gue kali ini, hasil dari begadang 2 harian wkwkwk, dan gila gue baru sadar udah jam 1 malem, perasaan tadi nulis jam 11 wkwk.. yaudin lah sekian artikel gue kali ini.. See ya1
Cari dengan kata-kunci :
Cara Otomatis Compress Gambar Blogger
Cara Compress Gambar Blog
Memperkecil Ukuran Gambar di Artikel Blog
Agar Gambar lebih Responsive
Tips Memasang Gambar di Blog
Blog dengan Gambar
0 Response to "Kompres Otomatis Gambar di Artikel Blogger"
Post a Comment