วิธีเพิ่มประสิทธิภาพรูปภาพสำหรับ WordPress

เผยแพร่แล้ว: 2019-11-12

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

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

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

เลือกรูปแบบภาพที่เหมาะสม

เลือกรูปแบบภาพที่เหมาะสม

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

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

Takeaway: สำหรับภาพถ่ายหลายสี ให้เลือกและบีบอัด JPEG สำหรับภาพถ่ายที่ชัดเจนและโปร่งใส ให้ไปที่ PNG

ปรับขนาดรูปภาพของคุณ

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

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

หากคุณไม่ได้ปรับขนาดรูปภาพก่อนอัปโหลด คุณสามารถเลือกรูปภาพที่ต้องการในไลบรารีสื่อ WordPress ของคุณ เลือกแก้ไข และปรับขนาดรูปภาพได้

ขนาดภาพ

ครอบตัดรูปภาพ

ความแตกต่างระหว่างการปรับขนาดและการครอบตัดคือการปรับขนาดจะคงองค์ประกอบทั้งหมดของภาพต้นฉบับไว้ ในทางกลับกัน การครอบตัดจะตัดขอบบางส่วนของภาพต้นฉบับออก

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

บีบอัดรูปภาพ

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

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

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

TinyPNG ทำงานกับ PNG อย่างไร

สำหรับไฟล์ PNG TinyPNG ใช้การบีบอัดข้อมูลแบบสูญเสียข้อมูลอัจฉริยะเพื่อลดขนาดไฟล์ แม้ว่าจะหมายถึงการเลือกลดสีของภาพลง แต่ก็ไม่อาจสังเกตได้ด้วยตาเปล่า และขนาดไฟล์ก็ลดลงอย่างมาก

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

มันทำงานได้ดีกับเบราว์เซอร์สมัยใหม่แค่ไหน?

อีกแง่มุมหนึ่งที่ทำให้ TinyPNG ไม่เหมือนใครคือการรองรับเบราว์เซอร์ที่ทันสมัยทั้งหมด แม้ว่า Internet Explorer 6 จะไม่ยอมรับความโปร่งใสของ PNG แต่ TinyPNG ก็สร้างพื้นหลังโปร่งใสบนเบราว์เซอร์ หากเบราว์เซอร์ของคุณรองรับ PNG แบบเคลื่อนไหว (Chrome, Firefox และ Safari) ให้ลองใช้ดู

การบีบอัด JPEG

หากคุณต้องการบีบอัดไฟล์ JPEG ไม่ต้องมองหาที่ไหนอีกแล้ว TinyPNG ถูกสร้างขึ้นเพื่อรองรับการบีบอัดภาพ JPEG ที่ชาญฉลาดและทำงานได้ดีเยี่ยม

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

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

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

ใช้ Lazy Loading

ลักษณะของ WordPress คือการโหลดทุกอย่างบนหน้าพร้อมกัน – ทันทีที่คุณขอหน้า เนื่องจากรูปภาพโหลดช้ากว่าข้อความ จึงต้องทำให้การโหลดหน้าเว็บของคุณช้าลง

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

แคชรูปภาพของคุณ

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

ตั้งชื่อไฟล์ภาพของคุณอย่างเหมาะสม

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

ปรับรูปภาพของคุณให้เหมาะสมเพื่อนำเสนอใน Google Snippets

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

นอกจากนี้ ให้ใช้ปลั๊กอินข้อมูลที่มีโครงสร้าง (สคีมา) เพื่อเพิ่มโอกาสในการมีตัวอย่างข้อมูลสื่อสมบูรณ์

ใช้ภาพต้นฉบับ

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

บรรทัดล่าง

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