รูปภาพ WebP และ WordPress: ทำไมและใช้งานอย่างไร
เผยแพร่แล้ว: 2021-11-25หากคุณต้องการเพิ่มความเร็วให้กับเว็บไซต์ WordPress ของคุณ ควรใช้รูปแบบรูปภาพ WebP ปัญหาหลักที่ทำให้เนื้อหาในเว็บไซต์ของคุณโหลดช้านั้นเกิดจากรูปภาพขนาดใหญ่บนเว็บไซต์ของคุณ
อย่างไรก็ตาม โปรแกรมบีบอัดรูปภาพสามารถบังคับให้ผู้ใช้ของคุณโหลดเมกะไบต์ของไฟล์รูปภาพ และทำให้การรวบรวมข้อมูลการเชื่อมต่อล่าช้า นอกจากนี้ รูปภาพของเว็บไซต์ของคุณอาจพร่ามัวเนื่องจากคอมเพรสเซอร์
แต่มีแม้กระทั่งรูปแบบไฟล์บางรูปแบบที่บีบอัดรูปภาพให้ไม่มีอะไร แต่จะส่งผลต่อคุณภาพของภาพของคุณ หากคุณไม่ชอบการบีบอัดไฟล์ JPEG แบบ lossy และทำให้ภาพของคุณดูแทบไม่มี คุณต้องเลือกใช้ WebP
คุณหมายถึงอะไรโดย ภาพ WebP & WordPress และเมื่อใดจึงจะใช้งาน และคุณจะเพิ่ม WebP ลงในเว็บไซต์ของคุณซึ่งใช้ WordPress ได้อย่างไร
คุณจะพบคำตอบสำหรับคำถามเหล่านี้ในบล็อกนี้ นอกจากนี้ คุณจะพบวิธีแก้ปัญหาในการลดขนาดรูปภาพโดยไม่กระทบต่อเวลาในการโหลดหน้าเว็บ และทำให้มั่นใจได้ว่าจะโหลดเร็วขึ้น
WebP: หมายความว่าอย่างไร
รูปแบบรูปภาพยอดนิยมที่เราใช้กันอย่างแพร่หลายตั้งแต่เริ่มต้น www. และใช่ รูปแบบภาพยอดนิยม เช่น JPEG, PNG และ GIF จะทำงานอย่างดีที่สุด คุณต้องการรูปแบบรูปภาพเพิ่มเติมเพื่ออะไรและทำไม
ปัญหาหลักของการค้นหาวิธีรูปแบบอื่น ๆ ของรูปแบบภาพคือรูปแบบเหล่านี้ไม่สามารถบีบอัดภาพได้ดีที่สุด
การใช้อินเทอร์เน็ตเพิ่มขึ้นทุกวัน ดังนั้นผู้คนจำนวนมากขึ้นจึงต้องการค้นหาข้อมูลใดๆ ผ่านอุปกรณ์พกพาซึ่งเป็นเทคโนโลยีชิ้นเล็กๆ เช่น แพ็คเกจพลังงานที่น้อยกว่าเมื่อเปรียบเทียบกับคอมพิวเตอร์เดสก์ท็อป
มีการเชื่อมต่อมือถือทั่วโลก จึงสามารถทำงานช้ากว่าอินเทอร์เน็ตแบบมีสายแบบเดิม
ในปี 2010 ภาพ WebP และ WordPress ได้รับการประกาศซึ่งมาพร้อมกับตัวเลือกอื่นสำหรับปัญหาระยะยาว มันให้การบีบอัดที่ยอดเยี่ยมและภาพที่มีคุณภาพมากกว่าที่คุณอาจได้รับโดยใช้รูปแบบภาพก่อนหน้า
มีเป้าหมายที่คล้ายคลึงกันกับ WebM WebM หมายถึงการบีบอัดเสียงและวิดีโอในขณะที่ปรับให้เหมาะสมสำหรับเว็บ
WebP ใช้การบีบอัดทั้งแบบไม่สูญเสียข้อมูลและการสูญเสียข้อมูล นอกจากนี้ ยังสนับสนุนข้อมูลเมตา โปรไฟล์สี ความโปร่งใส ภาพเคลื่อนไหว และอื่นๆ ดังนั้นจึงเข้ากันได้กับเบราว์เซอร์หลักทั้งหมด
แต่ใช้งานไม่ได้กับ internet explorer, KaiOS และเวอร์ชั่นซาฟารีอื่นๆ แต่ก็ยังมีผู้ใช้จำนวนมากที่ใช้เบราว์เซอร์เหล่านี้ รวมทั้ง Safari เวอร์ชันเก่าด้วย
เหตุใดจึงถือว่า WebP เป็นสิ่งจำเป็น
ในรูปภาพของ WebP และ WordPress Google ได้ทำการวิจัยมากมาย อย่างไรก็ตาม ทุกครั้งที่พบว่าอัลกอริธึมสามารถบีบอัดให้เล็กลง 25-34% ด้วยรูปภาพที่สูญเสีย และ 26% เล็กลงด้วยรูปภาพที่ไม่มีการสูญเสีย
นี่หมายความว่า WebP บีบอัดได้ดีกว่าเพราะอาศัยความสม่ำเสมอ นอกจากนี้ คุณจะไม่มีวันสูญเสียคุณภาพของภาพแม้แต่เมื่อเปรียบเทียบกับอัลกอริธึมที่ไม่สูญเสียข้อมูล เช่น PNG
นี่เป็นข้อดีของการใช้ WebP แต่ก็ยังมีผู้ใช้จำนวนมากที่ใช้เทคนิคแบบเก่าในการบีบอัดภาพ
อย่างไรก็ตาม มีเว็บไซต์เพียง 0.3% ที่ใช้คุณสมบัติ WebP แนวโน้มกำลังเพิ่มขึ้นด้วย WebP แต่ผู้คนยังคงยึดติดกับเทคโนโลยีที่ไม่ค่อยได้ใช้
เป็นเรื่องที่น่าแปลกใจมากเมื่อเราพูดถึงประโยชน์ของ WebP
ปัญหานี้อาจเป็นปัญหาได้เนื่องจาก WebP ไม่สามารถให้บริการสนับสนุนบางอย่างซึ่งรวมถึงความโปร่งใส ภาพเคลื่อนไหว ฯลฯ รวมทั้งความไม่เข้ากันกับเบราว์เซอร์ทั่วไปบางตัว
อีกทั้งงานในการเปลี่ยนจากรูปแบบภาพอื่นๆ เช่น PNG เป็น WebP นั้นไม่ใช่เรื่องง่าย คุณไม่สามารถอัปโหลดภาพไปยังเว็บไซต์ของคุณโดยเพียงแค่บันทึกภาพ WebP บนคอมพิวเตอร์ของคุณ รวมขั้นตอนเพิ่มเติมบางส่วนที่คุณต้องดูแล
แต่ควรใช้ความพยายามเป็นพิเศษหากคุณต้องการให้เนื้อหาเว็บไซต์ของคุณโหลดได้อย่างรวดเร็ว
WebP และรูปแบบไฟล์รูปภาพอื่น ๆ
มีรูปแบบไฟล์รูปภาพมากมาย ทั้งหมดมีคุณสมบัติที่ยอดเยี่ยมในการทำงานเฉพาะ รูปแบบไฟล์บางรูปแบบมีประโยชน์สำหรับการบีบอัดภาพได้ดี ในขณะที่บางรูปแบบรองรับภาพเคลื่อนไหว
คุณยังจะพบรูปแบบอื่นๆ ที่จะให้พื้นหลังโปร่งใส เราไม่ได้บอกว่า WebP เป็นตัวเลือกที่ดีที่สุดสำหรับทุกทางเลือก แต่ใช่ มันมีคุณสมบัติบางอย่างที่สามารถใช้ได้กับสถานการณ์ที่หลากหลาย
มาดูรูปแบบไฟล์รูปภาพทั่วไปที่ใช้กันทั่วโลกกัน
- PNG: PNG ถือเป็นรูปแบบไฟล์ที่พบบ่อยที่สุด รูปแบบไฟล์นี้เป็นที่นิยมมากกว่าสำหรับการบีบอัดแบบไม่สูญเสียข้อมูล และเป็นการดีที่สุดที่จะแสดงผลงานศิลปะและภาพถ่ายออนไลน์
- TIFF: รูปแบบไฟล์อื่นคือ TIFF ซึ่งไม่มีการบีบอัด ภาพนี้แสดงให้เห็นในทุกการสรรเสริญ นี่คือเหตุผลที่ไฟล์ส่วนใหญ่ที่บันทึกเป็น TIFF จะมีขนาดไฟล์ใหญ่ สำหรับเว็บ นี่ไม่ใช่ตัวเลือกที่ดีที่สุด
- GIF: อีกรูปแบบหนึ่งคือ GIF ซึ่งรองรับภาพเคลื่อนไหว อย่างไรก็ตาม คุณสามารถพูดได้ว่าเป็นรูปแบบไฟล์ที่เก่าที่สุดซึ่งยังรองรับมากกว่า 250 สีอีกด้วย ภาพที่บันทึกในรูปแบบ GIF จะดูมีคุณภาพต่ำและน่าเกลียด หากคุณกำลังมองหาแอนิเมชั่น คุณต้องเลือกรูปแบบ GIF
- ไฟล์ EPS และ SVG: ทั้งสองเป็นความสัมพันธ์ของตนเอง การดำเนินการนี้จะบันทึกและแสดงภาพเวกเตอร์ที่สามารถปรับขนาดได้และชัดเจน เนื่องจากไม่ได้สร้างจากพิกเซล
- WebP: คุณภาพของรูปภาพของ WebP เท่ากับ PNG หรือ JPG ที่มีขนาดไฟล์น้อยกว่า นอกจากนี้ยังรองรับภาพเคลื่อนไหวและความโปร่งใส
หากคุณรู้สึกสบายใจที่จะสูญเสียคุณภาพของภาพบางประเภทเพื่อแลกกับภาพที่เล็กกว่า WebP เป็นตัวเลือกที่เหมาะสำหรับคุณ
หากคุณไม่ได้ทำงานในโปรเจ็กต์ที่คุณภาพของภาพมีบทบาทสำคัญเช่นเว็บไซต์พอร์ตโฟลิโอ การแลกเปลี่ยนก็เป็นเรื่องที่ดี ถ้าไม่เช่นนั้น PNG ก็เป็นตัวเลือกที่ดี แทนที่จะเป็นเช่นนั้น มีเพียงไม่กี่คนที่ใช้ภาพ TIFF ไม่เช่นนั้น WebP จะเป็นตัวเลือกในอุดมคติสำหรับงานของคุณ

