รูปกว้าง 1920 พิกเซลบนหน้าเว็บ ผู้ใช้มือถือก็ต้องดาวน์โหลดครบทั้งไฟล์ แล้วจึงถูกย่อเหลือ 390 พิกเซลบนจอ สิ้นเปลืองแบนด์วิดท์ห้าเท่าและหน้าเว็บช้าลงโดยเปล่าประโยชน์ srcset ให้เบราว์เซอร์เลือกเวอร์ชันที่พอดีกับหน้าจอ แต่คุณต้องสร้างเวอร์ชันเหล่านั้นไว้ก่อน
ทำไมรูปเดียวไม่พอ
ค่า LCP ใน Core Web Vitals มักเป็นรูปใหญ่เหนือเส้นพับ ถ้าส่งไฟล์กว้าง 1920 ขนาด 400KB ให้มือถือ LCP แทบไม่ถึง 2.5 วินาที ส่วนเวอร์ชันกว้าง 480 ขนาด 40KB บนสัญญาณเดียวกันเร็วกว่าเป็นอีกระดับ สัญญาณ page experience ของ Google อ่านค่านี้โดยตรง
ในทางกลับกัน รูปกว้าง 768 บนจอเดสก์ท็อปใหญ่จะดูเบลอ จึงต้องมีหลายขนาดให้เบราว์เซอร์เลือก
ตาราง breakpoint ที่ใช้ได้จริง
breakpoint ยึดตามความกว้างที่รูปแสดงจริงบนหน้า ไม่ใช่ viewport มาดูสองกรณีที่พบบ่อย คือแบนเนอร์เต็มความกว้างและรูปประกอบในบทความ:
- รูปเต็มความกว้าง (hero, แบนเนอร์): 480, 768, 1200, 1920 ตรงกับมือถือ แท็บเล็ต แล็ปท็อป และจอใหญ่
- รูปในบทความ (คอลัมน์เนื้อหากว้างถึงราว 800): 400, 800, 1200 โดย 1200 รองรับจอ 1.5x–2x
- รูปย่อและการ์ด (แสดงราว 300): 300 และ 600
ขั้นมากขึ้นไม่ได้ดีกว่า ทุกขั้นคือการส่งออกอีกรอบและไฟล์อีกชุดที่ต้องเก็บ ขณะที่เบราว์เซอร์ยอมรับความคลาดเคลื่อนได้ ระยะห่าง 1.5–2 เท่าจึงลงตัวที่สุด สี่ขั้นครอบคลุมชุดอุปกรณ์มากกว่าเก้าในสิบ
ต้องมีเวอร์ชัน 2x ไหม
จอ Retina และมือถือส่วนใหญ่ทำงานที่ความหนาแน่น 2x–3x รูปที่แสดงกว้าง 400 ต้องมี 800 พิกเซลจึงจะคม ขั้นที่ใหญ่กว่าในตารางทำหน้าที่เป็น 2x ของขั้นเล็กอยู่แล้ว 768 คือ 2x ของมือถือกว้าง 390 และ 1200 คือ 2x ของคอลัมน์กว้าง 600
จึงไม่ต้องทำชุด “@2x” แยก เว้นระยะแต่ละขั้นราว 2 เท่า เบราว์เซอร์จะเลือกขั้นที่สูงกว่าเองตามความหนาแน่นของจอ
รูปแบบไฟล์: WebP ก่อน JPG เป็นตัวสำรอง
ที่คุณภาพเท่ากัน WebP เล็กกว่า JPG 25–35 เปอร์เซ็นต์ และเบราว์เซอร์สมัยใหม่รองรับทุกตัว ส่งออก WebP ทุกขนาดและเก็บ JPG ไว้เป็นตัวสำรองผ่านองค์ประกอบ picture สำหรับเบราว์เซอร์เก่า ถ้ากลุ่มผู้ชมของคุณไม่มีเบราว์เซอร์ก่อนปี 2020 แล้ว ใช้ WebP อย่างเดียวก็ได้
AVIF เล็กกว่าอีก แต่เข้ารหัสในเบราว์เซอร์ช้ากว่ามาก ไม่เหมาะกับชุดใหญ่ ข้อดีข้อเสียละเอียดอยู่ในAVIF เทียบกับ WebP และ JPEG
ส่งออกทั้งชุดเป็นชุด
ลากรูปต้นฉบับเข้าประมวลผลรูปภาพเป็นชุด แล้วรันหนึ่งรอบต่อหนึ่งขั้น โดยเปลี่ยนความกว้างและคำเติมท้ายทุกครั้ง:
- ขนาด: กว้าง 480, ปิด ขยายรูปเล็กให้ใหญ่ขึ้นด้วย, ผลลัพธ์เป็น WebP คุณภาพ 80 เปอร์เซ็นต์, คำเติมท้าย -480
- ตั้งค่าเดิมที่ 768 พร้อมคำเติมท้าย -768 แล้วต่อด้วย 1200 และ 1920
- ถ้าต้องการ JPG สำรอง เปลี่ยนผลลัพธ์เป็น JPG คงคำเติมท้ายเดิม แล้วรันอีกครั้ง
แต่ละรอบใช้เวลาไม่กี่วินาที และ ZIP จะมี hero-480.webp, hero-768.webp และไฟล์ทำนองเดียวกันครบ พร้อมวางลงโฟลเดอร์รูป ปิดการขยายรูปเล็กไว้ เพื่อไม่ให้ต้นฉบับ 1000 พิกเซลถูกยืดขึ้นเป็น 1920
ถ้าอยากเห็นความต่างของขนาดไฟล์ในแต่ละขั้นกับรูปเดียว ลองเครื่องมือปรับขนาดรูปภาพกับไฟล์เดียว
เขียน HTML
สำหรับรูปเต็มความกว้าง:
<img src="hero-1200.jpg"
srcset="hero-480.webp 480w, hero-768.webp 768w, hero-1200.webp 1200w, hero-1920.webp 1920w"
sizes="100vw" width="1920" height="1080" alt="...">สำหรับรูปในบทความ ให้ตั้ง sizes ตามความกว้างจริง เช่น sizes="(max-width: 840px) 100vw, 800px" ใส่ width และ height เสมอ เพื่อให้เบราว์เซอร์จองพื้นที่ไว้และหน้าไม่กระโดด
เมื่อทำครบแล้ว เพิ่มคำแนะนำเรื่อง lazy loading และการบีบอัดในวิธีทำให้รูปโหลดเร็วขึ้น ส่วนของรูปภาพในคะแนนประสิทธิภาพก็แทบจะเต็มแล้ว