รูป hero ที่ไม่ได้ปรับให้เหมาะสมเพียงรูปเดียวอาจหนักกว่า HTML, CSS และ JavaScript ทั้งหมดของหน้าเว็บรวมกัน รูปภาพคิดเป็นประมาณ 50% ของจำนวนไบต์ทั้งหมด ของหน้าเว็บโดยเฉลี่ย ทำให้เป็นคันโยกที่ใหญ่ที่สุดในการปรับปรุงประสิทธิภาพ แต่การปรับรูปภาพให้เหมาะสมยังคงเป็นหนึ่งในแง่มุมที่ถูกเข้าใจผิดมากที่สุดของการพัฒนาเว็บ
ผลกระทบเกินกว่าความเร็วโหลด ขนาดรูปภาพส่งผลต่ออันดับการค้นหา ค่า hosting แพ็กเกจข้อมูลของผู้ใช้ และแม้แต่อัตราการแปลง
การเชื่อมต่อกับประสิทธิภาพ: Core Web Vitals และ LCP
Core Web Vitals ของ Google เป็นชุดเมตริกที่ส่งผลโดยตรงต่ออันดับการค้นหา ในนั้น Largest Contentful Paint (LCP) วัดระยะเวลาที่องค์ประกอบที่มองเห็นได้ใหญ่ที่สุดใช้ในการเรนเดอร์ ส่วนใหญ่องค์ประกอบนั้นคือรูปภาพ
Google ถือว่า LCP ต่ำกว่า 2.5 วินาที เป็น "ดี" ระหว่าง 2.5 ถึง 4 วินาทีเป็น "ต้องปรับปรุง" เกิน 4 วินาทีเป็น "ไม่ดี"
ผลที่ตามมาเป็นรูปธรรม:
- อันดับ SEO ลดลง — Core Web Vitals เป็นสัญญาณจัดอันดับ หน้าช้าเสียตำแหน่ง
- Bounce rate สูงขึ้น — 53% ของผู้เยี่ยมชมมือถือออกไปหากหน้าใช้เวลามากกว่า 3 วินาที
- การแปลงต่ำลง — ทุกวินาทีเพิ่มเติมลดการแปลงประมาณ 7%
กฎ 100 KB สำหรับรูปเนื้อหาบนหน้าเว็บ ตั้งเป้าต่ำกว่า 100 KB ต่อรูป สำหรับรูป hero เต็มความกว้าง ให้ต่ำกว่า 200 KB เป้าหมายเหล่านี้ทำได้ด้วยรูปแบบสมัยใหม่และการบีบอัดที่เหมาะสมโดยไม่มีการสูญเสียคุณภาพที่มองเห็นได้
Lossy vs. lossless: เข้าใจข้อแลกเปลี่ยน
การบีบอัดรูปทั้งหมดแบ่งเป็นสองประเภท การบีบอัด lossless ลดขนาดไฟล์โดยรักษาทุกพิกเซล ลดได้ปานกลาง — ปกติ 10-30% PNG ใช้การบีบอัด lossless
การบีบอัด lossy ทิ้งข้อมูลที่ตามนุษย์ไม่น่าสังเกต ลดได้มาก — ปกติ 70-90% JPEG และ WebP (โหมด lossy) ใช้วิธีนี้
ข้อมูลเชิงลึกที่สำคัญคือ การบีบอัด lossy ที่คุณภาพ 80-85% แยกไม่ออกจากต้นฉบับด้วยตา สำหรับรูปถ่าย
| วิธี | การลดขนาด | การสูญเสียคุณภาพ | เหมาะสำหรับ |
|---|---|---|---|
| Lossless (PNG) | 10-30% | ไม่มี | โลโก้ ภาพหน้าจอ กราฟิกมีตัวอักษรมาก |
| Lossy ที่ 85% (JPEG/WebP) | 70-85% | มองไม่เห็น | รูปถ่าย ภาพประกอบ พื้นหลัง |
| Lossy ที่ 60% (JPEG/WebP) | 85-95% | เห็นได้เมื่อดูใกล้ | Thumbnail รูปตกแต่ง |
รูปแบบสำคัญ: รูปเดียวกัน ขนาดต่างกันมาก
ตัวเลือกรูปแบบภาพมีผลกระทบเท่ากับระดับการบีบอัด รูปถ่ายบันทึกเป็น PNG อาจ ใหญ่กว่า 5 ถึง 10 เท่า เทียบกับ JPEG คุณภาพ 85%
JPEG ยังคงเป็นมาตรฐานสากลสำหรับรูปถ่าย WebP เสนอไฟล์เล็กกว่า JPEG 25-35% AVIF ใหม่กว่า เสนอการบีบอัดดีกว่า WebP PNG เหมาะเฉพาะรูปที่ต้องการการสร้างพิกเซลที่แม่นยำ
แบนด์วิดท์และพื้นที่เก็บข้อมูล: ค่าใช้จ่ายที่ซ่อนอยู่
หน้าที่มีรูป 2 MB ถูกดู 10,000 ครั้งต่อเดือน ถ่ายโอน 20 GB ข้อมูลรูปต่อเดือน ปรับให้เหมาะสมเป็นรวม 400 KB ถ่ายโอน 4 GB แทน — ลด 80%
รูปภาพ responsive และ lazy loading
รูปกว้าง 1920 พิกเซลแสดงบนหน้าจอโทรศัพท์ 375 พิกเซลเปลืองกว่า 96% ของพิกเซล ทางแก้คือ รูปภาพ responsive และ lazy loading — เลื่อนการดาวน์โหลดรูปที่อยู่ใต้ fold จนกว่าผู้ใช้เลื่อนเข้าใกล้
เรียนรู้เพิ่มเติม
การปรับรูปภาพให้เหมาะสมเป็นหัวข้อที่การปรับปรุงเล็ก ๆ สะสมเป็นผลลัพธ์ที่สำคัญ toolk.io เสนอ ตัวบีบอัดรูปภาพ ที่ประมวลผลทุกอย่างในเบราว์เซอร์ บทเรียนสำหรับ บีบอัดรูปภาพ และ แปลงรูปแบบ ก็มีให้บนเว็บไซต์