อย่างไรก็ตาม การส่งภาพผ่าน WebP นั้นไม่ใช่เรื่องง่าย ขึ้นอยู่กับเว็บเซิร์ฟเวอร์ของเซิร์ฟเวอร์ของคุณ cdn ที่เลือก ธีม ปลั๊กอินแคช ฯลฯ
คู่มือนี้จะช่วยให้คุณส่งภาพ WebP ไปยัง WordPress ได้สามวิธี
WebP คืออะไร?
รูปแบบรูปภาพใหม่สำหรับเว็บ
โดย Google
WebP คือรูปแบบรูปภาพ (เช่น png และ jpg) ที่พัฒนาโดย Google รูปภาพ WebP (.webp) มักจะเล็กกว่ามาก ซึ่งทำให้เว็บไซต์เร็วขึ้นและใช้แบนด์วิดท์น้อยลง
คุณสามารถลดขนาดจาก 25% เป็น 70% ทั้งนี้ขึ้นอยู่กับรูปภาพ
JPEG, PNG, GIF ฯลฯ มีข้อดีและข้อเสีย ตารางด้านล่างนี้จะให้แนวคิดแก่คุณ:
| JPG | GIF | PNG | SVG | |
| เวกเตอร์ | ❌ | ❌ | ❌ | ✅ |
| แรสเตอร์ | ✅ | ✅ | ✅ | ❌ |
| ความโปร่งใส | ❌ | ✅ | ✅ | ✅ |
| แอนิเมชั่น | ❌ | ✅ | ✅ | ✅ |
| สูญหาย | ✅ | ❌ | ❌ | ❌ |
WebP มีคุณสมบัติเกือบทั้งหมดที่กล่าวถึงข้างต้น! แล้วทำไมเราไม่สามารถใช้ WebP ได้ทุกที่?
ทำไมไม่ใช้ WebP ทุกที่?
อย่างที่คุณเห็น อุปกรณ์เพียง 80% รองรับเฉพาะ WebP ไม่เพียงแค่เบราว์เซอร์รุ่นเก่าเท่านั้น Safari/iOS Safari ยังไม่รองรับ WebP
เหตุใดจึงยากที่จะให้บริการ WebP
ตามที่คุณสังเกตเห็น เราส่งภาพตามเบราว์เซอร์ หากเบราว์เซอร์ไม่รองรับ WebP เราต้องจัดเตรียมรูปภาพต้นฉบับ (jpg/png/gif) ให้กับพวกเขา
มีสองวิธีหลักในการให้บริการ WebP:
การใช้แท็กรูปภาพ
เราสามารถใช้รูปภาพเพื่อบอกเบราเซอร์ว่าเรามีรูปแบบ WebP หากเบราว์เซอร์รองรับ รูปภาพปกติ/สำรองจะถูกโหลด
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>โดยคำตอบที่แตกต่างกัน
ในคำตอบอื่น ตามปกติ คุณมีไฟล์เดียว อย่างแน่นอน:
<img src="img.jpg" />URL รูปภาพเดียวรองรับการส่งไฟล์ jpg และ webp นี่คือสิ่งที่เซิร์ฟเวอร์ทำ
แม้ว่าจะเป็นนามสกุลไฟล์ .jpg หากเบราว์เซอร์รองรับ WebP การตอบสนองจะเป็น WebP เรียกอีกอย่างว่า "การตอบสนองที่หลากหลาย"
แท็กรูปภาพเทียบกับการตอบสนองที่หลากหลาย
แต่ละคนมีข้อดีและข้อเสีย นี่คือตารางเปรียบเทียบ:
| แท็กรูปภาพ | การตอบสนองที่หลากหลาย | |
|---|---|---|
| ทำงานร่วมกับภาพพื้นหลัง | ❌ | ✅ |
| เป็นมิตรกับ CDN | ✅ | ✅(แค่บางส่วน) |
| ต้องกำหนดค่าเซิร์ฟเวอร์ | ❌ | ✅ (งินซ์) |
| ใช้งานได้กับการโหลดแบบ Lazy Loading | ✅ | ✅ |
วิธีการแสดงภาพใน WebP ใน WordPress?
วิธีที่ #1 - ใช้ CDN กับการแปลง fly WebP เท่านั้น
นี่อาจเป็นวิธีแก้ปัญหาที่ง่ายที่สุด ปัจจุบันผู้ให้บริการ CDN บางรายรองรับการแปลงรูปภาพเป็น WebP แบบทันทีพร้อมกับการเพิ่มประสิทธิภาพรูปภาพ
นี่คือบางส่วน:
- BunnyCDN
- Cloudflare กับโปแลนด์ (แผน Pro)
- Cloudinary
- รูปภาพ ShortPixel Adaptive (ใช้ StackPath CDN)
- WP บีบอัด
คุณยังสามารถประหยัดพื้นที่ดิสก์ได้ด้วยวิธีนี้ เนื่องจากคุณไม่จำเป็นต้องจัดเก็บทั้งอิมเมจ WebP ปกติและที่แปลงแล้ว
BunnyCDN
BunnyCDN มาพร้อมกับ Bunny Optimizer ซึ่งสามารถบีบอัดภาพและแปลงเป็น WebP ได้ทันที
วิธีที่ #2 - การใช้การตอบสนองที่หลากหลาย + CDN
ตามที่อธิบายไว้ข้างต้น "การตอบสนองที่หลากหลาย" จะมี URL รูปภาพเดียวที่สามารถให้บริการทั้งรูปภาพ WebP และไม่ใช่ webp ขึ้นอยู่กับเบราว์เซอร์ที่ร้องขอ
เรายังต้องเลือก CDN ที่ถูกต้องซึ่งสนับสนุนส่วนหัวคำขอ WebP เป็นคีย์แคช มิฉะนั้น เมื่ออิมเมจ WebP ถูกแคชบนเซิร์ฟเวอร์ รูปภาพจะถูกส่งไปยังเบราว์เซอร์ที่ไม่รองรับ WebP
การปรับแต่งการตอบสนองที่หลากหลายใน WordPress
วิธีที่ง่ายที่สุดในการตั้งค่าการตอบสนองที่หลากหลายสำหรับ WebP ใน WordPress คือการใช้ปลั๊กอิน WebP Express เพียงติดตั้งปลั๊กอินแล้วคลิก "บันทึกการตั้งค่าและบังคับใช้กฎ .htaccess ใหม่"
WebP Express จะกำหนดค่าตัวแปลง WebP และเขียนทับกฎเพื่อที่ว่าเมื่อได้รับคำขอ ก็จะแปลงรูปภาพเป็น WebP ได้ทันที และหากเบราว์เซอร์ไม่รองรับ WebP ระบบจะส่งรูปภาพเริ่มต้น
หากคุณอยู่ใน Nginx
WebP Express เพิ่มกฎการเขียนซ้ำ '.htaccess' ที่จำเป็น แต่ใช้ได้เฉพาะกับเซิร์ฟเวอร์ Apache, LiteSpeed หรือ OpenLiteSpeed เท่านั้น หากคุณกำลังใช้ Nginx คุณต้องแก้ไขnginx.configและเพิ่มรหัสต่อไปนี้:
# กฎ WebP Express# -------------------- ตำแหน่ง ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary ยอมรับ;หมดอายุ 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# กำหนดเส้นทางคำขอสำหรับ webps ที่ไม่มีอยู่ไปยังตำแหน่งตัวแปลง ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (กฎ WebP Express สิ้นสุดที่นี่)โค้ดด้านบนเพิ่มส่วนหัวการตอบสนองที่จำเป็น (การจัดการแคชยังแตกต่างกันไป) และพยายามส่ง WebP หากมี มิฉะนั้นจะเปลี่ยนเส้นทางไปยังตัวแปลง (ตามการรองรับเบราว์เซอร์)
ผู้ให้บริการ CDN รองรับการตอบสนองที่หลากหลาย
หากผู้ให้บริการ CDN ของคุณไม่รองรับ WebP เป็นคีย์แคช ไฟล์ WebP จะถูกส่งไปยังเบราว์เซอร์ที่ไม่รองรับ WebP ในทำนองเดียวกัน มีโอกาสที่ภาพที่ไม่ใช่ webp จะถูกส่งไปยังเบราว์เซอร์ที่รองรับ
BunnyCDN , KeyCDN , Google CDN และผู้ให้บริการ CDN อื่น ๆ อีกจำนวนมากสนับสนุน WebP เป็นคีย์แคช ตรวจสอบให้แน่ใจว่าคุณเปิดใช้งานในการตั้งค่า
วีBunnyCDN :
วีKeyCDN :
คุณใช้แผนบริการฟรีของ Cloudflare หรือไม่
ขออภัย แผนบริการฟรีของ Cloudflare ไม่รองรับ WebP เป็นคีย์แคช ใช้ CDN เช่น BunnCDN หรืออัปเกรดเป็นแผนระดับมืออาชีพ
ตั้งค่าการตอบสนองที่หลากหลาย + CDN กับผู้ให้บริการโฮสต์ยอดนิยม
ตรวจสอบให้แน่ใจว่าติดตั้ง WebP Express แล้ว
- Kinsta หรือ WP Engine - ติดต่อทีมสนับสนุนเพื่อเพิ่มการกำหนดค่า Nginx ด้านบนและรวมคีย์การแคช WebP ใน CDN (KeyCDN)
- Cloudways - เพียงติดตั้ง WebP Express และบันทึกการตั้งค่าโดยใช้ .htacess เนื่องจาก Cloudways ใช้วิธีไฮบริดของ Apache + Nginx จึงทำงานนอกกรอบได้
- SiteGound - ติดต่อฝ่ายสนับสนุนเพื่อเพิ่มการกำหนดค่า Nginx ใช้ CDN ที่รองรับดังข้างต้น
- เซิร์ฟเวอร์ LiteSpeed / OpenLiteSpeed / Apache - เพียงติดตั้ง WebP Express และบันทึกการตั้งค่าด้วย '.htacess' ใช้ CDN ที่รองรับดังข้างต้น
- VPS แบบกำหนดเองพร้อม Nginx (LEMP Stack) - ตั้งค่า
nginx.confและใช้ CDN ที่รองรับดังข้างต้น
วิธี #3 - การใช้แท็กรูปภาพ
หากทั้งสองวิธีข้างต้นใช้ไม่ได้ผล คุณสามารถใช้แท็กรูปภาพได้ ไม่ต้องการการกำหนดค่าเซิร์ฟเวอร์ (แก้ไข nginx.conf) และรองรับผู้ให้บริการ CDN ทั้งหมด
การใช้วิธีนี้จะเปลี่ยน HTML สำหรับการส่ง WebP ใช้ไม่ได้กับรูปภาพพื้นหลัง เข้ากันไม่ได้กับบางธีม ปลั๊กอินแคช ปลั๊กอินโหลดแบบ Lazy Loading เป็นต้น
หากคุณใช้วิธีนี้ แท็ก img ทั้งหมดจะถูกแปลงดังนี้:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>หากเบราว์เซอร์รองรับ WebP ไฟล์ที่เกี่ยวข้องจะถูกส่ง มิฉะนั้น จะส่งรูปภาพปกติ
การปรับแต่งแท็กรูปภาพสำหรับ WebP ใน WordPress
วิธีที่ง่ายที่สุดในการตั้งค่าแท็กรูปภาพคือผ่าน WebP Express
ตั้งค่าโหมดการทำงานเป็น "เป็นมิตรกับ CDN" และเปิดใช้งาน "แก้ไข HTML"
บทสรุป
ฉันหวังว่าวันนั้นจะมาถึงเมื่อเบราว์เซอร์ทั้งหมดรองรับ WebP!
หากคุณสามารถใช้จ่ายเงินได้ไม่กี่ดอลลาร์ต่อเดือน วิธีที่ง่ายและมีประสิทธิภาพที่สุดคือการใช้ CDN เช่น BunnyCDN ซึ่งจะแปลงรูปภาพเป็น WebP ได้ทันที มิฉะนั้น ให้ทำตามวิธีที่ # 2 ที่ฉันได้กล่าวไว้ข้างต้น
