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

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

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

ย่อให้เท่าขนาดที่คุณแสดงจริง

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

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

กฎที่ใช้ได้จริง:

• ภาพฮีโร่เต็มความกว้าง: 1600–2000 px ก็เหลือเฟือ
• รูปในบทความ: 1000–1400 px
• ภาพย่อ: 300–500 px

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

บีบอัดเพื่อรีดส่วนเกินออก

เมื่อขนาดถูกต้องแล้ว การบีบอัดจะขจัดรายละเอียดที่ตามองไม่เห็น สำหรับภาพถ่าย คุณภาพราว 75–85% คือจุดที่ลงตัวที่สุด ไฟล์ลดลงมหาศาลในขณะที่ภาพยังดูเหมือนเดิม ส่วนกราฟิกแบนและภาพหน้าจอที่บันทึกเป็น PNG การลดจำนวนสี (ควอนไทซ์เหลือ 256 สี) สามารถหดไฟล์ให้เหลือเศษเสี้ยวของขนาดเดิม

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

เปลี่ยนไปใช้ฟอร์แมตสมัยใหม่

แค่การเลือกฟอร์แมตอย่างเดียวก็ลดไฟล์ได้ครึ่งหนึ่ง นี่คือการเปรียบเทียบตัวเลือกทั่วไปสำหรับภาพถ่าย

ฟอร์แมต	ขนาดโดยทั่วไปเทียบ JPEG	เหมาะกับ
JPEG	ค่าฐาน	ตัวสำรองสากล; ภาพถ่าย
WebP	เล็กกว่า ~25–35%	ภาพถ่ายและกราฟิก; เบราว์เซอร์รองรับกว้าง
AVIF	เล็กกว่า ~50%	ภาพถ่ายที่ต้องการขนาดเล็กที่สุด
PNG	ใหญ่กว่ามากสำหรับภาพถ่าย	โลโก้ ไอคอน กราฟิกแบน ความโปร่งใส

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

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

ประกอบร่างเข้าด้วยกัน

ไปป์ไลน์ที่เชื่อถือได้สำหรับรูปทุกภาพที่มุ่งสู่เว็บ:

1. ย่อขนาด ให้เท่าความกว้างที่แสดง (บวกเผื่อสำหรับหน้าจอเรตินา)
2. แปลง เป็น WebP หรือ AVIF ถ้าคุณอยากได้ไฟล์เล็กที่สุดเท่าที่จะเป็นไปได้
3. บีบอัด ที่คุณภาพ 75–85% เพื่อรีดส่วนเกินที่เหลือออก

ทำแบบนั้นแล้วภาพถ่ายจากกล้อง 5 MB จะกลายเป็น WebP ขนาด 120 KB ที่ดูเหมือนกันเป๊ะในคอลัมน์บทความ คูณทั้งหน้าแล้วความต่างของเวลาโหลดจะเห็นชัดเจน

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

เหนือกว่าตัวไฟล์

อีกสองนิสัยที่ช่วยได้และไม่มีค่าใช้จ่าย:

• โหลดแบบ lazy สำหรับรูปที่อยู่ต่ำกว่าขอบจอ ด้วย loading="lazy" เพื่อให้เบราว์เซอร์ดึงมันมาเฉพาะตอนที่ผู้อ่านเลื่อนเข้าใกล้
• กำหนดแอตทริบิวต์ width และ height เพื่อให้เลย์เอาต์ไม่กระตุกตอนรูปโหลด ซึ่งยังช่วยคะแนน Core Web Vitals ของคุณด้วย

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