Frontend Academy · บทเรียน

การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP

บทเรียน 3 จาก 413 ขั้นตอน

การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

รูปภาพมีสัดส่วนมากที่สุดของขนาดหน้าเว็บ

หน้าเว็บค่ามัธยฐานมีขนาดประมาณ 2MB และรูปภาพคิดเป็นประมาณครึ่งหนึ่งของขนาดนั้น การปรับรูปภาพให้เหมาะสมคือการปรับปรุงประสิทธิภาพที่ให้ผลกระทบสูงที่สุดเพียงอย่างเดียว

รูปแบบสมัยใหม่: เว็บพีและ AVIF

เว็บพี มีขนาดเล็กกว่า JPEG 25–35% เมื่อคุณภาพใกล้เคียงกัน และเบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ ส่วน AVIF มีขนาดเล็กกว่าอีก (ลดได้ 50%) แต่ใช้เวลาเข้ารหัสนานกว่า ใช้ทั้งสองรูปแบบโดยมีรูปแบบสำรอง

องค์ประกอบรูปภาพ

ใช้ <picture> เพื่อให้บริการ AVIF หากรองรับ จากนั้นใช้เว็บพี และใช้ JPEG เป็นทางเลือกสำรองสุดท้าย

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

การโหลดแบบขี้เกียจในตัว

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

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

รูปภาพที่ปรับตามขนาดหน้าจอด้วย srcset และ sizes

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

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

เหตุใดจึงควรกำหนด width และ height อย่างชัดเจน

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

decoding="async"

เพิ่ม decoding="async" เพื่อให้เบราว์เซอร์ถอดรหัสรูปภาพนอกเธรดหลัก ทำให้เธรดหลักสามารถแสดงผลเนื้อหาอื่นได้

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

CDN สำหรับรูปภาพ

CDN สำหรับรูปภาพ (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) จะแปลงรูปภาพขณะทำงาน ได้แก่ ปรับขนาด เปลี่ยนรูปแบบเป็นเว็บพีหรือ AVIF บีบอัด และให้บริการจากแคชขอบเครือข่าย

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

องค์ประกอบรูปภาพของ Next.js

<Image> ของ Next.js จัดการ srcset ที่ปรับตามขนาดหน้าจอ การแปลงเป็นเว็บพี การโหลดแบบขี้เกียจ และตัวยึดตำแหน่งแบบเบลอให้พร้อมใช้งานโดยไม่ต้องตั้งค่าเพิ่มเติม

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

การบีบอัด JPEG และ PNG

หากคุณเปลี่ยนไปใช้เว็บพีไม่ได้ อย่างน้อยควรบีบอัดรูปภาพ โดยใช้ Squoosh (squoosh.app) สำหรับรูปภาพเฉพาะรายการ ใช้ ImageOptim สำหรับการประมวลผลเป็นชุด หรือใช้ sharp ในสคริปต์การสร้างโปรเจกต์

SVG สำหรับไอคอนและโลโก้

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

ตรวจสอบอย่างรวดเร็ว

แอตทริบิวต์ HTML ใดบอกให้เบราว์เซอร์เลื่อนการโหลดรูปภาพออกไปจนกว่ารูปภาพจะเข้าใกล้พื้นที่แสดงผล

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: การปรับรูปภาพให้เหมาะสม

ใช้รูปแบบสมัยใหม่ (AVIF, เว็บพี) ผ่านองค์ประกอบรูปภาพ เพิ่ม loading="lazy" ให้รูปภาพที่อยู่ถัดลงไปจากส่วนที่มองเห็น และใช้ fetchpriority="high" กับภาพหลัก กำหนด width และ height อย่างชัดเจนเพื่อป้องกัน CLS ใช้ srcset และ sizes สำหรับรูปภาพที่ปรับตามขนาดหน้าจอ CDN สำหรับรูปภาพจะทำให้การแปลงต่าง ๆ เป็นอัตโนมัติ องค์ประกอบรูปภาพของ Next.js จัดการทุกอย่างให้ ส่วน SVG เหมาะสำหรับไอคอน

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP”

เพิ่ม loading=lazy ให้รูปภาพ ให้บริการรูปแบบ WebP และ AVIF ที่ทันสมัย ใช้รูปภาพที่ตอบสนองด้วย srcset และ sizes และกำหนดความกว้างกับความสูงอย่างชัดเจนเพื่อป้องกันเลย์เอาต์เคลื่อน คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS
การตรวจสอบและให้คะแนนด้วย Lighthouse
การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP
การแยกโค้ดและเส้นทางแบบ Lazy

← กลับไปที่ Frontend Academy