ลดขนาดรูป WordPress ด้วย WebP ซึ่งทางอินดี้เขียนบทความมาซักพักแล้ว หลังๆเจอปัญหาว่าทำไมรูปมีขนาดใหญ่ขึ้น และ ไม่ได้ทำให้เว็บโหลดเร็วขึ้น พอไปศึกษาจึงพบว่าปัจจุบันมีการนำเทคโนโลยีของ Google มาใช้งานสำหรับบีบอัดรูปให้เล็กลง ที่เรียกว่า WebP โดยจะมีขนาดเล็กกว่า JPG มากกว่า 30 เท่า ซึ่งน่าสนใจมาก และที่สำคัญทำให้เว็บโหลดเร็วด้วย
ข้อดีของ WebP กับการลดขนาดรูป WordPress
จากการที่อินดี้ได้พยายามศึกษาหาข้อมูลมาทำให้เห็นข้อดีของ WebP โดยอธิบายเอาไว้ดีงนี้ ซึ่งก็คิดว่าเพียงพอที่จะนำ WebP มาใช้งานกับ WordPress ของ IndyDiary.com
- รูปภาพมีขนาดเล็กกว่า JPG มาก
- ประหยัดพื้นที่บน VPS
- ทำให้เว็บโหลดเร็วขึ้น
- สามารถช่วยเพิ่มคะแนนจาก Google page speed
- Device รุ่นใหม่ๆก็ support แล้ว
ข้อสังเกตของ WebP มีนิดเดียวคือจะไม่ Support กับ Browser เก่าๆ แต่ก็พอรับได้ เพราะทุกวันนี้คนก็ใช้ Browser ใหม่ๆกันหมดแล้ว
เหตุผลในการเลือกใช้งาน WebP กับ ลดขนาดรูป WordPress
ทางอินดี้เองมองว่าถ้าใช้งาน Plugins ก็ง่าย แต่จากที่หาข้อมูลมาพบว่า Plugins ตัวที่ใช้งานได้ดี และฟรี มีน้อย ต้องเสียตังซื้อ Plugins เพื่อใช้งาน Convert รูปทั้งหมดใน Website ให้เป็น WebP และ ที่สำคัญ คือ การใช้ Plugins มีความเสี่ยงที่จะทำให้รูปที่ Upload หรือ บทความที่ Post ไปแล้วเกิดความเสียหาย
จากทั้งหมดที่เล่ามาเลยคิดว่างั้นก็จัดแบบ manual ไปเลยแล้วกัน เน้นรูปใหม่ๆที่เป็น WebP และขั้นตอนการทำไม่อยาก จนเกินไป จากทั้งหมดทั้งมวล เลยเกิดบทความนี้ขึ้นมา การ Upload รูป WebP ขึ้น WordPress โดยไม่เสียเงินแม้แต่บาทเดียว
ขั้นตอนการ Upload WebP เข้าไปใน WordPress
โดยขั้นตอนการ Upload WebP ใช้งานใน WordPress จะพยายามอธิบายให้เข้าใจง่ายที่สุด โดยมีขั้นตอนดังนี้
Convert รูปเป็น WebP เพื่อ ลดขนาดรูป WordPress
- เข้าไปที่เว็บไซต์ หรือ บริการเว็บฟรีออื่น Convert an image to WebP
- เลือก Upload รูป และ กด Start Conversion
- เมื่อ Process เสร็จก็ Download รูปมาได้แล้ว และ มาทำการ UpLoad ด้วย WordPress ตามปกติ แต่จะถึงขั้นนั้น อ่านบทความนี้ให้จบก่อน
ปรับแต่ง WordPress ให้ทำการ Upload WebP ได้
- เข้าไปที่ WordPress Theme ที่เราใช้งานกับ WebSite อยู่
- Appearance > Team Editor > Function.php ตัวอย่างดังรูป
- Code สำหรับให้ WordPress สามารถ Upload WebP ได้
//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');
- สำหรับ Preview รูป WebP ใน Libraby ของ WordPress
//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );
if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}
return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
บทสรุป
เพียงแค่เราแก้ไข Theme ใน Function.php เราก็สามารถทำให้ WordPress ของเราสามารถ Upload รูปที่เป็น format WebP ได้แล้ว ซึ่งเว็บของเราก็จะโหลดเร็วขึ้นเพราะรูปมีขนาดเล็กลง และ ไม่เสียความละเอียดด้วย จากบทความที่แล้วทางอินดี้แนะนำ Cloudflare SSL ตั้งค่า ให้ได้เกรด A+ หากใครสนใจสามารถอ่านบทความได้ที่ Cloudflare SSL ตั้งค่า ให้ได้เกรด A+
ขอบคุณครับ เป็นประโยชน์มาก