Membuat Efek Gambar Ngeblur (Bokeh) di Wordpress

  • calendar_today
  • styletutorial
  • shareshare
  • question_answercomment
Thumbnail - Membuat Efek Gambar Ngeblur (Bokeh) di Wordpress

Pernahkan kamu melihat / memperhatikan saat mengunjung situs seperti Pinterest, Google Images, dan Medium. Jika kamu perhatikan akan ada efek dari blur ke normal (gambar asli) dasar ke kamu melihat gambar. Hal ini sering disebut image lazy-loading dimana gambar tidak langsung direquest ke server ketika halaman di ambil tetapi ketika kamu melihat gambar ( gambar ada di layar). Tujuan dari hal ini adalah mempercepat dari waktu load dari halaman website.

Image - Membuat Efek Gambar Ngeblur (Bokeh) di Wordpress
pinterest placeholders

Selain itu efek blur akan memberikan kesan ke pengguna / pengunjung bahwa gambar sedang di prosess ke server, ini membuat mereka menjadi tidak meninggalkan halaman tadi. Teknik blur ini sebenarnya sangat sederhan yaitu menggunakan sebuah gambar GIF yang memiliki ukuran pixel yang sangat kecil yaitu 1 pixel. Gambar GIF tadi kemudian di rubah formatnya menjadi Base64-encoded Data URI sebagai atribut src.

Apa Itu Base64-encoded Data URI

Base64 adalah jenis enskripsi yang lebih mudah untuk mengelola data (seperti dalam gambar, pdf dan lainnya) tersebut sebagai teks. Satu-satunya masalah adalah pengkodean base64 menggunakan karakter yang tidak berfungsi dengan baik di URL dan terkadang header HTTP (misalnya +, / dan = karakter dicadangkan atau memiliki arti khusus dalam URL). Penyandian URL dirancang untuk mengatasi masalah itu, tetapi kadang-kadang rawan kesalahan (misalnya double encoding) atau perkakas hanya tidak melakukan hal yang benar (IIS menerjemahkan %2F ke dalam / sebelum masuk ke aplikasi dan dengan demikian membingungkan ASP Kerangka routing .NET).

Memasang Plugin Di Wordpress

Untungnya pada wordpress telah di buat sebuah plugin yang memudahkan untuk membuat efek Warna Gambar agak Ngeblur (Bokeh) yaitu dengan Dominant Lazy Color Loading dengan plugin ini kamu tidak perlu bisa koding untuk membuat efek blur tadi cukup dengan menginstall plugin ini kamu sudah bisa membuat efek tadi.

  1. Download file pluginnya di link download
  2. Buka Admin Panel
  3. Pilih New Plugin
  4. Pada form yang di atas kamu upload file plugin tadi
  5. Aktifkan plugin dengan klik tombol activated now

Mengaktifkan Efect Gambar Ngeblur

Plugin ini tidak bisa mengupdate artikel kamu yang terdahulu agar bisa gambarnya di blur. Jadi kamu perlu mengaktifkanya secara manual agar gambarnya bisa terblurkan (bokeh). Hal ini hanya perlu kamu lakukan sekali karena ketika kamu membuat mengungah artikel yang baru, plugin ini secara otomatis mendeteksi gambar yang ada pada artikel itu dan menambahkan efek bokeh.

Image - Membuat Efek Gambar Ngeblur (Bokeh) di Wordpress
wordpress admin setting menu

  1. Klik setting pada Panel Admin kamu**
  2. Klik di Dominant Lazy Color Loading
  3. Pada tab placehoder pilih yang SVG (More bytes, preserves image aspect ratio)
  4. Klik Save Change
  5. Klik calculate now pada tab calculation
Image - Membuat Efek Gambar Ngeblur (Bokeh) di Wordpress
Dominant Lazy Color Loading warning

Sumber:

Comment:

Belum ada satupun komentar, tulis komentar pertama kamu sekarang