วิธีเพิ่มประสิทธิภาพรูปภาพเพื่อประสิทธิภาพเว็บ

วิธีเพิ่มประสิทธิภาพรูปภาพเพื่อประสิทธิภาพเว็บ

รูปภาพคิดเป็น 50 ถึง 60 เปอร์เซ็นต์ของไบต์ที่ดาวน์โหลดทั้งหมดของหน้าเว็บทั่วไป ทุกรูปภาพที่ไม่ได้เพิ่มประสิทธิภาพเพิ่มวินาทีให้กับเวลาในการโหลดของคุณ เพิ่มอัตราการตีกลับ และทำลายอันดับเครื่องมือค้นหาของคุณ Core Web Vitals ของ Google — โดยเฉพาะ Largest Contentful Paint (LCP) — วัดประสิทธิภาพการโหลดรูปภาพโดยตรง ทำให้การเพิ่มประสิทธิภาพรูปภาพเป็นหนึ่งในการเปลี่ยนแปลงที่มีผลกระทบสูงสุดที่คุณสามารถทำได้กับเว็บไซต์ของคุณ

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

1. บีบอัดทุกรูปภาพก่อนเผยแพร่

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

หลักการสำคัญ:

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

การประหยัดที่คาดหวัง:

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

2. ให้บริการขนาดที่เหมาะสม

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

สร้างรูปแบบขนาดหลายขนาด:

• กว้าง 320 ถึง 480 พิกเซลสำหรับหน้าจอมือถือ
• กว้าง 768 ถึง 1024 พิกเซลสำหรับแท็บเล็ต
• กว้าง 1200 ถึง 1920 พิกเซลสำหรับจอแสดงผลเดสก์ท็อป
• กว้าง 2560 พิกเซลสำหรับจอแสดงผลเรตินาความหนาแน่นสูง (2x)

จับคู่รูปแบบที่ใหญ่ที่สุดกับความกว้างสูงสุดที่รูปภาพจะถูกแสดงในเค้าโครงของคุณ คูณด้วย 2 สำหรับหน้าจอ DPI สูง

3. ใช้รูปภาพที่ตอบสนองด้วย Srcset

แอตทริบิวต์ srcset และ sizes ใน HTML บอกเบราว์เซอร์ว่าควรดาวน์โหลดขนาดรูปภาพใดตามความกว้างของวิวพอร์ตและอัตราส่วนพิกเซลของอุปกรณ์

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="ข้อความอธิบายสำหรับการเข้าถึงและ SEO"
/>

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

4. เพิ่มประสิทธิภาพสำหรับ Largest Contentful Paint (LCP)

LCP วัดเวลาที่องค์ประกอบที่มองเห็นได้ใหญ่ที่สุด — โดยปกติคือรูปภาพฮีโร่ — ใช้ในการแสดงผล Google ถือว่า LCP ที่ 2.5 วินาทีหรือน้อยกว่าเป็นค่าที่ดี

เพื่อเพิ่มประสิทธิภาพ LCP สำหรับรูปภาพ:

• โหลดรูปภาพฮีโร่ล่วงหน้าเพื่อให้เบราว์เซอร์ค้นพบเร็ว เพิ่ม <link rel="preload" as="image" href="hero.webp"> ในส่วนหัวของเอกสาร
• บีบอัดรูปภาพฮีโร่อย่างเข้มข้น — โดยปกติมันเป็นทรัพยากรแรกและใหญ่ที่สุดที่เบราว์เซอร์ดาวน์โหลด
• ให้บริการ WebP หรือ AVIF สำหรับรูปภาพฮีโร่พร้อมทางเลือก JPEG
• ปรับขนาดรูปภาพฮีโร่ให้ถูกต้อง อย่าให้บริการรูปภาพ 4000 พิกเซลในช่องฮีโร่ 1200 พิกเซล
• อย่าใช้ Lazy Loading กับรูปภาพฮีโร่หรือรูปภาพใดๆ ที่อยู่เหนือรอยพับ Lazy Loading ชะลอการดาวน์โหลด ซึ่งส่งผลเสียต่อ LCP

5. เปิดใช้ Lazy Loading สำหรับรูปภาพที่อยู่ใต้รอยพับ

รูปภาพที่ไม่สามารถมองเห็นได้บนหน้าจอเริ่มต้นไม่จำเป็นต้องโหลดทันที แอตทริบิวต์ loading="lazy" บอกเบราว์เซอร์ให้เลื่อนการโหลดรูปภาพจนกว่ารูปภาพจะใกล้เข้าสู่ขอบเขตการมองเห็น

<img src="gallery-photo.jpg" loading="lazy" alt="รูปภาพแกลเลอรี่" />

Lazy Loading ลดน้ำหนักหน้าเริ่มต้นลง 30 ถึง 50 เปอร์เซ็นต์บนหน้าที่มีรูปภาพมาก เมื่อรวมกับการบีบอัด ผลกระทบนั้นเปลี่ยนแปลงอย่างมาก

6. ลบเมทาดาทารูปภาพ

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

7. ใช้ Content Delivery Network (CDN)

CDN กระจายรูปภาพของคุณผ่านเซิร์ฟเวอร์ทั่วโลก ลดระยะทางกายภาพระหว่างผู้ใช้และรูปภาพ สิ่งนี้ปรับปรุง Time to First Byte สำหรับคำขอรูปภาพ

CDN บางรายยังมีบริการแปลงรูปภาพแบบทันที:

• การเจรจารูปแบบอัตโนมัติ (ให้บริการ WebP หรือ AVIF เมื่อรองรับ)
• การปรับขนาดแบบไดนามิกตามอุปกรณ์และวิวพอร์ต
• การปรับการบีบอัดแบบเรียลไทม์

หาก CDN เฉพาะไม่ใช่ตัวเลือก อย่างน้อยให้ใช้ HTTP/2 หรือ HTTP/3 เพื่อให้การดาวน์โหลดรูปภาพหลายรายการในการเชื่อมต่อเดียว

8. พิจารณาประสิทธิภาพการถอดรหัสรูปภาพ

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

ใช้แอตทริบิวต์ decoding="async" บนรูปภาพที่ไม่สำคัญเพื่อให้เบราว์เซอร์ถอดรหัสโดยไม่บล็อกเนื้อหาอื่น:

<img src="photo.jpg" decoding="async" loading="lazy" alt="คำอธิบาย" />

การสร้างเวิร์กโฟลว์การเพิ่มประสิทธิภาพของคุณ

ไปป์ไลน์การเพิ่มประสิทธิภาพรูปภาพแบบครบวงจรมีลักษณะดังนี้:

1. บีบอัดรูปภาพในรูปแบบต้นฉบับโดยใช้เครื่องมือที่เหมาะสมกับคุณภาพ
2. ลบเมทาดาทาระหว่างการบีบอัด
3. ปรับขนาดเป็นขนาดการแสดงผลที่ต้องการ สร้างรูปแบบหลายขนาด
4. ใช้ srcset และ sizes ในเทมเพลต HTML ของคุณ
5. โหลดรูปภาพฮีโร่ล่วงหน้า ใช้ Lazy Loading กับทุกอย่างที่อยู่ใต้รอยพับ
6. ให้บริการจาก CDN เพื่อประสิทธิภาพระดับโลก
7. วัด LCP และน้ำหนักรูปภาพรวมโดยใช้ Lighthouse หรือ PageSpeed Insights
8. ทำซ้ำการตั้งค่าคุณภาพจนกว่าคุณจะบรรลุงบประมาณประสิทธิภาพของคุณ

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