Cover บทความ Imagify คืออะไร

Imagify คืออะไร? สอนวิธีการใช้ให้เว็บไซต์คุณ Lean แบบสุดๆ

mins read   1stCraft Team

เว็บไซต์โหลดเร็ว แสดงผลข้อมูลต่างๆ ให้ผู้ใช้งานได้อย่างไม่มีสะดุด เป็นอีกหนึ่งสิ่งที่ Google ให้ความสำคัญต่อการจัดอันดับของเว็บไซต์

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

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

Imagify คืออะไร? ใช้สำหรับทำอะไรบนเว็บไซต์?

รูปภาพหน้าต่างปลั๊กอิน Imagify
รูปภาพหน้าต่างปลั๊กอิน Imagify
ขอบคุณรูปภาพจาก wordpress.org/plugins/imagify/ 

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

จุดเด่นของ Imagify คือ

  • ช่วยให้เว็บไซต์โหลดและแสดงผลเร็วขึ้น เป็นผลดีต่อทั้งผู้ใช้งานและการทำ SEO
  • ช่วยลดเวลาในการทำงาน เพียงคลิกเดียว เครื่องมือก็จะช่วยแปลงไฟล์รูปทั้งหมดบนเว็บให้มีขนาดเหมาะกับการใช้งานแบบอัตโนมัติ
  • ช่วยให้รูปภาพยังคงความละเอียดสวยงาม แม้ว่าจะถูกบีบอัดขนาดไฟล์ให้เล็กลงจากเดิม
  • สามารถบีบอัดไฟล์รูปภาพได้หลายชนิด ได้แก่ jpgs, pngs, pdfs และ gifs ที่เคลื่อนไหวได้

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

เปรียบเทียบขนาดของ WebP กับไฟล์ภาพชนิดต่างๆ

  • ไฟล์ภาพเล็กลง 26% เมื่อเทียบกับไฟล์ภาพ PNG
  • ไฟล์ภาพเล็กลงเฉลี่ย 25-34% เมื่อเทียบกับไฟล์ภาพ JPEG

ทำไมต้องบีบอัดรูปภาพก่อนอัปโหลดขึ้นเว็บไซต์?

Page Speed หรือความเร็วในการโหลดและแสดงผลเว็บไซต์ เป็นสิ่งที่สำคัญต่อผู้ใช้งานเมื่อคลิกเข้าสู่เว็บไซต์ เมื่อไหร่ก็ตามที่เว็บไซต์โหลดข้อมูลได้ช้า โอกาสที่จะถูกคลิกออกจากเว็บก็มีเยอะ ถ้าหากเว็บไซต์ถูกกดปิดเยอะก็จะส่งผลโดยตรงต่อการทำ SEO ของเว็บไซต์ และทำให้เว็บไซต์ไม่ถูกเลือกมาจัดอันดับในหน้าแรกได้

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

รูปภาพแบบไหนที่ทำให้เว็บโหลดได้ช้าลงบ้าง

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

2. รูปภาพที่มี Dimensions สูง รูปภาพที่มีขนาด scale ที่ใหญ่มากเกินไป ทำให้การโหลดข้อมูลต้องใช้เวลานานขึ้น เพราะเบราว์เซอร์ของผู้ใช้งานจะต้องโหลดไฟล์ภาพขนาดเต็มมาเพื่อแสดงผล เช่น รูปภาพขนาด 2,000 x 2,000 pixels จะใช้เวลาโหลดนานกว่ารูปภาพที่มีขนาด 200 x 200 pixels

3. รูปภาพที่มีนามสกุลไฟล์ขนาดใหญ่ โดยนามสกุลไฟล์ภาพบางชนิดจะมีขนาดไฟล์ที่ใหญ่มาก เพื่อเก็บรายละเอียดต่างๆ ของภาพเอาไว้ เช่น TIFF, BMP หากไม่มีการแปลงไฟล์หรือบีบอัดก่อนอัปโหลดขึ้นบนเว็บไซต์ นอกจากจะทำให้เว็บโหลดช้าแล้ว ยังต้องเสียพื้นที่เก็บไฟล์เยอะขึ้นด้วย

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

อยากใช้งาน Imagify ต้องเสียค่าบริการเท่าไหร่?

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

สอนวิธีการใช้ Imagify ให้เว็บไซต์คุณ Lean แบบสุดๆ

Imagify เป็นปลั๊กอินที่สามารถติดตั้งและใช้งานได้บนเว็บไซต์เลย เพียงทำการติดตั้งปลั๊กอิน เชื่อม API Key ก็เริ่มใช้งานได้ฟรีเลย 

ขั้นตอนการติดตั้งปลั๊กอิน Imagify บน WordPress

1. ล็อกอินเข้าสู่ WordPress เพื่อเข้าสู่หลังบ้านของเว็บไซต์ 

2. เลือกเมนู Plugins ที่อยู่ในแถบเมนูด้านซ้าย และคลิก Add New แล้วระบบจะแสดงหน้าเพิ่มและติดตั้งปลั๊กอิน

3. ที่ช่อง Search Plugins พิมพ์ค้นหาด้วยคำว่า “Imagify”

4. จากนั้นเลือก Install Now เมื่อติดตั้งแล้วให้กด Activate แล้วจะมีหน้าต่างให้สมัครใช้งานและเชื่อมต่อ API Key (แต่ก่อนที่จะเชื่อมบัญชี หากเว็บของคุณใช้งาน WP Rocket ให้กดปุ่ม Clear cache ก่อน)

