วิธีทำให้รูปภาพโหลดเร็วขึ้นบนไซต์ WordPress ของคุณ

คุณต้องการให้รูปภาพโหลดเร็วขึ้น?


ฉันจะไม่ท้อแท้ มาดำดิ่งสู่สิ่งที่ดี!

มีสามวิธีในการทำให้ภาพโหลดเร็วขึ้นใน WordPress:

  • ปรับขนาด
  • การบีบอัด
  • โหลดขี้เกียจ

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

เทคนิคแรกนี้ง่ายมาก แต่มักจะถูกมองข้ามโดยมือใหม่ WordPress.

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

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

วิธีที่ง่ายที่สุดที่จะทำให้ภาพของคุณโหลดเร็วขึ้นคือการปรับขนาด ให้ฉันอธิบาย.

การปรับขนาดคืออะไร?

เมื่อฉันพูดว่า “ปรับขนาด” ฉันหมายถึงการเปลี่ยนขนาดของภาพและในกรณีนี้คุณต้องการลดขนาดของภาพที่มีขนาดใหญ่เกินไป.

ตัวอย่างเช่นนักเขียนบล็อกบางครั้งถ่ายรูปบนโทรศัพท์หรือกล้องดิจิทัลแล้วอัพโหลดไปยังบล็อก สำเนารูปภาพที่ยังไม่ได้แก้ไขอาจมีขนาดใหญ่เท่ากับความกว้าง 5,000px ตอนนี้คิดเรื่องนี้ …

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

รูปภาพที่มีขนาดใหญ่ขึ้นจะมีขนาดไฟล์ใหญ่กว่า.

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

ลองย้อนกลับไปที่ตัวอย่างของฉันและสมมติว่าภาพมีความกว้าง 5,000px และสูง หากคุณลดลงจาก 5,000px ลงเหลือเพียง 700px ภาพจะใช้พิกเซลน้อยลง 99% กล่าวอีกนัยหนึ่งขนาดไฟล์จะลดลงประมาณ 99% หากภาพมีขนาด 5mb ภาพจะสิ้นสุดเพียง 50kb และจะโหลดได้เร็วขึ้น 99% บนไซต์ของคุณ.

ปรับขนาดภาพ

หากคุณไม่ได้หมายถึงการปรับขนาดรูปภาพอย่างระมัดระวังคุณจะได้รับผลกำไรบางส่วน.

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

ปรับขนาดภาพของคุณด้วยตนเอง

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

หากคุณมีภาพขนาดใหญ่มากอย่างในตัวอย่างของฉันสิ่งนี้จะสร้างความแตกต่างอย่างมากในทันที หลังจากปรับขนาดรูปภาพแล้วคุณสามารถอัปโหลดไปยัง Media Library ของคุณ.

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

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

ใช้ขนาดที่เล็กกว่า

เมื่อคุณอัปโหลดรูปภาพไปยัง Media Library ของคุณ WordPress จะสร้างเวอร์ชันเพิ่มเติมได้ถึง 3 เวอร์ชัน: Thumbnail, Medium และ Large.

หากคุณไปที่หน้าการตั้งค่าสื่อคุณจะเห็นว่าคุณสามารถเลือกขนาดเหล่านี้ได้ที่นี่:

การตั้งค่าสื่อ WordPress

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

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

ปรับขนาดรูปภาพ WordPress

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

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

ปรับขนาดอัตโนมัติด้วยปลั๊กอิน

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

เครื่องมือเพิ่มประสิทธิภาพภาพ Optimole

มันไม่ทำงานอย่างที่คุณคาดหวัง.

แทนที่จะแก้ไขภาพใน Media Library ของคุณ Optimole จะเก็บสำเนาภาพของคุณและให้บริการจาก CDN ประสิทธิภาพสูง ด้วยวิธีนี้ต้นฉบับของคุณจะไม่ถูกแก้ไข แต่อย่างใด.

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

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

หากคุณต้องการเรียนรู้วิธีใช้ Optimole คุณสามารถติดตามวิดีโอแนะนำแบบเต็มของฉัน:

ฉันแนะนำให้ปรับขนาดก่อนเพราะไม่ว่าคุณจะทำเองหรือใช้ปลั๊กอินอัตโนมัติก็ทำได้ง่ายและให้ผลกำไรมหาศาล.

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

