Cara Menggunakan Gambar Format Webp Agar Website Lebih Ringan

Berikut adalah Cara Menggunakan Gambar Format Webp Untuk Website Agar Lebih Ringan sebagai solusi yang mungkin dapat membantu.

Apakah kamu mengelola atao memiliki sebuah website yang loadingnya berat, lemot, dan lama terbuka? Salah satu penyebabnya adalah karena ukuran file gambar yang besar, format yang kurang mendukung, jumlah file yang sudah terlalu banyak.

Menggunakan Gambar Format Webp Pada Platform PopojiCMS V.2

Pada dasarnya platform PopojiCMS tidak mendukung jenis gambar dengan ekstensi webp. Jadi ketika kamu mengupload gambar dengan ekstensi webp pasti tidak akan bisa dan menjumpai error extension.

Di sisi lain penggunaan gambar dengan ekstensi webp merupakan salah satu solusi untuk memperkecil ukuran dan kapasitas file serta meringankan loading website/blog.

Untuk itu bagi kalian yang ingin menggunakan file gambar dengan ekstensi webp, maka harus melakukan perubahan dengan menambahkan sedikit kode. Dengan tujuan:

1. Untuk mengijinkan upload gambar dengan format/extension webp.
2. Supaya gambar dengan format/extension webp di eksekusi ke folder thumbs, sehingga tetap memiliki preview pada dialog/file manager.

Berikut adalah cara yang dapat kalian lakukan untuk menggunakan Gambar Format Webp Pada Platform PopojiCMS V.2:

Menambahkan Webp Extension Pada Config.php di Bagian Allowed extensions

Silahkan buka file config.php pada direktori/folder web_dir/po-includes/js/filemanager/config/config.php, kemudian cari deretan script berikut:

	//**********************
	//Allowed extensions (lowercase insert)
	//**********************
	'ext_img'                                 => array( 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg' ), //Images
	'ext_file'                                => array( 'doc', 'docx', 'rtf', 'pdf', 'xls', 'xlsx', 'txt', 'csv', 'html', 'xhtml', 'psd', 'sql', 'log', 'fla', 'xml', 'ade', 'adp', 'mdb', 'accdb', 'ppt', 'pptx', 'odt', 'ots', 'ott', 'odb', 'odg', 'otp', 'otg', 'odf', 'ods', 'odp', 'css', 'ai' ), //Files
	'ext_video'                               => array( 'mov', 'mpeg', 'm4v', 'mp4', 'avi', 'mpg', 'wma', "flv", "webm" ), //Video
	'ext_music'                               => array( 'mp3', 'm4a', 'ac3', 'aiff', 'mid', 'ogg', 'wav' ), //Audio
	'ext_misc'                                => array( 'zip', 'rar', 'gz', 'tar', 'iso', 'dmg' ), //Archives

Tambahkan extension webp pada baris kode:

'ext_img'                                 => array( 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg', 'webp' ), //Images

Sehingga allowed extension menjadi seperti berikut:

	//**********************
	//Allowed extensions (lowercase insert)
	//**********************
	'ext_img'                                 => array( 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg', 'webp' ), //Images
	'ext_file'                                => array( 'doc', 'docx', 'rtf', 'pdf', 'xls', 'xlsx', 'txt', 'csv', 'html', 'xhtml', 'psd', 'sql', 'log', 'fla', 'xml', 'ade', 'adp', 'mdb', 'accdb', 'ppt', 'pptx', 'odt', 'ots', 'ott', 'odb', 'odg', 'otp', 'otg', 'odf', 'ods', 'odp', 'css', 'ai' ), //Files
	'ext_video'                               => array( 'mov', 'mpeg', 'm4v', 'mp4', 'avi', 'mpg', 'wma', "flv", "webm" ), //Video
	'ext_music'                               => array( 'mp3', 'm4a', 'ac3', 'aiff', 'mid', 'ogg', 'wav' ), //Audio
	'ext_misc'                                => array( 'zip', 'rar', 'gz', 'tar', 'iso', 'dmg' ), //Archives

Simpan perubahan pada file tersebut.

Menambahkan Kode Webp Pada Thumbnails ff-items

Selanjutnya silahkan buka file dialog.php dan tambahkan webp extension agar file gambar webp yang kalian upload muncul/dapat di lihat(memiliki preview) pada dialog manager website kalian.

Berikut adalah sebagian script kode dialog.php dalam direktori web_dir/po-includes/js/filemanager/dialog.php:

$jplayer_ext=array("mp4","flv","webmv","webma","webm","m4a","m4v","ogv","oga","mp3","midi","mid","ogg","wav");

Tambahkan webp extension pada baris tersebut sehingga menjadi seperti berikut:

$jplayer_ext=array("mp4","flv","webmv","webma","webm","m4a","m4v","ogv","oga","mp3","midi","mid","ogg","wav","webp");

Selanjutnya simpan perubahan pada file dialog.php tersebut.

Sekarang kalian dapat menggunakan gambar dengan format webp untuk kebutuhan konten website kalian.

Untuk melakukan konversi gambar menjadi webp kalian dapat menggunakan webp converter situs web pihak ke 3. Saya pribadi menggunakan fitur yang di sediakan secara geratis di situs https://converter.11zon.com/en/image-to-webp/ untuk mengkonvesi gambar ke webp.

Untuk kebutuhan pengembangan, saat ini saya sedang mengerjakan auto converter to webp pada PopojiCMS V.2 supaya setiap gambar yang di upload otomatis dapat di konversi ke webp.

Cara Merubah Gambar Jadi Webp Otomatis Saat Di Upload Di Wordpress