Sedar tak sedar, sekarang kita boleh upload image dalam format webp ke dalam WordPress. Sebenornya den sendiri pun tak sure sejak bila dah boleh upload webp dalam WordPress. Tapi, sekarang nih dah banyak utility untuk save image dalam format webp. Makanya tak jadi masalah dah nak upload webp ke dalam WordPress. Nak WordPress anda berdesup? Uploadlah image anda dalam format Webp.
Nak upload webp, kenalah ada sediakan image dalam format webp. Nak guna apa untuk buat image dalam format webp? Meh den kongsikan apa yang den guna untuk website yang den bina.
Paint dot Net
Personally, den gunakan software Paint.Net (bukan MS Paint ya) kat dalam Notebook den untuk save images dalam format webp.
Dengan Paint.Net nih, den boleh tengok nilai quality yang sesuai untuk digunakan semasa save image. Asalkan gambar tak jadi berkotak kotak, den kira ok la. Setakat yang den dah cuba, den boleh save image dengan quality level sehingga 20%.Lagi rendah dari itu, biasanya gambar akan jadi berkotak kotak. Quality level nih bergantung kepada gambar, so den tak boleh nak berikan nilai quality yang standard untuk digunakan. Kena tengok dengan mata kepala sendiri.
Squoosh App
Kalau den tengah guna PC/Notebook yang tak ada Paint.Net, den akan convert ke webp gunakan Google Sqoosh app. Sempoi juga Squoosh App nih. Boleh compare terus quality gambar sebelum download converted image tuh.
First thing about images, resolution paling bosar den akan upload adalah 1920×1080. Lepas tuh save as webp dan pastikan size file yang terhasil tidak melebihi 100KB. Lagi rendah lagi bagus.
Masa Save As atau convert tuh boleh jer turunkan Quality sampai 20% – 30%. Asal sedap mata memandang. Memang akan hilang quality sikit – kalau ada line line halus akan hilang tapi gambor tak jadi pixelated.
Caesium Image Compressor
Ada masanya, especially bila den tengah buat servis BerdesupWP untuk client, den kena buat bulk image optimization. Dalam kes macam nih, biasanya den tak boleh nak buat image conversion dari JPG atau PNG ke Webp. Sebab dalam website client dah ada reference kepada image dalam format yang di upload. So, den hanya boleh optimize images. Den akan download upload folder dari website dan buat bulk image optmization menggunakan Caesium.
Dengan Caesium den boleh set, image resize, dan quality level untuk setiap format – jpg, png dan webp. Tetapkan setting yang diinginkan, tekan compress dan dia akan buat kerja dia – compress segala image dalam folder yang dipilih. Selesai optimize, den akan upload folder semula ke dalam website.
Kenapa nak upload webp? Sebab kalau tak upload webp, nanti bila time optimize images biasanya akan enable webp support. Contohnya, dalam LiteSpeed Cache ada setting untuk Image Optimization. Boleh enable supaya menggunakan Webp dalam srcset untuk image di dalam website.
Bila kita dah upload image dalam format webp, tak perlulah buat LiteSpeed Image Optimization lagi. Jimat la CPU resources kat server tuh sikit.
Image optimization nih, antara langkah penting dalam kerja kerja BerdesupWP. Ianya juga adalah antara kerja remeh. Nak kena optimize setiap image dalam website. Nak download, optimize dan upload semula. Nasib baik ada tools macam Caesium. Mudah sikit la kerja den.
Cumanya, dari pengalaman den buat BerdesupWP nih, banyak website yang guna image dalam format PNG. Jenuh nak optimize. PNG format tak boleh nak compress sangat. Sebab tuh file size PNG biasanya besar gedabak. Bila file dah besar, load time pun menyiputlah. Kena pulak gambor tuh ket Hero Section. Memang ke laut lah result Page Speed Inside tuh nanti. Worst case scenario, bila mengadap situasi macam nih, den akan convert image PNG yang betul betul besor tuh kepada JPG dan optimize. Lepas optimize, den rename semula ke PNG supaya image tuh masih boleh appear dalam website.
Mungkin ada yang bertanya, format Webp ni dah boleh digunakan dalam semua jenis Browser ke? Dah 2024 dah pun. Setakat hari ini, 13 Februari 2024, hanya Internet Explorer sahaja yang tak support Webp.
Jika ada lagi yang masih menggunakan IE hari ini untuk browse internet secara am, den tepuk dahi la. Kalau TERpaksa guna IE untuk access aplikasi tertentu, boleh diterima lagi la kot.
Baiklah, itu tiga cara yang den gunakan untuk optimize images supaya WordPress berdesup. Sejujurnya, ada pelbagai lagi tools lain yang boleh digunakan. Photoshop tentunya boleh, tapi ada kos yang perlu dikeluarkanlah. Paint.Net yang den gunakan ni free jer dan dia bersesuaian dengan apa yang den perlukan dalam image editor.
Kalau anda ada gunakan image tool yang lain, bolehla kongsi dengan para pembaca den dalam nih.