5. ทำการสมัครบัญชี Imagify แล้วล็อกอิน จากนั้นไปที่เมนู My Account > คลิกที่ไอค่อนบัญชีด้านบนขวามือ > API-Integration แล้วคัดลอก Key เพื่อนำไปเชื่อมกับปลั๊กอิน

6. กลับมาที่หน้าปลั๊กอิน Imagify จากนั้นกรอก API Key ลงในช่อง แล้วกดเชื่อมต่อ เมื่อเชื่อมบัญชีสำเร็จก็สามารถเริ่มใช้งานปลั๊กอินเพื่อบีบอัดรูปภาพได้เลย

การตั้งค่าและการใช้งานปลั๊กอิน Imagify

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

สำหรับการตั้งค่าที่สำคัญของปลั๊กอินนั่นคือ ส่วน Optimization Level และ Webp Format

1. Optimization Level

ส่วนนี้จะเป็นการตั้งค่าระดับในการบีบอัดรูปภาพ โดย Imagify สามารถบีบอัดรูปภาพได้ 3 รูปแบบ ได้แก่

รูปภาพการตั้งค่าปลั๊กอิน Imagify ส่วน Optimization Level
รูปภาพการตั้งค่าปลั๊กอิน Imagify ส่วน Optimization Level
ขอบคุณรูปภาพจาก wordpress.org/plugins/imagify/ 
  • Normal เป็นรูปแบบการบีบอัดรูปภาพปกติ ทำให้รูปภาพไม่เสียความคมชัด แต่จะลดขนาดไฟล์ลงไม่เยอะ
  • Aggressive เป็นรูปแบบการบีบอัดรูปภาพที่เพิ่มการบีบอัดเยอะขึ้น ทำให้ไฟล์มีเล็กลงจากเดิมมากขึ้น แต่จะเสียความละเอียดของภาพไปบ้างเล็กน้อย
  • Ultra เป็นรูปแบบการบีบอัดรูปภาพขั้นสูงสุด ได้รูปภาพที่ไฟล์เล็กลงสุดๆ ทำให้สูญเสียความละเอียดลงไปเยอะเช่นกัน แต่ถ้าสังเกตด้วยเปล่าก็จะยังแยกไม่ค่อยออกถึงความแตกต่างหลังจากบีบอัดภาพไปแล้ว

นอกจากนี้ยังมีช่องให้เลือกเพิ่มเติมสำหรับการอัปโหลดรูปภาพหลังจากนี้ อีก 3 ช่อง นั่นคือ

  • Auto-Optimize images on upload เพื่อให้บีบอัดรูปภาพอัตโนมัติทุกครั้งที่อัปโหลดรูปภาพขึ้นเว็บ
  • Backup original images จัดเก็บไฟล์ต้นฉบับและไฟล์ที่บีบอัดเอาไว้ด้วย แต่จะสูญเสียพื้นที่จัดเก็บเยอะขึ้น หากไม่ต้องการสามารถติ๊กออกได้
  • Keep all EXIF data from your images เก็บข้อมูลของรูปภาพจากกล้องถ่ายรูป เช่น shutter speed, exposure, ISO เหมาะสำหรับเว็บไซต์ช่างภาพ ที่ต้องการเก็บข้อมูลเอาไว้

2. WebP Format

รูปภาพการตั้งค่าปลั๊กอิน Imagify ส่วน WebP Format

รูปภาพการตั้งค่าปลั๊กอิน Imagify ส่วน WebP Format

ขอบคุณรูปภาพจาก WP Wiki – Optimize WordPress

ส่วนนี้จะเป็นการเลือกเพื่อให้ปลั๊กอินแปลงไฟล์รูปให้เป็น WebP โดยช่องที่ต้องติ๊กถูก คือ

  • Create webp versions of images เพื่อให้ระบบแปลงไฟล์ภาพเป็น WebP
  • Display images in webp format on the site เพื่อให้ระบบแสดงรูปตัวอย่างของไฟล์ WebP

และหลังจากตั้งค่าการใช้งานแล้ว ให้เลื่อนลงด้านล่างและกด Save & Go to bulk optimizer 

การใช้งานปลั๊กอิน Imagify

สำหรับการใช้งานครั้งแรกหลังติดตั้ง ให้เข้าสู่หน้า Imagify Bulk Optimization จากนั้นเลื่อนลงด้านล่าง คลิกที่ปุ่ม IMAGIF’EM ALL > START THE OPTIMIZATION เครื่องมือจะทำการบีบอัดรูปภาพทั้งเว็บให้ในคลิกเดียว โดยไม่ต้องเลือกทีละรูป 

รูปภาพการใช้ปลั๊กอิน Imagify
รูปภาพการใช้ปลั๊กอิน Imagify
ขอบคุณรูปภาพจาก WP Wiki – Optimize WordPress

และเมื่อการบีบอัดรูปภาพเสร็จแล้ว สามารถเข้าไปเช็กข้อมูลการบีบอัดของแต่ละรูปได้ในเมนู Media > Library 

สำหรับการอัปโหลดรูปภาพขึ้นสู่เว็บไซต์ในครั้งต่อไป หากคุณเลือกตั้งค่า Auto-Optimize images on upload เอาไว้ ปลั๊กอินจะทำการบีบรูปให้อัตโนมัติ 

สรุปท้ายบทความ Imagify และการใช้งานเพื่อ Lean เว็บไซต์

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

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

ติดต่อเราเพื่อปรึกษาสิ่งที่คุณต้องการทำให้กับเว็บไซต์ธุรกิจ เรายินดีให้คำปรึกษาฟรี โดยไม่มีค่าใช้จ่าย