WebP Images ทำงานอย่างไรใน WordPress

เราได้กล่าวถึงมากกว่าหนึ่งครั้งแล้วว่า ความเร็วในการโหลดเว็บไซต์ของเรา เป็นปัจจัยสำคัญในการจัดตำแหน่งให้ดีในเครื่องมือค้นหา และถึงแม้คุณอาจไม่จำเป็นต้องติดอันดับ Google Speed ​​​​แต่ความพยายามใด ๆ ที่เกี่ยวข้องกับการปรับรูปภาพให้เหมาะสมก็มีความสำคัญอย่างยิ่งในการปรับปรุง SEO

ชุมชน WordPress ตระหนักดีถึงเรื่องนี้ และด้วยเหตุนี้ในเวอร์ชันล่าสุด 5.8 จึงได้เพิ่มฟังก์ชันการทำงานเพื่อรองรับรูปแบบภาพ WebP

รูปภาพ WebP คืออะไร

WebP คือรูปแบบภาพที่พัฒนาโดย Google ในปี 2010 เพื่อเป็นทางเลือกแทนรูปแบบต่างๆ เช่น PNG และ JPG โดยให้ขนาดไฟล์ที่เล็กกว่ามากในขณะที่ยังคงคุณภาพของภาพที่ใกล้เคียงกัน WebP รองรับการบีบอัดข้อมูลแบบไม่สูญเสียข้อมูล ไม่เหมือนกับรูปแบบอื่นๆ ตลอดจนความโปร่งใสและภาพเคลื่อนไหว

แม้จะมีคุณลักษณะเหล่านี้ WebP ก็เสนอขนาดไฟล์ที่เล็กกว่าทางเลือกอื่นเสมอ ในการศึกษาเปรียบเทียบรูปแบบรูปภาพเหล่านี้ของ Google พบว่ารูปภาพที่สูญเสียข้อมูลของ WebP มีขนาดเล็กกว่า JPG โดยเฉลี่ย 30% และเล็กกว่า PNG 25%

นอกจากนี้ Google PageSpeed ​​Insights ซึ่งเป็นผู้ประเมินระดับการเพิ่มประสิทธิภาพเว็บไซต์ของคุณ แนะนำให้คุณใช้รูปแบบภาพที่ทันสมัยเป็นหนึ่งในโอกาสในการปรับปรุงความเร็วในการโหลดเว็บไซต์ของคุณ

คำถามหนึ่งที่คุณอาจมีเมื่อพิจารณาว่าคุณควรมีภาพทั้งหมดใน WebP หรือไม่คือการสนับสนุนในปัจจุบันสำหรับเบราว์เซอร์ต่างๆ สิ่งสุดท้ายที่คุณต้องการคือการที่ผู้อ่านของคุณไม่สามารถดูภาพได้อย่างถูกต้อง

และความจริงก็คือการสนับสนุนในแต่ละคนเพิ่มขึ้น ขณะนี้ เรากำลังพูดถึงการสนับสนุน 95% แล้ว

วิธีแปลงรูปภาพเป็น WebP

ในการอัปโหลดรูปภาพ WebP ไปยังไลบรารี สิ่งแรกที่เราต้องมีคือรูปภาพดังกล่าวในรูปแบบที่เป็นปัญหา หากคุณดาวน์โหลดรูปภาพจากคลังรูปภาพ คุณจะต้องดาวน์โหลดรูปภาพดังกล่าวในรูปแบบ JPEG หรือ PNG อย่างแน่นอน งานแรกของคุณคือการแปลงรูปภาพเป็นรูปแบบนั้น เรามีทางเลือกอะไรบ้าง?

เครื่องมือออกแบบรูปภาพ

เครื่องมือออกแบบรูปภาพบางอย่าง เช่น Sketch, Adobe Photoshop หรือ Cloudinary รวมถึงตัวเลือกในการบันทึกรูปภาพในรูปแบบ WebP ง่ายพอๆ กับการเปิดรูปภาพที่คุณต้องการแปลง แล้วบันทึกในรูปแบบใหม่

แต่ถ้าไม่ใช่กรณีของคุณ ไม่ต้องกังวลเพราะคุณมีทางเลือกฟรี ตามที่เราจะเห็นด้านล่าง

เครื่องมืออย่างเป็นทางการของ Google

