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

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

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

แล้วคุณจะสร้างความสมดุลระหว่างประสิทธิภาพของไซต์กับการออกแบบภาพได้อย่างไร

ด้วยการเพิ่มประสิทธิภาพรูปภาพของคุณ

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

ในคำแนะนำทีละขั้นตอนเพื่อเพิ่มประสิทธิภาพรูปภาพ ฉันจะครอบคลุม:

• การเพิ่มประสิทธิภาพภาพคืออะไร?
• เหตุใดการปรับภาพให้เหมาะสมจึงสำคัญ
• 7 วิธีในการเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ

การเพิ่มประสิทธิภาพรูปภาพคืออะไร?

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

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

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

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

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

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

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

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

วิธีปรับรูปภาพให้เหมาะสมสำหรับเว็บ

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

ทำตามขั้นตอนเหล่านี้เพื่อเพิ่มประสิทธิภาพรูปภาพของคุณเพื่อประสิทธิภาพไซต์ที่ดีขึ้น:

1. เปรียบเทียบความเร็วไซต์ปัจจุบันของคุณ
2. รู้วิธีเลือกประเภทไฟล์ภาพที่ดีที่สุด
3. ปรับขนาดรูปภาพของคุณก่อนส่งออก
4. บีบอัดรูปภาพเพื่อลดขนาดไฟล์
5. ปรับภาพให้เหมาะสมโดยอัตโนมัติด้วยปลั๊กอิน WordPress
6. ใช้เทคนิค "เบลอภาพ" เพื่อโหลดรูปภาพคุณภาพต่ำก่อน
7. ใช้การโหลดแบบขี้เกียจ

1. เปรียบเทียบความเร็วไซต์ปัจจุบันของคุณ

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

• ข้อมูลเชิงลึกของ Google PageSpeed
• เครื่องมือ Pingdom
• GTMetrix
• การทดสอบหน้าเว็บ

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

2. รู้วิธีเลือกประเภทไฟล์ภาพที่ดีที่สุด

เมื่อคุณสร้างภาพเสร็จแล้ว (ไม่ว่าจะบันทึกจากกล้องหรือส่งออกจากเครื่องมือเช่น Photoshop) คุณจะมีตัวเลือกในการระบุประเภทไฟล์ ประเภทไฟล์ที่ใช้บ่อยที่สุดบนเว็บคือ JPEG, PNG และ GIF และอย่างที่ฉันแน่ใจว่าคุณสามารถเดาได้ พวกเขาทั้งหมดมีข้อดี ข้อเสีย และแนวทางปฏิบัติที่ดีที่สุดเมื่อวางบนเว็บไซต์ของคุณ

JPEG

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

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

หากคุณทำงานใน Photoshop คุณจะพบการตั้งค่านี้เมื่อคุณส่งออกเป็น "บันทึกสำหรับเว็บ"

PNG

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

GIF

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

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

3. ปรับขนาดรูปภาพของคุณก่อนอัปโหลด

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

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

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

หากต้องการปรับขนาดรูปภาพของคุณ เพียงเปิดซอฟต์แวร์แก้ไขรูปภาพที่คุณเลือก Photoshop ทำงานได้ดี หรือคุณสามารถใช้เครื่องมือที่ง่ายกว่า เช่น ดูตัวอย่าง (สำหรับ Mac) ระบายสี (สำหรับ Windows) หรือ Canva (เครื่องมือเบราว์เซอร์)

4. บีบอัดรูปภาพเพื่อลดขนาดไฟล์

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

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

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

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

ในการบีบอัดรูปภาพ สิ่งที่คุณต้องมีคือเครื่องมือบีบอัดรูปภาพ รายการโปรดของฉันรวมถึง:

• TinyPNG: เครื่องมือบนเบราว์เซอร์ฟรีสำหรับบีบอัดรูปภาพ PNG และ JPEG
• ImageOptim: แอปโอเพ่นซอร์สฟรีสำหรับการบีบอัดรูปภาพ
• JPEGmini: แอปบีบอัดรูปภาพใหม่สำหรับ Mac และ Windows
• RIOT: แอพ Windows ฟรีสำหรับการปรับแต่งรูปภาพ
• Image Optimizer: โปรแกรมเสริมฟรีสำหรับ Local

TinyPNG

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

ImageOptim

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

JPEGmini

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

จลาจล

Radical Image Optimization Tool (RIOT) เป็นแอป Windows ฟรีสำหรับลดขนาดไฟล์ภาพ มีมุมมองแบบเคียงข้างกัน คุณจึงสามารถเปรียบเทียบคุณภาพของภาพก่อนและหลังการบีบอัดได้

Image Optimizer ซึ่งเป็นส่วนเสริมฟรีสำหรับ Local

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

5. ปรับภาพให้เหมาะสมโดยอัตโนมัติด้วยปลั๊กอิน WordPress

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

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

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

เพื่อเพิ่มประสิทธิภาพรูปภาพบนไซต์ WordPress ฉันขอแนะนำปลั๊กอินเหล่านี้:

• EWWW Image Optimizer คลาวด์
• TinyPNG
• Kraken.io
• จินตนาการ

EWWW Image Optimizer คลาวด์

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

TinyPNG

ปลั๊กอิน WordPress นี้โดยทีมงาน TinyPNG สามารถปรับแต่งรูปภาพ JPEG และ PNG เมื่ออัปโหลด หากคุณเป็นแฟนตัวยงของเครื่องมือบนเบราว์เซอร์ ปรับปรุงกระบวนการด้วยปลั๊กอินฟรี!

Kraken.io

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

จินตนาการ

ปลั๊กอิน WordPress นี้จะช่วยปรับแต่งรูปภาพของคุณโดยไม่สูญเสียคุณภาพ นอกจากนี้ยังเข้ากันได้กับ WooCommerce และ NextGen Gallery หากคุณใช้ปลั๊กอินเหล่านั้น

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

6. ใช้เทคนิค “เบลอภาพ” เพื่อโหลดรูปภาพคุณภาพต่ำก่อน

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

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

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

วิธียอดนิยมในการทำเช่นนี้คือเทคนิค "เบลอภาพ" ซึ่งคุณสามารถเรียนรู้วิธีนำไปใช้กับบทช่วยสอนเกี่ยวกับ CSS-Tricks นี้

7. Lazy Load ภาพเว็บไซต์ของคุณ

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

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

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

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

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