ไปยัง WordPress ของคุณ วิธีอัปโหลดภาพ WebP
คุณจะเจอสองวิธีที่จะช่วยให้คุณอัปโหลดภาพ WebP & WordPress
- วิธีแรกคือการอัพโหลดภาพ WebP บนเว็บไซต์ของคุณด้วยตนเอง
- วิธีที่ 2 อัปโหลดภาพ WebP บนเว็บไซต์พร้อมปลั๊กอิน
เราขอแนะนำให้คุณใช้ปลั๊กอินเพื่อรับอิมเมจ WebP บนเว็บไซต์ของคุณ เนื่องจากเป็นวิธีที่ง่ายที่สุด เนื่องจากคุณไม่จำเป็นต้องจัดการกับสิ่งที่เขียนโค้ด รวมทั้งต้องมีการตั้งค่าเพียงเล็กน้อยในขณะที่ทำงานกับปลั๊กอิน
แต่ถ้าคุณเลือกรับภาพ WebP ด้วยตนเอง คุณจะต้องรับภาพ WebP ก่อน ในฐานะที่เป็น WebP คุณไม่สามารถบันทึกรูปภาพหรือบนคอมพิวเตอร์ของคุณ คุณไม่สามารถเปลี่ยนส่วนขยายได้ คุณจะต้องใช้ตัวแปลงเฉพาะ
สำหรับสิ่งนี้ คุณสามารถใช้ปลั๊กอิน Photoshop ของ Google ที่รู้จักกันในชื่อ WebPShop ได้ หรือคุณสามารถใช้ตัวแปลง WebP ออนไลน์และอัปโหลดภาพบนคอมพิวเตอร์ของคุณ
คุณสามารถแสดงรูปภาพ WebP ในรูปแบบ HTML หรือ CSS เมื่อคุณมีรูปภาพ WebP ที่พร้อมสำหรับการอัปโหลด สำหรับเบราว์เซอร์ที่ไม่รองรับ คุณจะต้องตรวจสอบให้แน่ใจว่าคุณได้กำหนดรูปภาพสำรองแล้ว แต่สิ่งนี้ก็เหมือนกับการอ้างถึงรูปภาพอื่นใน HTML
ด้วยสิ่งนี้มันมีปัญหา:
คุณไม่สามารถอัปโหลดภาพ WebP ด้วยความช่วยเหลือของผู้อัปโหลดสื่อ เนื่องจาก WordPress ไม่อนุญาตให้คุณทำเช่นนี้ มันจะแสดงเฉพาะข้อผิดพลาดโดยพิจารณาว่าไฟล์ประเภทนี้ไม่รองรับโดยเบราว์เซอร์ของคุณ
บนเซิร์ฟเวอร์ของคุณ คุณสามารถอัปโหลดภาพ WebP ได้ด้วยตนเอง และสามารถกำหนดค่าเว็บไซต์ให้ถูกต้องเพื่อแสดงภาพเหล่านั้นได้ แต่ต้องใช้ความพยายามอย่างมาก
เพื่อลดความซับซ้อนของกระบวนการ คุณสามารถใช้ปลั๊กอิน WordPress บางตัวได้ ปลั๊กอินจะช่วยให้คุณทำการแปลงได้ง่ายขึ้นมาก อย่างไรก็ตาม คุณไม่จำเป็นต้องดำเนินการใดๆ เพื่อแก้ไขโค้ดเพื่อเพิ่มรูปภาพ
1. จินตนาการ