อีกทางเลือกหนึ่งคือดาวน์โหลด cwebp ซึ่งเป็นเครื่องมือสำหรับ Linux, Widows หรือ Mac เพื่อแปลงรูปภาพ PNG หรือ JPG เป็น WebP เมื่อดาวน์โหลดและติดตั้งแล้ว คุณสามารถดำเนินการตามคำแนะนำเพื่อแปลงรูปภาพในคอมพิวเตอร์ของคุณได้โดยตรง ตัวอย่างเช่น คุณสามารถแปลงไฟล์ภาพ PNG เป็นภาพ WebP ด้วยช่วงคุณภาพ 80 ด้วยคำสั่ง:

cwebp -q 80 image.png -o image.webp

หากคุณต้องการแปลงรูปภาพจำนวนมากพร้อมๆ กัน บทความนี้จะอธิบายคำแนะนำในสภาพแวดล้อมแบบ Unix (เช่น macOS หรือ Ubuntu) เพื่อให้คุณสามารถแปลงชุดรูปภาพขนาดใหญ่ได้

และในบทความเดียวกันนี้ พวกเขายังบอกคุณเกี่ยวกับทางเลือกของการเขียนโปรแกรมการแปลงด้วย Node.js โดยใช้เครื่องมือ imagin-webp

ผู้แปลงออนไลน์

อีกทางเลือกหนึ่งหากคุณไม่ต้องการเขียนโค้ดแม้แต่บรรทัดเดียวคือการใช้ตัวแปลงรูปภาพออนไลน์ Googling แสดงรายการตัวแปลงจำนวนมากอย่างง่ายดาย ซึ่งรวมถึงรายการต่อไปนี้:

• Ezgif Webp
• Cloudconvert
• Convertio
• ออนไลน์แปลง
• แปลงฟรี

ทั้งหมดนี้ คุณเพียงแค่อัปโหลดรูปภาพ ทำการแปลง และดาวน์โหลดไฟล์ที่แปลงแล้วเท่านั้น

ปลั๊กอิน WordPress

สุดท้าย ตามที่ฉันจะอธิบายด้านล่าง คุณจะเห็นว่ามีปลั๊กอินที่แปลงรูปภาพเป็นรูปแบบ WebP เมื่อคุณอัปโหลดไปยังไซต์ WordPress ของคุณ

วิธีอัปโหลดรูปภาพ WebP ไปยัง Media Library

เมื่อเราได้รูปภาพในรูปแบบนี้แล้ว คุณจะสามารถอัปโหลดไปยังไลบรารีสื่อ WordPress ได้ตามปกติ แต่...

อ๊ะ มันไม่ทำงาน! อย่างน้อยก็ไม่ได้สำหรับฉัน และคุณอาจประสบปัญหาเดียวกัน ทั้งนี้ขึ้นอยู่กับผู้ให้บริการโฮสต์ที่คุณกำลังใช้อยู่

WordPress มีข้อจำกัดในตัวสำหรับประเภทไฟล์ MIME ที่คุณสามารถอัปโหลดไปยังไซต์ของคุณได้ด้วยเหตุผลด้านความปลอดภัย MIME ย่อมาจาก Multipurpose Internet Mail Extensions เบราว์เซอร์และอุปกรณ์อินเทอร์เน็ตอื่นๆ ใช้ประเภท MIME เพื่อกำหนดประเภทของเนื้อหาที่เกี่ยวข้องกับหน้า ตัวอย่างเช่น หากคุณมีไฟล์ .png และไฟล์ .jpeg ในหน้า เบราว์เซอร์จะทราบจากประเภท MIME (ไม่ใช่นามสกุลไฟล์) ว่าควรปฏิบัติต่อไฟล์ทั้งสองเป็นรูปภาพ แทนที่จะเป็นวิดีโอหรือไฟล์ประเภทอื่นๆ

ตามค่าเริ่มต้น WordPress จะจัดเก็บรายการประเภท MIME ที่ลงทะเบียนไว้ใน wp-includes/functions.php อย่างไรก็ตาม ไม่สามารถอัปโหลด MIME ประเภทที่รู้จักได้ทั้งหมด

และหากคุณพยายามอัปโหลดไฟล์ที่มีนามสกุลนอกรายการที่กำหนดไว้ล่วงหน้านี้ เช่นเดียวกับ WebP คุณจะเห็นข้อความแสดงข้อผิดพลาดด้านบน

