วิธีเพิ่มประสิทธิภาพรูปภาพใน WordPress?

เผยแพร่แล้ว: 2021-09-08

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

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


ค้นหาภาพที่ไม่ได้รับการปรับให้เหมาะสมใน GTmetrix + PSI

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

หน้าแรกของ GT Metrix

ปรับรูปภาพให้เหมาะสมโดยใช้ปลั๊กอิน WordPress + บริการ

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

นอกจากนี้ยังมีบริการต่างๆ ที่จะทำสิ่งนี้ให้คุณ เช่น TinyPNG และ Kraken Image Optimizer ซึ่งบีบอัดรูปภาพโดยไม่กระทบต่อคุณภาพเลย

ดาวน์โหลดเครื่องมือเพิ่มประสิทธิภาพรูปภาพ ลิงค์

ใช้ขนาดภาพที่ถูกต้อง

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

คนปรับขนาดภาพ

แคชรูปภาพ

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

ปลั๊กอิน WP Smush จะทำสิ่งนี้โดยอัตโนมัติเมื่อคุณติดตั้งและเปิดใช้งาน (และคุณควรทำทั้งสองสิ่งนี้อย่างแน่นอน!) คุณยังสามารถใช้ปลั๊กอิน เช่น Autoptimize หรือ Wp Super Cache ซึ่งไม่เพียงแต่แคช แต่ยังลดขนาดโค้ดด้วย

ปลั๊กอิน WP Super Cache

ใช้ LazyLoad เพื่อเลื่อนภาพนอกจอ

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

คนที่มีใบหน้าเบลอครึ่งหนึ่ง

ใช้การบีบอัดภาพ

คุณสามารถใช้การบีบอัดภาพได้สองประเภท: LZW หรือ JPEG ความแตกต่างระหว่างสิ่งเหล่านี้เกี่ยวข้องกับไฟล์กราฟิกประเภทใดมากกว่าสิ่งอื่นใด ดังนั้นให้เลือกไฟล์ใดก็ได้ที่เหมาะกับสถานการณ์ของคุณ!

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

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

การเพิ่มประสิทธิภาพภาพใน photoshop

แสดงรูปภาพในรูปแบบ Next-Gen

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


ระบุขนาดรูปภาพ

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


ให้บริการรูปภาพจาก A CDN

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


รวมรูปภาพโดยใช้ CSS Sprites

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


ใช้รูปภาพที่ปรับเปลี่ยนได้สำหรับมือถือ

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

อุปกรณ์โทรศัพท์

ปิดใช้งานการ Hotlink ของรูปภาพ

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

คุณสามารถทำได้ด้วยปลั๊กอิน WordPress มากมาย เช่น WP Rocket คุณยังสามารถขอให้โฮสต์ทำสิ่งนี้ให้คุณได้ (หากคุณอยู่กับโฮสต์ที่ดี)


ลบ EXIF ​​​​Data

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

กระบวนการนี้เกี่ยวข้องกับการใช้เครื่องมือขัดรูปภาพ เช่น JPEGsnoop หรือ jhead ซึ่งช่วยให้คุณสามารถลบข้อมูล EXIF ​​ทั้งหมดออกจากรูปภาพบนไซต์ของคุณ โดยไม่ต้องดาวน์โหลดก่อน!


ให้บริการรูปภาพคุณภาพต่ำแก่ผู้ใช้ในการเชื่อมต่อที่ช้า

นี่คือสิ่งที่คุณสามารถทำได้กับรูปภาพของคุณ แต่ไม่ใช่ทุกธีมที่จะมีตัวเลือกในการซ่อนสิ่งนี้ โดยพื้นฐานแล้วสิ่งที่ทำคือแสดงภาพที่มีคุณภาพต่ำกว่าให้กับผู้ที่มีการเชื่อมต่อช้า (มือถือหรืออย่างอื่น) คุณสามารถทำได้ด้วยปลั๊กอิน Optimole

เต่าบนทราย

เหตุใดจึงสำคัญที่จะใช้ภาพที่ปรับให้เหมาะสมที่สุด

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

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

ผู้คนเกลียดการรอไซต์ต่างๆ โดยเฉพาะผู้ใช้มือถือ ซึ่งทำให้การเพิ่มประสิทธิภาพรูปภาพเป็นส่วนสำคัญของไซต์ WordPress ใดๆ นอกจากนี้ยังช่วยเกี่ยวกับ SEO เนื่องจาก Google ชอบเว็บไซต์ที่โหลดเร็วด้วย (ด้วยเหตุผลที่ดี)

SEO สะกดด้วยศิลปะผนังเซรามิก

บทสรุป

โดยสรุป รูปภาพเป็นส่วนสำคัญของเว็บไซต์ใดๆ สามารถใช้เพื่อสร้างอารมณ์ อวดผลิตภัณฑ์ หรือเพิ่มความน่าสนใจให้กับเพจ

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