ไม่นานมานี้ได้มีโอกาสทำเว็บไซต์ Personal Brand เลยไปเจอกับปลั๊กอินตัวนึงซึ่งดีมากๆ ดีเกินจริงไป โดยมีความสามารถ ที่ช่วยลดขนาดรูปภาพที่อัพขึ้นไปบนเว็บไซต์, แปลงเป็นฟอร์แมต WebP หรือ AVIF, เลือก library ที่ต้องการใช้ในการแปลงรูปได้, จัดการรูปที่เคยอัพไปแล้วได้ด้วย, กำหนดขนาดรูปสูงสุด และยังมีฟีเจอร์อีกมากมาย จนคิดว่าเป็นปลั๊กอินเสียตังค์แน่ๆ แต่ทั้งหมดที่ว่านั้นคือฟรี เราลองมาดูกันว่ามีฟีเจอร์อะไรที่น่าสนใจบ้าง
Table of content
เลือกไลบรารี่ที่จะมาใช้บีบอัดรูปภาพ
เราสามารถเลือก ไลบรารี่ที่จะมาเอามาช่วยแปลงไฟล์ได้ โดยให้เลือกระหว่าง
GD: จะเป็น PHP Extension ที่ช่วยจัดการย่อขนาดรูป ข้อดีโดยจะมีความเร็วกว่า ในการจัดการรูปขนาดใหญ่ แต่ข้อเสียจะรองรับฟอร์แมตไฟล์ได้น้อยกว่า
Imagick: เป็นอีกทางเลือกหนึ่งโดยจะรองรับฟอร์แมตได้เยอะกว่า และทำให้รูปภาพออกมาได้คุณภาพที่สูงกว่า
โดยเราสามารถคลิกเพื่อตรวจสอบได้ว่า Hosting ที่เราใช้งานได้ทำการเปิด Extension ดังกล่าวไว้ไหม ได้ที่ลิงก์ Check Environment
เลือกฟอร์แมต WebP, AVIF
ความแตกต่างระหว่างทั้งสองฟอร์ตแมตสามารถเลือกได้ตามความเหมาะสม โดย
WebP: เหมาะสำหรับการใช้งานทั่วไป เพราะรองรับบนเบราว์เซอร์หลักและแพลตฟอร์มที่หลากหลาย และยังคงให้คุณภาพสูงพร้อมขนาดไฟล์เล็กกว่าฟอร์แมตดั้งเดิม (JPEG, PNG)
AVIF: เหมาะสำหรับการลดขนาดไฟล์ให้เล็กที่สุดและต้องการภาพที่มีคุณภาพสูง (เช่น เว็บไซต์ที่ต้องการแสดงภาพ HDR) แต่ยังไม่เหมาะสำหรับการใช้งานที่ต้องการความเข้ากันได้แน่นอนกับทุกอุปกรณ์ในปัจจุบัน
ปรับคุณภาพของรูปภาพได้
Lossless (ระดับการบีบอัด 100):
ไม่มีการสูญเสียคุณภาพของภาพ แม้ว่าข้อมูลทั้งหมดจะยังอยู่ครบ แต่ขนาดไฟล์อาจใหญ่ขึ้นเมื่อเทียบกับระดับอื่น เหมาะสำหรับภาพที่ต้องการรักษาคุณภาพสูงสุด เช่น ภาพที่ใช้ในการพิมพ์
90 (→):
การบีบอัดเล็กน้อย คุณภาพของภาพอาจเปลี่ยนลงเล็กน้อย แต่ยังใกล้เคียงภาพต้นฉบับ เหมาะสำหรับภาพที่ต้องการลดขนาดไฟล์ แต่ยังแสดงผลคุณภาพสูง
80 (ค่าเริ่มต้น):
เป็น ระดับค่าเริ่มต้น (Default level) ซึ่งเหมาะกับการใช้งานทั่วไป ให้สมดุลที่ดีระหว่างคุณภาพภาพและขนาดไฟล์ที่เล็กลง เหมาะสำหรับเว็บไซต์หรือโซเชียลมีเดีย
70 (→):
การบีบอัดลดเพิ่มขึ้น ส่งผลให้ภาพเริ่มสูญเสียรายละเอียดเพิ่มเติมเล็กน้อย แต่ขนาดไฟล์จะลดลงอย่างมาก เหมาะสำหรับภาพที่เน้นประหยัดพื้นที่ เช่น ภาพแสดงผลบนอุปกรณ์ที่ไม่ต้องการรายละเอียดสูงมาก
Lossy (ระดับการบีบอัด 60):
บีบอัดมากที่สุด คุณภาพของภาพจะลดลงอย่างชัดเจนเพื่อให้ได้ไฟล์เล็กที่สุด เหมาะสำหรับภาพที่โหลดในอุปกรณ์ความเร็วอินเทอร์เน็ตต่ำ หรือการบีบอัดเพื่อนำไปใช้งานบางประเภท
Custom:
ปรับระดับการบีบอัดได้เองตามความต้องการ
รูปภาพที่เคยอัพแล้ว สามารถทำการ โปรเซสได้อีกรอบ
ชอบฟีเจอร์นี้ที่สุด โดยรูปภาพ ที่เราได้ทำการอัพโหลดไปแล้วก่อนที่จะติดตั้งปลั๊กอิน CompressX เราสามารถดึงรูปเก่าๆขึ้นมา แล้วเอามาบีบอัดได้อีกรอบ
โดยรูปไหน ที่เคยทำการย่อแล้ว มันจะข้ามไป แต่ถ้าหากใครต้องการให้ทำใหม่ทั้งหมดก็สามารถติ๊กเลือก “Force all images to be re-processed” ได้ ใครรูปเยอะหน่อยอาจจะต้องรอซักพักใหญ่ๆ เลยครับ เท่าที่ผมทดสอบ
กำหนดการเรียกใช้รูปหน้าด้วย rewrite rule หรือ pictures tag
การย่อขนาดรูปเท่าที่ผมไปลองแกะว่ามันทำงานยังไง คือมันจะเก็บรูปต้นฉบับเอาไว้ และค่อยแปลงเป็น WebP หรือ AVIF อีกที ดังนั้นควรระมัดระวัง อัพรูปที่ใหญ่เกินไป อาจจะทำให้เปลืองพื้นที่เซิฟเวอร์ได้
การ Override ในส่วนของการแสดงผลหน้าบ้านจะมีสองวิธีหลักๆ ที่ปลั๊กอินจะนำรูปที่บีบอัดแล้วไปแสดงผล โดยแต่ละวิธีขึ้นอยู่กับความเหมาะสมของเซิฟเวอร์
Rewrite Rule: โหลดภาพ WebP และ AVIF โดยเพิ่ม Rewrite Rule ลงไปในไฟล์ .htaccess หากเบราว์เซอร์รองรับ AVIF ก็จะทำการโหลดภาพในฟอร์แมต AVIF ถ้าไม่รองรับก็จะใช้โหลดในฟอร์ตแมต WebP แทน หรือถ้าหากทั้งสองฟอร์แมตไม่รองรับ ก็จะไปโหลดภาพที่ต้นฉบับแทน ( โดยไฟล์ .htaccess ที่หมายถึงจะอยู่ที่ /wp-content/.htaccess )
Picture Tag: โหลดภาพ WebP และ AVIF ด้วย<picture> แทน <img> เลือกวิธีนี้ก็ต่อเมื่อไฟล์ .htaccess ไม่สามารถแก้ไขได้ วิธีนี้สามารถทำงานได้กับเบราว์เซอร์ส่วนใหญ่ เพียงแต่จะไม่รองรับภาพที่อยู่ใน CSS
การตั้งค่าอื่นๆ ที่น่าสนใจ
- ไม่ให้ PNG แปลงเป็น AVIF: เนื่องจากไลบรารี่ ImageMagick 6.x เมื่อทำการแปลงฟอร์แมตจะทำให้สูญเสียพื้นหลังโปร่งใสได้ จะรองรับเวอร์ชั่น 7 ขึ้นไป
- ให้ลบทันทีหลังจากที่ทำการบีบอัดไฟล์ ถ้ารูปที่ถูกแปลงมีขนาดใหญ่กว่ารูปต้นฉบับ
- ตั้งค่าขนาดสูงสุดของรูปภาพ ทั้งความกว้างและสูง ถ้าหากรูปที่อัพมามีขนาดใหญ่เกินกว่าที่กำหนด ปลั๊กอินจะแปลงขนาดให้ไม่เกินค่าที่กำหนดไว้
- เลือกขนาดรูปภาพที่ต้องการแปลงไฟล์ได้ ( Original, Thumbnail, Medium, Large, etc. )
- กำหนดโฟลเดอร์นอกเหนือจาก uploads ที่ ต้องการ/ไม่ต้องการให้ ทำการลดขนาดรูปที่เคยอัพไปได้อีกด้วย
ตอนแรกที่ได้เห็นฟีเจอร์นี้ บอกเลยว่าตะลึงกับความสามารถที่มันให้มามากจริงๆ ถ้ามันเป็นปลั๊กอินแบบเสียเงินก็คงไม่แปลกใจเลย เพราะความครบครันขนาดนี้ ตอนนี้ในตลาดมีปลั๊กอินหลายตัวที่ทำฟีเจอร์แบบนี้ได้ แต่สำหรับตอนนี้ ต้องบอกว่าผมประทับใจกับตัวนี้ที่สุดจริงๆ หากใครสนใจไปตามได้ที่วาปด้านล่างได้เลยครับ ได้ here
