วิธีบีบอัดรูปภาพสำหรับเว็บไซต์

ตามรายงาน 2025 Web Almanac ของ HTTP Archive หน้าแรกของเว็บไซต์บนมือถือมีขนาดค่ามัธยฐานอยู่ที่ 2.56 MB โดยเป็นรูปภาพถึง 911 KB ส่วนบนเดสก์ท็อป หน้าเว็บมีรูปภาพค่ามัธยฐาน 1,058 KB รูปภาพยังเป็นสิ่งที่ผู้เข้าชมต้องรอด้วย องค์ประกอบที่ใหญ่ที่สุดบนหน้าจอขณะโหลดหน้าเว็บ หรือ Largest Contentful Paint (LCP) เป็นรูปภาพใน 76% ของหน้าเว็บบนมือถือ

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

การบีบอัดช่วยไม่ได้หากรูปใหญ่กว่าพื้นที่ที่แสดงไปมาก รูปจากกล้องที่กว้าง 4000 พิกเซลแต่แสดงในคอลัมน์กว้าง 800 พิกเซล มีจำนวนพิกเซลมากกว่าที่หน้าเว็บใช้ได้ถึง 25 เท่า web.dev ระบุว่าการส่งรูปขนาดสำหรับเดสก์ท็อปไปยังโทรศัพท์อาจใช้ข้อมูลมากกว่าที่จำเป็น 2–4 เท่า

• แบนเนอร์เต็มความกว้าง: กว้างประมาณ 1600–2000 พิกเซลก็เพียงพอสำหรับเลย์เอาต์ส่วนใหญ่
• รูปในคอลัมน์บทความ: ประมาณสองเท่าของความกว้างคอลัมน์ เพื่อให้ยังคมชัดบนหน้าจอความละเอียดสูง (เช่น 1400 พิกเซลสำหรับคอลัมน์กว้าง 700 พิกเซล)
• ภาพย่อและรูปโปรไฟล์: สองเท่าของขนาดที่แสดง ซึ่งมักอยู่ที่ 200–400 พิกเซล

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

เบราว์เซอร์ที่ใช้งานอยู่ราว 97% แสดง WebP ได้ และไฟล์มักเล็กกว่าอย่างเห็นได้ชัด หากต้องการลอง ให้แปลงด้วย JPG เป็น WebP หรือ PNG เป็น WebP แล้วเปรียบเทียบผลลัพธ์กับต้นฉบับ เพราะไฟล์ที่แปลงแล้วไม่ได้เล็กกว่าเสมอไป โดยเฉพาะกราฟิกที่เรียบง่าย

การบีบอัดจะตัดข้อมูลที่สายตาไม่น่าจะสังเกตเห็นออกไป ในเครื่องมือบีบอัดรูปภาพของ Bitinz คุณวางไฟล์ JPG, PNG หรือ WebP ได้ทีละหลายไฟล์ และเลือกได้หนึ่งในสามระดับ:

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

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

แม้รูปจะบีบอัดมาดีแล้ว ก็ยังทำให้หน้าเว็บช้าได้หากโหลดผิดจังหวะหรือผิดขนาด แอตทริบิวต์ HTML เพียงไม่กี่ตัวช่วยจัดการเรื่องนี้ได้เกือบทั้งหมด:

• กำหนด width และ height ให้ทุกรูป เพื่อให้เบราว์เซอร์จองพื้นที่ไว้ก่อน และเลย์เอาต์ไม่กระโดดระหว่างที่รูปโหลด
• เพิ่ม loading="lazy" ให้รูปที่อยู่ด้านล่างของหน้า เพื่อให้โหลดเฉพาะเมื่อผู้เข้าชมเลื่อนลงไปใกล้ถึง
• อย่าใช้ lazy load กับรูปหลักที่ด้านบนสุดของหน้า web.dev แนะนำให้ใส่ fetchpriority="high" ให้รูปนั้นแทน และใช้กับรูปไม่เกินหนึ่งหรือสองรูป
• ใช้ srcset และ sizes เพื่อเสนอรูปเดียวกันในหลายความกว้าง ให้โทรศัพท์ดาวน์โหลดไฟล์ที่เล็กกว่าหน้าจอขนาดใหญ่
• ตั้งอายุแคชของรูปให้ยาว และส่งผ่าน CDN หากคุณมี เพื่อให้ผู้เข้าชมที่กลับมาไม่ต้องดาวน์โหลดรูปซ้ำ

ทดสอบหน้าเว็บด้วย PageSpeed Insights หรือแผง Lighthouse ใน Chrome ตั้งแต่ Lighthouse 13 เป็นต้นมา การตรวจรูปภาพถูกรวมไว้ในข้อมูลเชิงลึกเดียวชื่อ “Improve image delivery” ซึ่งแสดงรายการรูปที่ยังบีบอัดเพิ่มได้ ควรส่งในรูปแบบที่ทันสมัยกว่า หรือควรทำให้เล็กลง รูปที่จะประหยัดได้น้อยกว่า 4 KiB จะไม่ถูกแสดง ดังนั้นรายการที่สั้นจึงเป็นสัญญาณที่ดี

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

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

1. 01ปรับขนาดรูปแต่ละรูปให้ประมาณสองเท่าของขนาดที่แสดง
2. 02ใช้ JPG หรือ WebP สำหรับรูปถ่าย และ PNG หรือ WebP สำหรับกราฟิกและรูปที่มีความโปร่งใส
3. 03บีบอัดที่ระดับสมดุล และลองระดับสูงสุดกับรูปที่ใหญ่ที่สุด
4. 04เปรียบเทียบผลลัพธ์กับต้นฉบับก่อนนำไปแทนที่
5. 05กำหนด width และ height ใช้ lazy load กับรูปที่อยู่ต่ำกว่าหน้าจอแรก และอย่าใช้ lazy load กับรูปหลัก
6. 06ตรวจหน้าเว็บอีกครั้งใน PageSpeed Insights

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