วิธีแปลงรูปภาพเป็น WebP บน WordPress ด้วย Imagify

เผยแพร่แล้ว: 2021-07-19

สนใจแปลงรูปภาพของคุณเป็น WebP บน WordPress หรือไม่? ทักทายกับ Imagify ปลั๊กอินฟรีของเราที่ปรับแต่งรูปภาพของคุณและแปลงเป็น WebP

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

ฟังดูมีแนวโน้ม? มาเจาะลึกรูปแบบ WebP ที่ทันสมัยนี้กัน เพื่อดูว่ามันส่งผลต่อประสิทธิภาพการทำงานอย่างไรโดยการย่อขนาดไฟล์ภาพได้ถึง 35%!

รูปแบบ WebP คืออะไร

WebP เป็นรูปแบบรูปภาพที่มีการบีบอัดรูปภาพโดยการลดขนาดไฟล์แต่ไม่ทำให้คุณภาพลดลง WebP พัฒนาโดย Google เป็นรูปแบบไฟล์รูปภาพสมัยใหม่ที่มีการบีบอัดแบบไม่สูญเสียข้อมูล รูปแบบนี้สามารถลดขนาดไฟล์ภาพได้มากถึง 35% ที่เล็กกว่าภาพ JPEG และ PNG ในขณะที่ยังคงคุณภาพสูง ดีที่สุดของทั้งสองโลกใช่ไหม

ผู้เข้าชมต้องการคุณภาพและเว็บไซต์ที่รวดเร็ว นั่นเป็นสาเหตุว่าทำไมจึงมีรูปแบบใหม่ๆ ออกมาในช่วงไม่กี่ปีที่ผ่านมา โดยได้รับการออกแบบโดยคำนึงถึงการลดขนาดไฟล์โดยที่ยังคงคุณภาพไว้ “WebP” เป็นการอัปเดตที่โดดเด่นที่สุดในรอบ 10 ปีที่ผ่านมาอย่างแน่นอน

ในตัวอย่างด้านล่าง – จัดทำโดยเว็บไซต์ Google WebP – เราเปรียบเทียบภาพสองภาพที่มีคุณภาพเท่ากัน หนึ่งคือ JPEG อีกอันหนึ่งคือ WebP และเราสังเกตเห็นสามสิ่งคือ:

  • คุณภาพของภาพยังคงเหมือนเดิมใน JPEG หรือ WEBP
  • ขนาดไฟล์ JPEG คือ 43.84 KB
  • ไฟล์ WebP มีขนาด 29.61 KB ซึ่งเบากว่ารูปแบบ JPEG มาก
JPEG vs WebP: คุณภาพเท่ากัน แต่ขนาดต่างกัน - ที่มา: WebP Gallery

รูปแบบ WebP ช่วยให้คุณมีความสมดุลดังต่อไปนี้: รูปภาพคุณภาพสูงและขนาดไฟล์ต่ำ

ทำไมคุณควรแปลงรูปภาพเป็น WebP

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

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

JPEG, PNG และ GIF เป็นรูปแบบที่สามารถแปลงเป็น WebP ได้อย่างง่ายดาย:

  • JPEG : รูปแบบที่พบบ่อยที่สุด เหมาะสำหรับภาพถ่ายและภาพที่มีสีสันสดใสมาก
  • PNG: รูปแบบที่แนะนำสำหรับกราฟิก ไอคอน และโลโก้อย่างง่าย
  • GIF: สำหรับภาพเคลื่อนไหวทั้งหมดที่คั่นข้อความของคุณ

Google ได้ทำการศึกษาการบีบอัดข้อมูลของ WebP เพื่อดูว่า webP เปรียบเทียบกับรูปแบบ JPEG และ PNG อย่างไรในแง่ของขนาดไฟล์ ผลลัพธ์มีความน่าสนใจ:

  • รูปภาพ WebP มีขนาดเล็กกว่ารูปภาพ PNG 25%
  • ภาพ WebP มีขนาดเล็กกว่าภาพ JPEG 25-35%

ผลลัพธ์เหล่านี้บ่งชี้ว่า WebP สามารถให้การปรับปรุงการบีบอัดที่เหนือกว่า JPEG และ PNG ได้อย่างมีนัยสำคัญ ในกราฟด้านล่าง เราพบว่ารูปภาพ WebP ต้องการบิตต่อพิกเซลน้อยกว่า JPEG อย่างสม่ำเสมอ:


นอกจากนี้ Google PageSpeed ​​Insights ยังแนะนำให้คุณให้ บริการรูปภาพในรูปแบบ Next-gen (WebP) ซึ่งหมายถึงการดาวน์โหลดที่เร็วขึ้นและใช้ข้อมูลน้อยลง เครื่องมือประสิทธิภาพเว็บยังแนะนำให้ ใช้ปลั๊กอิน WordPress เพื่อบีบอัดและแปลงรูปภาพของคุณให้อยู่ในรูปแบบที่เหมาะสมที่สุด