คุณสามารถพูดได้ว่า Imagify ไม่ได้เป็นเพียงการแปลง WebP แต่ยังเป็นปลั๊กอินที่ช่วยให้คุณปรับแต่งภาพและภาพขนาดย่อที่คุณอัปโหลดได้อย่างเหมาะสม
Imagify ได้รวมการกดสามระดับที่แตกต่างกัน เช่น อัลตร้า (การบีบอัดแบบสูญเสียสูงสุด) แบบปกติ (แบบไม่สูญเสีย) และแบบก้าวร้าว (แบบสูญเสีย)
เครื่องมือเพิ่มประสิทธิภาพแบบกลุ่มจะช่วยให้คุณบีบอัดรูปภาพทั้งหมดที่อัปโหลดแล้ว ดังนั้นเวอร์ชันสำรองจะถูกบันทึกไว้ ดังนั้นหากคุณไม่ต้องการบีบอัดรูปภาพ คุณสามารถยกเลิกได้
ทันทีที่คุณเพิ่มรูปภาพบนเว็บไซต์ของคุณด้วยความช่วยเหลือของ Imagify ภาพนั้นจะเพิ่ม WebP เวอร์ชันอื่น ด้วยวิธีนี้ คุณสามารถแสดงภาพ WebP ที่ปรับให้เหมาะสมบนเว็บไซต์ของคุณ
ด้วยความช่วยเหลือของ Imagify คุณสามารถบีบอัดรูปภาพขนาด 25MB ทุกเดือนโดยไม่เสียค่าใช้จ่าย
2. เครื่องมือเพิ่มประสิทธิภาพรูปภาพ EWWW

