วิธีแสดงรูปภาพ WebP แทน JPG หรือ PNG ด้วย WordPress
เผยแพร่แล้ว: 2019-11-20Google อยู่ในอันดับต้น ๆ ของห่วงโซ่อาหารทางอินเทอร์เน็ต บริษัทมีอิทธิพล (หรือสั่งการ) หลายอย่างที่เกิดขึ้นทางออนไลน์ และรูปแบบภาพใหม่ของพวกเขาคือ WebP ยังคงเทรนด์นั้นต่อไป เนื่องจากความเร็วในการโหลดหน้าเว็บมีความสำคัญมากขึ้น (โดยหลักแล้วเนื่องจากอันดับของ Google Page) นักพัฒนาและนักออกแบบจึงมองว่าการบีบอัดภาพเป็นวิธีที่ง่ายที่สุดในการลดเวลาในการโหลด รูปภาพ WebP ของ Google มีขนาดเล็กกว่าภาพ JPG หรือ PNG ทั่วไปประมาณ 30% และคงคุณภาพที่เทียบเท่าไว้ และเหนือสิ่งอื่นใด คุณไม่ต้องกังวลกับการแปลงรูปภาพของคุณเป็น WebP ด้วยตนเอง
ในบทความนี้เราจะแสดงวิธีใช้รูปแบบรูปภาพใหม่นี้กับ WordPress แม้ว่าจะยังไม่รองรับโดยค่าเริ่มต้นก็ตาม
ไปกันเถอะ
สมัครสมาชิกช่อง Youtube ของเรา
การใช้ Optimole เพื่อให้บริการ WebP บน WordPress
WebP ในรูปแบบรูปภาพไม่ได้รับการสนับสนุนโดยค่าเริ่มต้นใน WordPress คุณสามารถอัปโหลดรูปภาพ .webp ได้ แต่เหมือนกับไฟล์ SVG คุณจะพบว่าตัวเองได้รับข้อความแสดงข้อผิดพลาด และอีกครั้ง เช่นเดียวกับการใช้ไฟล์ SVG กับ WordPress มีวิธีแก้ปัญหาง่ายๆ ผ่านปลั๊กอินเพื่อให้ไซต์ WP ของคุณซูมได้

จากบริการ WebP ที่เราได้ลอง บริการที่เราชอบที่สุดคือ Optimole เราโชคดีที่สุดที่ทำให้มันใช้งานได้โดยแทบไม่ต้องปรับแต่งอะไรมาก ดังนั้นเราจึงอยากแนะนำคุณเกี่ยวกับวิธีตั้งค่าและทำให้การติดตั้ง WordPress WebP ของคุณเข้ากันได้อย่างไม่ลำบากใจที่สุด
ขั้นแรก คุณจะต้องดาวน์โหลดและติดตั้งปลั๊กอินเอง อยู่ใน WP.org repo และฟรีทั้งหมด เช่นเดียวกับบริการที่ใช้ API ที่ขับเคลื่อน (จนถึงจุดหนึ่ง) แม้ว่าจะสามารถแปลงรูปภาพแบบดั้งเดิมเป็น WebP ได้ทันทีโดยใช้ PHP แต่ไม่ใช่ทุกโฮสต์เว็บที่ให้สิทธิ์แก่เซิร์ฟเวอร์ของคุณ หากคุณมีสิทธิ์ดังกล่าว คุณสามารถดูปลั๊กอิน WebP Express ได้ คุณสามารถควบคุมได้มาก แต่เป็นสิ่งที่ต้องมีการปรับแต่งเพิ่มเติมเพื่อให้ทำงานได้อย่างราบรื่น
เมื่อคุณติดตั้งและเปิดใช้งาน Optimole บนเว็บไซต์ WordPress แล้ว คุณจะพบตัวเลือกเมนูใหม่ที่ Media – Optimole
คีย์ Optimole API ของคุณ

ก่อนที่คุณจะสามารถเข้าถึงการตั้งค่าหรือการกำหนดค่าใดๆ คุณต้องมีบัญชี Optimole หากคุณได้ตั้งค่าไว้แล้ว คุณสามารถคลิกปุ่ม ฉันมีคีย์ API อยู่แล้ว ถ้าไม่ใช่ ให้ ลงทะเบียนและอีเมลคีย์ API บัญชีพื้นฐานสำหรับคีย์ API นั้นฟรี และคุณจะได้รับการเข้าชมประมาณ 5,000 ครั้งในระดับนั้น หากคุณต้องการมากกว่านั้น มีระดับราคาให้เลือก

