ทำ Image CDN และ Responsive Images ให้เว็บโหลดไว รูปคม ไฟล์เล็ก

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

แนวทางที่ได้ผลจริงคือการทำให้รูปภาพมีคุณสมบัติ 3 อย่างพร้อมกัน ได้แก่ คมชัด, ไฟล์เล็ก, และ โหลดไว ซึ่งสามารถทำได้ด้วยการใช้ Image CDN ร่วมกับ Responsive Images ผ่าน srcset และ sizes

ทำไมการย่อรูปด้วย CSS อย่างเดียวไม่พอ

หลายคนเข้าใจว่าถ้ารูปถูกแสดงผลเล็กลงบนหน้าเว็บก็เพียงพอแล้ว แต่ในความเป็นจริง หากไฟล์ต้นฉบับมีขนาดใหญ่ เช่น 3000px แล้วนำมาแสดงเพียง 400px เบราว์เซอร์ก็ยังต้องดาวน์โหลดไฟล์ใหญ่เต็มขนาดก่อน แล้วจึงค่อยย่อเพื่อแสดงผลภายหลัง

ผลกระทบคือ:

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

ดังนั้น การลดขนาดภาพเฉพาะตอนแสดงผลจึงไม่ใช่วิธีแก้ปัญหาที่แท้จริง

Image CDN ช่วยอะไรได้บ้าง

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

Image CDN สามารถช่วยได้หลายด้าน เช่น:

• ปรับขนาดภาพตามพารามิเตอร์ใน URL เช่น ความกว้างและความสูง
• เลือกฟอร์แมตที่เหมาะกับเบราว์เซอร์อัตโนมัติ เช่น AVIF, WebP หรือ JPEG
• ตั้งค่า quality ให้สมดุลระหว่างความคมชัดและขนาดไฟล์
• ทำ caching แยกตามขนาดภาพ ลดการประมวลผลและการดาวน์โหลดซ้ำ

ตัวอย่างแนวคิดของ URL ที่ใช้งานกับหลาย CDN ได้มีลักษณะคล้ายกัน เช่น

https://img.example.com/photo.jpg?w=400&format=auto&quality=75
https://img.example.com/photo.jpg?w=800&format=auto&quality=75
https://img.example.com/photo.jpg?w=1200&format=auto&quality=75

แนวทางนี้ช่วยให้ระบบสามารถส่งภาพที่เหมาะกับแต่ละอุปกรณ์ได้โดยไม่ต้องสร้างไฟล์หลายชุดด้วยมือ

Responsive Images ด้วย srcset และ sizes

เมื่อมีภาพหลายขนาดแล้ว ขั้นตอนสำคัญต่อมาคือบอกเบราว์เซอร์ว่ามีตัวเลือกอะไรให้เลือกบ้าง ซึ่งทำได้ด้วย srcset และ sizes

• srcset ใช้ระบุรายการรูปหลายขนาด
• sizes ใช้บอกว่าในแต่ละ breakpoint รูปนี้จะถูกแสดงกว้างประมาณเท่าไร

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

ตัวอย่างโค้ดที่นำไปปรับใช้ได้ทันที:

<img
  src="https://img.example.com/hero.jpg?w=800&format=auto&quality=75"
  srcset="
    https://img.example.com/hero.jpg?w=400&format=auto&quality=75 400w,
    https://img.example.com/hero.jpg?w=800&format=auto&quality=75 800w,
    https://img.example.com/hero.jpg?w=1200&format=auto&quality=75 1200w,
    https://img.example.com/hero.jpg?w=1600&format=auto&quality=75 1600w"
  sizes="(max-width: 640px) 92vw, (max-width: 1024px) 80vw, 900px"
  width="900" height="500"
  loading="lazy" decoding="async"
  alt="ภาพแบนเนอร์" />

ข้อผิดพลาดที่พบบ่อยในการทำรูปบนเว็บ

แม้จะใช้ srcset แล้ว แต่หลายเว็บยังได้ผลลัพธ์ไม่ดี เพราะพลาดในรายละเอียดสำคัญ

1) ใส่ srcset แต่ไม่ใส่ sizes

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

2) ไม่กำหนด width และ height

การไม่ระบุ width และ height ทำให้เบราว์เซอร์ไม่สามารถจองพื้นที่ล่วงหน้าได้ เมื่อรูปโหลดเข้ามา หน้าจออาจขยับหรือเด้งจนเกิดปัญหา CLS (Cumulative Layout Shift)

3) แปลงเป็น WebP อย่างเดียว

แม้ WebP จะดี แต่ไม่ใช่คำตอบที่ดีที่สุดเสมอไป บางกรณี AVIF ให้ขนาดไฟล์เล็กกว่า หรือบางเบราว์เซอร์รองรับฟอร์แมตต่างกัน การใช้ format=auto กับ CDN จึงมักเป็นทางเลือกที่ยืดหยุ่นและเหมาะกว่า

เทคนิคเพิ่มความคมโดยไม่เพิ่มน้ำหนักมาก

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

• หากเป็นภาพถ่าย ลองเริ่มที่ quality 65-75 แล้วตรวจสอบด้วยสายตา
• หากเป็นภาพกราฟิกหรือมีตัวหนังสือ ลองใช้ PNG, WebP แบบ lossless หรือ SVG ตามลักษณะงาน
• สำหรับ thumbnail ขนาดเล็ก สามารถลด quality ลงได้มากโดยแทบไม่รู้สึกถึงความแตกต่าง

แนวคิดสำคัญคือไม่ใช้สูตรเดียวกับภาพทุกประเภท แต่ปรับให้เหมาะกับงานจริง

เช็กลิสต์ที่ทำให้เห็นผลได้ภายใน 1 วัน

หากต้องการเริ่มแบบเร็วและวัดผลได้ทันที ลองทำตามลำดับนี้

1. เลือกรูปสำคัญที่สุดบนหน้า เช่นรูป hero
2. ตั้ง Image CDN ให้รองรับอย่างน้อย 4 ขนาดมาตรฐาน เช่น 400, 800, 1200 และ 1600
3. ใส่ srcset และ sizes ให้ตรงกับลักษณะการแสดงผลจริง
4. เปิด lazy loading สำหรับรูปที่อยู่นอกเหนือโฟลด์
5. วัดผลก่อนและหลังด้วย Lighthouse โดยดูค่า LCP และ Total bytes

วิธีนี้ช่วยให้เห็นประโยชน์ได้เร็ว และสามารถขยายไปยังส่วนอื่นของเว็บต่อได้อย่างเป็นระบบ

เรื่องสำคัญที่หลายคนไม่ค่อยรู้

เบราว์เซอร์ไม่ได้เลือกรูปจาก srcset โดยดูแค่ความกว้างหน้าจอเท่านั้น แต่ยังพิจารณา DPR (Device Pixel Ratio) ด้วย เช่น หน้าจอ Retina ที่มีความละเอียด 2x หรือ 3x

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

สรุป

หากต้องการให้เว็บไซต์โหลดไวขึ้นอย่างรู้สึกได้ การจัดการรูปภาพคือหนึ่งในจุดที่คุ้มค่าที่สุด การใช้ Image CDN จะช่วยปรับขนาด บีบอัด เลือกฟอร์แมต และแคชภาพให้โดยอัตโนมัติ ส่วนการใช้ Responsive Images ผ่าน srcset และ sizes จะทำให้เบราว์เซอร์เลือกโหลดภาพที่เหมาะกับอุปกรณ์ของผู้ใช้จริง

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