ปลั๊กอินเพิ่มประสิทธิภาพรูปภาพ WordPress ยอดนิยมอีกตัวหนึ่งคือ EWWW ปลั๊กอินนี้เพิ่มเป็นสองเท่าของตัวแปลง WebP คุณสามารถบีบอัดรูปภาพได้ไม่ จำกัด โดยไม่เสียค่าใช้จ่าย
ดังนั้นในขณะที่ทำงานกับปลั๊กอินนี้ คุณไม่จำเป็นต้องกังวลเกี่ยวกับการจำกัดข้อมูลรายเดือนของมัน นอกจากนี้ยังประกอบด้วยผู้อัปโหลดจำนวนมาก อย่างไรก็ตาม มันจะบีบอัดรูปภาพทั้งหมดไม่ว่าจะบันทึกไว้ในไลบรารีสื่อของคุณหรือไม่ก็ตาม
ด้วยปลั๊กอินนี้ WebP จะพร้อมใช้งาน กระบวนการทั้งหมดเป็นไปโดยอัตโนมัติ คุณยังจะได้รับการบีบอัด การโหลดแบบ Lazy Loading และขนาดหน้าโดยไม่ต้องเปลี่ยนภาพต้นฉบับ
3. เครื่องมือเพิ่มประสิทธิภาพภาพ ShortPixel

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