บีบอัดภาพของคุณ

การบีบอัดเป็นวิธีการลดขนาดไฟล์ของภาพโดยไม่ต้องเปลี่ยนขนาด.

การบีบอัดรูปภาพมีสองประเภท.

การบีบอัดภาพประเภทแรกเรียกว่าการบีบอัด“ แบบไม่สูญเสีย”.

การบีบอัดแบบไม่สูญเสีย

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

เนื่องจากข้อมูลนี้ค่อนข้าง จำกัด การเพิ่มประสิทธิภาพแบบไม่สูญเสียอาจลดขนาดรูปภาพของคุณลงได้เพียง 1-5% แต่ไม่มีเหตุผลที่จะไม่ใช้เนื่องจากไม่มีผลกระทบต่อคุณภาพของภาพ.

กำไรที่แท้จริงมาจากการเพิ่มประสิทธิภาพการสูญเสีย.

การบีบอัดแบบสูญเสีย

อย่างที่คุณคาดไว้การบีบอัดแบบ lossy จะทำให้ภาพมีคุณภาพดีที่สุดและทำให้คุณภาพลดลง แต่นี่คือสิ่งที่ …

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

วิธีบีบอัดภาพของคุณ

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

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

shortpixel

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

คุณสามารถค้นหาปลั๊กอินปรับการเพิ่มประสิทธิภาพรูปภาพเพิ่มเติมได้ที่นี่.

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

ใช้การโหลดที่ขี้เกียจ

การโหลดขี้เกียจเป็นวิธีที่ชาญฉลาดอย่างแท้จริงในการปรับภาพของคุณให้เหมาะสม.

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

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

วิดีโอนี้มีการสร้างภาพที่อธิบายได้ดีขึ้นหากคุณต้องการภาพที่ชัดเจนว่าการโหลดแบบขี้เกียจทำงานอย่างไร:

ตอนนี้คุณขายตามแนวคิดแล้วนี่คือวิธีที่คุณสามารถใช้การโหลดแบบขี้เกียจบนไซต์ของคุณ.

วิธีใช้การโหลดแบบขี้เกียจ

อีกครั้งเทคนิคการเพิ่มประสิทธิภาพนี้ได้รับการเพิ่มเข้ากับ WordPress ด้วยปลั๊กอินอย่างง่ายดาย.

หากคุณกำลังมองหาตัวเลือกฟรีให้ลองใช้ Optimole หรือ a3 Lazy Load.

ด้วย Optimole การโหลดแบบขี้เกียจจะเปิดโดยอัตโนมัติและปลั๊กอิน a3 นั้นง่ายต่อการกำหนดค่า.

นอกจากนี้หากคุณไม่สนใจการจ่ายเงินลองดู จรวด WP. มันมีแคชประสิทธิภาพสูงและเครื่องมือความเร็วอื่น ๆ ที่หลากหลาย.

หากต้องการเปิดการโหลดแบบขี้เกียจด้วย WP Rocket สิ่งที่คุณต้องทำคือเพียงพลิกสวิตช์นี้:

WP Rocket Media

ไม่ง่ายกว่านี้อีกแล้ว!

เพลิดเพลินไปกับภาพที่โหลดเร็วขึ้น

เพื่อสรุปสิ่งที่คุณเพิ่งเรียนรู้ …

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

สิ่งที่สำคัญที่สุดที่คุณสามารถทำได้เพื่อเพิ่มความเร็วให้กับภาพของคุณคือการปรับขนาดภาพที่มีขนาดใหญ่เกินไปเพื่อให้มีขนาดที่เหมาะสมสำหรับไซต์ของคุณ คุณสามารถทำได้ด้วยตนเองหรือทำให้เป็นอัตโนมัติด้วย Optimole.

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

สุดท้ายการโหลดแบบสันหลังยาวเป็นวิธีที่ยอดเยี่ยมในการเลือกโหลดภาพ คุณสามารถใช้ Optimole, a3 Lazy Load หรือ WP Rocket เพื่อใช้การโหลดแบบขี้เกียจบนไซต์ของคุณได้ทันที.

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

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

คุณอาจชอบ,

วิธีการแก้ไขเว็บไซต์ WordPress ช้าและแผงผู้ดูแลระบบ (ถาวร)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map