Optimole กำหนดการเข้าชมเป็น " ใครก็ตามที่เข้าชมไซต์ของคุณหนึ่งครั้ง [. . .] ผู้ใช้แต่ละคนจะถูกนับเพียงครั้งเดียว ไม่สำคัญว่าพวกเขาจะทำอะไรในไซต์ของคุณ มีรูปภาพที่ดาวน์โหลดมากี่ภาพ หรือเข้าชมกี่หน้า เป็นเพียงผู้ใช้คนหนึ่ง หากพวกเขาออกจากไซต์ของคุณและกลับมาในวันเดียวกัน พวกเขาจะยังคงเป็นผู้ใช้เพียงรายเดียว ”
เมื่อคุณหมดการเข้าชมที่วัดได้ เฉพาะอิมเมจ WebP จะหยุดให้บริการ ภาพของคุณเองไม่ได้ คุณจะพบคีย์ API ในแดชบอร์ด Optimole ของคุณที่ด้านบนสุด

เพียงวางกลับบนแดชบอร์ด WordPress ของคุณ คุณก็พร้อมที่จะเริ่มให้บริการรูปภาพ WebP ด้วย WordPress


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

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

ปัญหาหลักที่เราพบคือกับปลั๊กอินบีบอัดรูปภาพและการนำส่งอื่นๆ ดังที่คุณเห็นในภาพด้านบน ปลั๊กอิน Jetpack ทำงานในลักษณะเดียวกันกับ Optimole ผ่าน Photon APIT เพื่อให้สามารถกระแทกหัวได้ สำหรับเรา สิ่งนี้แสดงให้เห็นว่าไม่มีการส่งภาพไปยังผู้เยี่ยมชมเลย เราไม่มีปัญหากับบริการบีบอัดอื่นๆ เช่น TinyPNG หรือ Smush
การใช้แดชบอร์ด
หากคุณต้องการข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับการทำงานของไซต์ของคุณกับ WebP แดชบอร์ด Optimole ภายนอกจะมีข้อมูลดังกล่าวสำหรับคุณ

แทนที่จะเล็กลงเพียง 9.5 เท่า คุณสามารถดูขนาดไฟล์จริงที่แสดงผลได้ เช่นเดียวกับไฟล์ใดในระยะเวลา 30 วัน

คุณยังสามารถตั้งค่าลายน้ำในแดชบอร์ด Optimole (หรือ WP) เพื่อที่ว่าเมื่อมีคนได้รับ WebP จากไซต์ WordPress ของคุณ พวกเขาจะมีโลโก้ของคุณปรากฏโดยอัตโนมัติ เป็นกระบวนการที่เรียบง่าย และคุณสามารถควบคุมความทึบ ตำแหน่ง และอื่นๆ ได้

โดยพื้นฐานแล้วคุณสามารถทำสิ่งเดียวกันได้จากทั้งสองแดชบอร์ด ภายใต้แท็บ การตั้งค่า ใน WordPress หรือโดยไปที่เส้นประภายนอกที่ Optimole ขึ้นอยู่กับสิ่งที่คุณสบายใจที่สุด รวมทั้งระดับข้อมูลที่คุณต้องการในเวลาใดก็ตาม
นอกจากนี้ คุณจะสามารถควบคุมระดับของการบีบอัด การโหลดแบบ Lazy Loading และเมื่อ/หากรูปภาพบางรูปได้รับหน้าที่เป็น WebP ตามชื่อไฟล์ คุณจะพบข้อมูลทั้งหมดนี้ในแท็บ การตั้งค่า ของ Media – Optimole

ห่อ
ส่วนที่ดีที่สุดเกี่ยวกับการใช้ WebP กับเว็บไซต์ WordPress คือ คุณไม่จำเป็นต้องทำงานกับไฟล์ด้วยตนเอง ไม่มีการอัปโหลดเพิ่มเติม ไม่มีเวลาบีบอัดเพิ่มเติม ไม่มีอะไรเลย เนื่องจากวิธีการทำงานของ API การคำนวณและกระบวนการทั้งหมดจึงทำงานได้ทันทีในแบบเรียลไทม์ Google ทำให้อินเทอร์เน็ตทำงานเร็วขึ้นจริงๆ โดยใช้ WebP แทน JPG หรือ PNG ประโยชน์ที่ใหญ่ที่สุดคือรูปภาพยังคงคุณภาพเหมือนเดิมแม้ขนาดจะลดลงอย่างมาก อาจเป็นการให้บริการตนเองจาก Google เพื่อให้คุณได้ใช้รูปแบบของพวกเขาเพื่อเพิ่มความเร็วไซต์ของคุณ เพื่อให้พวกเขาสามารถจัดอันดับคุณให้สูงขึ้น ประสบการณ์ของผู้ใช้ปลายทางก็ดีขึ้นเช่นกัน และนั่นคือสิ่งที่สำคัญในท้ายที่สุด
คุณรู้สึกอย่างไรเกี่ยวกับการให้บริการภาพ WebP แก่ผู้เยี่ยมชมเว็บไซต์ของคุณ?
ภาพเด่นของบทความโดย vladwel / shutterstock.com