คิดว่าใครอยู่ในรายชื่อ? จินตนาการ!

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

Imagify เป็นหนึ่งในปลั๊กอิน WordPress ที่ดีที่สุดในการแปลงรูปภาพของคุณเป็น WebP และเพื่อเพิ่มประสิทธิภาพ

เราทุกคนรู้จักเครื่องมือออนไลน์ที่สามารถแปลงได้หลายรูปแบบ (เช่น จาก JPG เป็น PDF) เครื่องมือเหล่านั้นไม่เป็นมิตรกับผู้ใช้ และส่วนใหญ่จะไม่อนุญาตให้คุณทำการแปลงจำนวนมากได้ฟรี

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

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

Imagify ปรับแต่งและแปลงรูปภาพ WordPress เป็น WebP โดยอัตโนมัติ:

  • ขณะอัพโหลดภาพใหม่
  • ที่มีอยู่ของคุณ (คุณสมบัติจำนวนมากซึ่งจะช่วยคุณประหยัดเวลาอันมีค่า)

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

ทำตามคำแนะนำทีละขั้นตอนเพื่อดูวิธีแปลงรูปภาพเป็น WebP โดยใช้ Imagify:

ขั้นตอนที่ 1 – ดาวน์โหลด Imagify ฟรี

เปิดใช้งานปลั๊กอินและสร้างคีย์ API ฟรี

(ไปที่กล่องจดหมายอีเมลของคุณเพื่อรับคีย์ API และวางลงในช่องด้านล่าง)

ขั้นตอนที่ 2 – การตั้งค่าตัวเลือกการแปลง WebP

เมื่อคุณเพิ่มคีย์ Imagify API แล้ว ให้ไปที่ การตั้งค่า → Imagify และเลื่อนไปที่ส่วน "รูปแบบ Optimization Webp" ตรวจสอบให้แน่ใจว่าได้เลือกทั้งสองช่องดังต่อไปนี้:

การแปลงรูปแบบ Webp - Imagify แดชบอร์ด

กล่องแรกบอกให้ Imagify แปลงรูปภาพของคุณเป็น WebP; ส่วนที่สองระบุถึงปลั๊กอินเพื่อให้บริการภาพ WebP เหล่านั้นกับเบราว์เซอร์ที่รองรับ

ขั้นตอนที่ 3 – ถึงเวลาแปลงภาพของคุณ

ไปที่ Media -> Bulk Optimization แล้วกดปุ่มสีน้ำเงิน Imagify'em all :

แค่นั้นแหละ! คุณสามารถรับเว็บไซต์ที่เร็วขึ้นในสามขั้นตอนด้วย Imagify

ราคาของ Imagify (และใช่ มีแผนให้บริการฟรี!)

แผนเริ่มต้น: Imagify ให้คุณปรับแต่งและแปลงรูปภาพ 20 MB ต่อเดือนได้ฟรี (ประมาณ 200 ภาพ)

แผนการเติบโต: หากคุณต้องการมากกว่านั้น คุณสามารถอัปเกรดเป็นแผนแบบชำระเงินได้ ซึ่งมีค่าใช้จ่าย 4.99 ดอลลาร์/เดือน สำหรับ 500 MB (~5,000 ภาพ)

แผนไม่จำกัด: $9.99 ต่อเดือนสำหรับข้อมูลไม่จำกัด เป็นเรื่องที่ดีถ้าคุณมีเว็บไซต์ที่มีรูปภาพนับพันเพื่อเพิ่มประสิทธิภาพ

ราคาสามารถพบได้บนเว็บไซต์ทางการของ Imagify

ผลกระทบของ WebP ต่อประสิทธิภาพด้วย Imagify

ตอนนี้เรามาดูวิธีใช้ Imagify เพื่อลดขนาดไฟล์มีเดียกัน

สำหรับการวิเคราะห์ เราจะเรียกใช้สองสถานการณ์โดยใช้แดชบอร์ด WordPress ของเรา:

  1. ฉันจะอัปโหลด GIF, PNG, JPG และตรวจสอบขนาดไฟล์สำหรับแต่ละรายการ
  2. ฉันจะเปิดใช้งาน Imagify แปลงไฟล์ 3 ไฟล์ของฉันจากด้านบน เป็น WebP และตรวจสอบขนาดไฟล์ใหม่

มาทำการวิเคราะห์กัน

  • ผลกระทบของ Imagify ต่อขนาดไฟล์ GIF ของฉัน:
ขนาดไฟล์ GIF – ไม่มี Imagify รูปแบบ WebP – ด้วย Imagify
816 KB 512 KB
  • ผลกระทบของ Imagify ต่อขนาดไฟล์ PNG ของฉัน:
ขนาดไฟล์ PNG – No Imagify รูปแบบ WebP – ด้วย Imagify
67 KB 28 KB
  • ผลกระทบของ Imagify ต่อขนาดไฟล์ JPG ของฉัน:
ขนาดไฟล์ JPG – ไม่มี Imagify รูปแบบ WebP – ด้วย Imagify
755 KB 525 KB

