ขนาดภาพที่ดีที่สุดสำหรับความเร็วเว็บไซต์

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

เป้าหมายมิติ

จับคู่ขนาดพิกเซลของภาพกับที่ที่มันปรากฏจริง แนวทางคร่าว ๆ:

• ภาพเด่นเต็มความกว้าง: กว้าง 1600–2000 px ครอบคลุมเลย์เอาต์เดสก์ท็อปส่วนใหญ่ กว้างกว่านั้นแทบไม่ช่วยและกินไบต์มาก
• ภาพในเนื้อหา: ความกว้างคอลัมน์เนื้อหาของคุณ ปกติ 800–1200 px
• ภาพขนาดย่อ / ภาพการ์ด: 300–500 px
• รูปโปรไฟล์ / ไอคอน: 48–200 px ที่ขนาดที่มันแสดง

การเสิร์ฟภาพ 4000px ลงในช่อง 800px หมายความว่าเบราว์เซอร์ดาวน์โหลดและถอดรหัสพิกเซลมากกว่าที่มันจะแสดง 25 เท่า นั่นคือการสูญเปล่าล้วน ๆ และการถอดรหัสภาพใหญ่ยังทำให้เธรดหลักกระตุก

เป้าหมายน้ำหนัก

มิติกำหนดเพดาน การบีบอัดกำหนดน้ำหนักจริง ตั้งเป้า:

• ภาพเด่น: ต่ำกว่า 200 KB (ตามหลักคือ 100–150 KB)
• ภาพในเนื้อหา: 80–150 KB
• ภาพขนาดย่อ: 10–30 KB
• ภาพรวมต่อหน้า: พยายามอยู่ใต้ ~1 MB สำหรับทั้งหน้า

ถ้าภาพเดียวเกิน ~300 KB ให้ถือว่าเป็นบั๊กที่ต้องตรวจสอบ

ทำไมมันขับเคลื่อน Core Web Vitals

Largest Contentful Paint (LCP) ของ Google วัดว่านานแค่ไหนกว่าองค์ประกอบที่ใหญ่ที่สุดบนหน้าจอจะเรนเดอร์ และบนหน้าส่วนใหญ่ องค์ประกอบที่ใหญ่ที่สุดนั้น คือ ภาพ (มักเป็นภาพเด่น) ภาพเด่นที่หนักและใหญ่เกินขยาย LCP โดยตรง LCP ที่ดีคือ ต่ำกว่า 2.5 วินาที ภาพเด่นที่อ้วนอาจทะลุค่านั้นบนการเชื่อมต่อมือถือได้ด้วยตัวมันเอง

ชัยชนะที่เกี่ยวกับภาพอีกสองข้อ:

• ตั้งแอตทริบิวต์ความกว้างและความสูง เพื่อให้เบราว์เซอร์จองพื้นที่ ซึ่งปกป้องคะแนน Cumulative Layout Shift (CLS) ของคุณ
• จัดลำดับความสำคัญของภาพเด่น (อย่าโหลดภาพ LCP แบบ lazy-load) และโหลดแบบ lazy-load ทุกอย่างที่อยู่ใต้ส่วนที่มองเห็นแรก

ขั้นตอนสองขั้น

ขั้นตอนที่ 1 — ปรับขนาดให้ตรงความกว้างที่แสดงจริง ใช้เครื่องมือปรับขนาดภาพ เพื่อลดแต่ละภาพลงมาที่ขนาดที่มันปรากฏ ล็อกสัดส่วน ย่อขนาดคุณภาพสูง อันนี้อย่างเดียวมักตัดน้ำหนักลง 80–90%

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

วัดผล อย่าเดา

เมื่อภาพของคุณถูกปรับให้เหมาะแล้ว ยืนยันว่าหน้าเร็วขึ้นจริง Page QA ของ tools.faxianai.com ตรวจสอบ URL ที่ใช้งานจริงผ่าน Google PageSpeed Insights และรายงานน้ำหนักภาพของหน้า คุณจึงมองเห็นไฟล์ใด ๆ ที่ยังหนักเกินไป ข้อควรระวังหนึ่งข้อ: Page QA ต้องใช้การเชื่อมต่ออินเทอร์เน็ต ต่างจากเครื่องมือภาพ มันเรียกใช้ PageSpeed API ของGoogle จึงทำงานแบบออฟไลน์ไม่ได้ ใช้มันหลังจากคุณดีพลอยเพื่อเช็ก LCP จริงและงบภาพของคุณ

เป็นส่วนตัวโดยค่าเริ่มต้น

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

สรุปด่วน: ปรับมิติให้ขนาดถูกต้อง บีบอัดให้ถึงเป้าหมายน้ำหนัก จัดลำดับความสำคัญของภาพเด่นเพื่อ LCP และตรวจสอบด้วย Page QA