ปรับภาพของคุณให้เหมาะสมและไม่เสียเวลาอีกต่อไป

จากข้อมูลของ HTTPArchive ขนาดเว็บไซต์โดยเฉลี่ยเพิ่มขึ้นเกือบสองเท่าใน 5 ปี จาก 1MB ในปี 2014 เป็น 2MB ในปี 2019 แน่นอนว่าการเข้าถึงอินเทอร์เน็ตนั้นเร็วกว่าที่เคย แต่ทำไมเว็บไซต์ถึงใหญ่มากในตอนนี้ คำตอบบางส่วนอยู่ในเนื้อหามัลติมีเดียโดยทั่วไปและโดยเฉพาะอย่างยิ่งรูปภาพ

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

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

เหตุใดการเพิ่มประสิทธิภาพภาพจึงมีความสำคัญ

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

รูปภาพมีผลกระทบอย่างมากต่อขนาดโดยรวมของหน้าเว็บ

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

ตาม GTMetrix การโหลดโพสต์นี้ใช้ข้อมูล 850KB แต่ทำไมโพสต์สั้น ๆ เช่นนี้จึงใช้ข้อมูลมากมาย? รูปภาพมีส่วนรับผิดชอบต่อปัญหานี้: รูปภาพเด่นของโพสต์เพียงอย่างเดียวมีน้ำหนักมากกว่า 200KB ซึ่งคิดเป็น 25% ของทั้งหมด

ปริมาณการใช้มือถือ

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

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

ค่าใช้จ่ายในการจัดเก็บและถ่ายโอนข้อมูล

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

การลดขนาดภาพจะเป็นการลดปัจจัยทั้งสองและประหยัดเงินในแต่ละเดือน ?

การดำเนินการปรับภาพให้เหมาะสม

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

#1 อัปโหลดภาพที่ปรับขนาดอย่างเหมาะสม

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

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

#2 ปรับแต่งธีมของคุณเพื่อสร้างภาพขนาดย่อที่เหมาะสม

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

ตัวอย่างเช่น รูปภาพเด่นของเราคือ 1200x800px มิติข้อมูลเหล่านี้ใช้งานได้ดีเมื่อดูโพสต์เอง:

ซึ่งชัดเจนว่ามากเกินไปสำหรับสิ่งนี้:

ธีมของเราจึงลงทะเบียนขนาดย่อใหม่ที่มีขนาดเพียง 480x320px เท่านั้น และใช้ในหน้าจอรายการโพสต์

หากคุณคิดว่าธีมของคุณไม่ได้สร้างภาพขนาดย่อที่เหมาะสม เราขอแนะนำให้คุณอ่านเอกสารประกอบของ WordPress เพื่อทราบวิธีกำหนดขนาดของภาพขนาดย่อด้วย set_post_thumbnail_size หรือแม้แต่วิธีกำหนดภาพขนาดย่อเพิ่มเติมด้วย add_image_size

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

#3 ใช้ขนาดรูปภาพอย่างชาญฉลาด

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

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

ตัวอย่างเช่น หากคุณกำลังจะใส่รูปภาพที่แคบและเล็กแบบนี้ รูปภาพขนาดเล็ก (300x200px) อาจสมบูรณ์แบบ:

แต่การใช้ภาพขนาดย่อเดียวกันนั้นสำหรับภาพที่ใหญ่ขึ้นทำให้ได้ผลลัพธ์ที่แย่มาก:

ควรใช้เวอร์ชันที่มีความละเอียดมากกว่า:

#4 ใช้รูปแบบภาพที่เหมาะสม

มีรูปแบบรูปภาพที่แตกต่างกัน แต่ละแบบมีจุดแข็งและจุดอ่อนในการบีบอัดรูปภาพ รูปแบบที่ใช้มากที่สุดคือ:

• PNG. รูปแบบรูปภาพที่ยอดเยี่ยมสำหรับการแชร์ภาพหน้าจอที่ไม่มีรูปภาพ เช่น ภาพหน้าจอของโปรแกรมแก้ไข WordPress
• JPG. หนึ่งในรูปแบบที่แพร่หลายที่สุดในโลก ทำงานได้ดีกับการถ่ายภาพแทบทุกประเภท ทำให้มีอัตราการบีบอัดที่สูงมาก อย่างไรก็ตาม ไม่สมบูรณ์แบบ: หากภาพถ่ายมีขอบที่คมชัดมาก (เช่น หากมีข้อความหรือภาพวาด) คุณจะต้องใช้อัตราการบีบอัดที่ต่ำกว่า หรือเสี่ยงที่ภาพจะมีวัตถุที่น่าเกลียด
• กิ๊ฟ. ราชาแห่งอินเทอร์เน็ต (และแพลตฟอร์มโซเชียลมีเดีย) เป็นประเภทรูปแบบที่ช่วยให้ภาพเคลื่อนไหวได้ พูดตามตรง ฉันคิดว่า “GIF” ทั้งหมดที่เราใช้อยู่ในปัจจุบันคือวิดีโอ (สั้น) ซึ่งมีอัตราส่วนการอัดที่ดีกว่าและคุณภาพสูงกว่า...

#5 ลบภาพที่ไม่ได้ใช้

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

#6 เปิดใช้งาน Lazy Loading

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

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

มีปลั๊กอิน Lazy Loading มากมายสำหรับ WordPress ผู้ให้บริการโฮสต์บางราย เช่น เหตุการณ์ SiteGround มีตัวเลือกนี้ในการติดตั้ง เพียงมองหาตัวเลือกในแดชบอร์ดของคุณและเปิดใช้งาน

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

ภาพเด่นของทีม Icons8 บน Unsplash