Imagify ลดขนาดไฟล์ของฉันเมื่อแปลงเป็น WebP หรือไม่

คำตอบคือใช่! อย่างที่คุณเห็น ขนาดไฟล์ทั้งหมดลดลงอย่างมากหลังจากใช้ Imagify และรูปแบบ WebP นี่คือบทสรุป:

  • GIF → WebP : ขนาดเปลี่ยนจาก 816 KB เป็น 512 KB
  • PNG → WebP : ขนาดเปลี่ยนจาก 67 KB เป็น 28 KB
  • JPEG → WebP : ขนาดเปลี่ยนจาก 755 KB เป็น 525 KB

การใช้ Imagify เพื่อปรับปรุงเกรดประสิทธิภาพของฉันใน Google PageSpeed ​​Insights

สำหรับการตรวจสอบประสิทธิภาพนี้ ฉันได้สร้างหน้าเว็บที่แสดงสื่อต่างๆ ได้แก่ รูปภาพ JPG, องค์ประกอบ PNG และ GIF

เราจะใช้ Google PageSpeed ​​Insights และเรียกใช้สองสถานการณ์ต่อไปนี้:

  1. สถานการณ์ #1 – การตรวจสอบประสิทธิภาพของเพจของฉัน (รูปภาพรูปแบบ PNG และ JPG + GIF) – ไม่มี Imagify – ไม่มี WebP
  2. สถานการณ์ #2 – ระดับประสิทธิภาพของหน้าของฉันหลังจากแปลงสื่อทั้งหมดของฉันเป็น WebP ด้วย Imagify

สถานการณ์ #1 : No Imagify – No WebP

ฉันอยู่ในสีส้มบน Google PageSpeed ​​​​Insights (88/100) และ Core Web Vitals ของฉันบางส่วนไม่ได้เป็นสีเขียว:

การตรวจสอบโดยไม่มี Imagify - ที่มา: PSI

ในส่วนโอกาส เราจะเห็นปัญหาต่างๆ ที่เกี่ยวข้องกับรูปแบบของรูปภาพของฉัน เช่น "ใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว" หรือ "แสดงรูปภาพในรูปแบบยุคถัดไป"

ส่วนโอกาส - PSI

ถ้าฉันมี 50 หน้าพร้อม 200 ผลิตภัณฑ์ ฉันจะกังวลมากเกี่ยวกับการแปลงด้วยตนเอง… แต่โชคดีที่ Imagify สามารถทำสิ่งนั้นให้ฉันได้!

สถานการณ์ #2: รูปแบบ WebP ด้วย Imagify

ตอนนี้เรามาดูผลลัพธ์หลังจากแปลงสื่อทั้งหมดเป็น WebP โดยใช้ Imagify

เกรดประสิทธิภาพของฉันดีขึ้น : ฉันอยู่ในกรีนด้วยคะแนน 99/100!

คะแนนสีเขียวของฉันต้องขอบคุณ Imagify - ที่มา: PSI

ในส่วนโอกาส ปัญหาที่เกี่ยวข้องกับรูปภาพทั้งหมดของฉันหายไป:

ปัญหาที่เกี่ยวข้องกับรูปภาพได้รับการแก้ไขแล้วด้วย Imagify - ที่มา: PSI

ห่อ

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

นอกจากนี้ ไม่ต้องกังวลหากคุณมีไฟล์รูปภาพอย่างน้อย 200 ประเภท (png หรือ .jpg) ในขนาดต่างๆ เนื่องจากปลั๊กอิน Imagify อันทรงพลังของเราจะแทนที่ด้วยรูปแบบ WebP ที่ปรับให้เหมาะสมโดยไม่ทำให้คุณภาพลดลง

WordPress 5.8 จะเพิ่มการรองรับรูปภาพ WebP (แต่จะไม่แปลงจากรูปแบบดั้งเดิมเป็น WebP) นั่นเป็นเหตุผลที่เรายังคงแนะนำให้คุณใช้ปลั๊กอินเพื่อแปลงไฟล์ของคุณ นี่คือเหตุผล:

  • ความสามารถในการอัปโหลดภาพ WebP ไปยัง Media Library โดยตรงไม่สามารถแก้ไขผู้เข้าชมประมาณ 5% ที่เบราว์เซอร์ไม่สนับสนุน WebP
  • รูปภาพและรูปภาพมักจะอยู่ใน JPG หรือ PNG ดังนั้นการอัปโหลดและแปลงเป็นกลุ่ม ปลั๊กอินอย่าง Imagify สามารถช่วยคุณประหยัดเวลาได้หลายร้อยชั่วโมง

แล้วการทดลองใช้ Imagify ล่ะ? ฟรีประมาณ 200 ภาพต่อเดือน

และจำไว้ว่า หากคุณมีคำถามใดๆ เกี่ยวกับการใช้ WebP บนไซต์ WordPress ของคุณ โปรดถามเราในความคิดเห็นด้านล่าง!