ในเอกสารประกอบของบริษัทโฮสติ้งของคุณ คุณจะพบทางเลือกมากมายในการปรับเปลี่ยนวิธีอนุญาตให้คุณอัปโหลดประเภท MIME ใหม่นี้ โดยทั่วไปจะใช้ปลั๊กอินที่คุณสามารถเพิ่มประเภทไฟล์พิเศษหรือแก้ไขไฟล์โดยตรง หรือใช้ปลั๊กอินของคุณเองด้วยรหัสต่อไปนี้:

 function nelio_custom_upload_mimes( $existing_mimes ) { $existing_mimes['webm'] = 'image/webm'; return $existing_mimes; } add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

หรือแก้ไข wp-config.php โดยเพิ่มบรรทัดโค้ดต่อไปนี้:

 define( 'ALLOW_UNFILTERED_UPLOADS', true );

เมื่อคุณทำการแก้ไขที่จำเป็นแล้ว คุณควรจะสามารถอัปโหลดภาพของคุณได้ ความพยายามครั้งต่อไป…

ดูเหมือนว่ามันจะเป็นไปไม่ได้เช่นกัน…

ในกรณีนี้ ตามที่กล่าวไว้ในฟอรัม WordPress สำหรับบางวิธีแก้ไขคือ ตรวจสอบให้แน่ใจว่าได้ติดตั้งไลบรารี imagick แล้วและรีบูตเซิร์ฟเวอร์ สำหรับคนอื่น ๆ (เช่นในกรณีของฉัน) วิธีเดียวในการโหลดรูปภาพคือการใช้ลิงก์ ตัวอัปโหลดเบราว์เซอร์ ที่คุณพบที่ด้านล่างของแผงโหลดรูปภาพ

และ voila ฉันได้อัปโหลดรูปภาพ WebP แล้ว!

ปลั๊กอิน WordPress เพื่อแปลงรูปภาพเป็น WebP

ฉันได้บอกคุณเกี่ยวกับพื้นที่และประหยัดโหลดของการมีรูปภาพในรูปแบบ WebP นี้แล้ว และปัญหาก็เกิดขึ้นเมื่อเราคิดว่าจะแปลงรูปภาพทั้งหมดที่เราอัปโหลดไว้บนเซิร์ฟเวอร์ของเราอย่างไร ข่าวดีสำหรับ WordPress ส่วนใหญ่ก็คือ เรามีปลั๊กอินหลายตัวที่สามารถทำงานได้

และไม่เพียงแค่นี้ ก่อนอัปโหลดรูปภาพใดๆ ไปยังไลบรารีของคุณ บางส่วนสามารถบังคับให้แปลงรูปภาพเป็น WebP โดยที่คุณไม่ต้องกังวลกับมัน บางคนที่รู้จักกันดีที่สุดคือ:

• เครื่องมือเพิ่มประสิทธิภาพรูปภาพ EWWW
• WebP Express
• ShortPixel
• จินตนาการ
• Optimole
• WebPCConverter สำหรับสื่อ

สุดท้ายนี้ ฉันอยากจะทราบว่าบริษัทโฮสติ้ง WordPress หลัก ๆ ตระหนักดีถึงความสำคัญของการปรับรูปภาพให้เหมาะสมบนเว็บไซต์ของคุณ ด้วยเหตุผลนี้ ผู้ให้บริการบางรายจึงเสนอปลั๊กอินของตนเองในเซิร์ฟเวอร์ซึ่งมีหน้าที่สร้างรูปภาพที่คุณอัปโหลดไปยังไลบรารีไปยัง WebP โดยอัตโนมัติ เพื่อให้บริการกับเบราว์เซอร์ที่สนับสนุนรูปภาพเหล่านั้นเสมอ กรณีนี้ เช่น ปลั๊กอิน SG Optimizer ของ Siteground

บทสรุป

WebP นั้นรวดเร็ว มีประสิทธิภาพ และได้รับโมเมนตัมอย่างมาก เรามีความใกล้ชิดมากกว่าที่เราคิดอย่างแน่นอนกับการยอมรับอย่างกว้างขวางใน WordPress และเบราว์เซอร์ เรามีความยินดีที่ WordPress ไม่ถูกทิ้งไว้เบื้องหลัง และเราทุกคนสามารถเพิ่มประสิทธิภาพ SEO ของเว็บไซต์ของเราได้โดยรองรับรูปแบบภาพ WebP

ภาพเด่นของท่าจอดเรือบน Unsplash