รูปภาพสำหรับ Retina Display: แสดงกราฟิกคมชัดบนหน้าจอ High-DPI

อัปเดตล่าสุด: June 28, 2026

จอ Retina และจอภาพความละเอียดสูง (high-DPI) บีบพิกเซลจำนวนมากขึ้นในพื้นที่ทางกายภาพเดียวกัน ดังนั้นรูปภาพที่ปรับขนาดสำหรับหน้าจอมาตรฐานจึงดูนุ่มและเป็นพิกเซลบนจอเหล่านี้ การแสดงรูปภาพที่คมชัดบนจอเหล่านี้หมายถึงการเตรียมเวอร์ชันความละเอียดสูงขึ้นและการบอกให้เบราว์เซอร์ทราบว่าจะใช้เมื่อใด คู่มือนี้ครอบคลุมขั้นตอนการทำงานแบบ 2x และ 3x, การทำเครื่องหมาย srcset ที่ส่งมอบไฟล์ที่ถูกต้อง, และความสมดุลระหว่างความคมชัดกับน้ำหนักของหน้าเว็บ

คำตอบสั้นๆ: จะทำให้รูปภาพคมชัดบนจอ Retina ได้อย่างไร?

ให้สร้างเวอร์ชันของรูปภาพที่มีขนาดพิกเซลแสดงผลเป็นสองเท่า (และสำหรับโทรศัพท์ ควรเป็นสามเท่า) จากนั้นใช้แอตทริบิวต์ srcset เพื่อเสนอทั้งสองเวอร์ชัน เบราว์เซอร์จะโหลดไฟล์ความละเอียดสูงเฉพาะบนหน้าจอที่สามารถแสดงผลได้เท่านั้น ดังนั้นหน้าจอมาตรฐานจึงไม่ดาวน์โหลดข้อมูลส่วนเกินเหล่านั้น รูปภาพที่แสดงผลกว้าง 400 pixels จำเป็นต้องมีแหล่งที่มาขนาด 800-pixels (2x) สำหรับจอ Retina ส่งออกทั้งสองเวอร์ชันด้วยการบีบอัดที่เหมาะสม — ไฟล์ 2x จะมีขนาดใหญ่กว่าแต่ไม่เป็นสองเท่า เพราะประสิทธิภาพในการบีบอัดจะดีขึ้นตามความละเอียด

หน้าที่ว่า "retina" หรือหน้าจอความละเอียดสูง (high-DPI) คืออะไร?

หน้าจอ retina เป็นคำศัพท์ทางการตลาดสำหรับหน้าจอที่มีความหนาแน่นของพิกเซลสูงพอที่ตาจะไม่สามารถแยกแยะพิกเซลแต่ละตัวได้ในระยะการมองปกติ Apple เป็นผู้บัญญัติคำนี้ แต่แนวคิดดังกล่าวใช้ได้กับโทรศัพท์ แท็บเล็ต และแล็ปท็อปสมัยใหม่ส่วนใหญ่ การวัดค่าเชิงปฏิบัติคือ device pixel ratio (DPR) ซึ่งระบุว่าพิกเซลทางกายภาพจำนวนเท่าใดที่แทนด้วย CSS pixel หนึ่งตัว

• หน้าจอ 2x ต้องการพิกเซลเชิงเส้นเป็นสองเท่า (รวมทั้งหมดสี่เท่า) เพื่อให้ดูคมชัด
• หน้าจอโทรศัพท์ 3x ต้องการพิกเซลเชิงเส้นสามเท่า
• หน้าจอมาตรฐาน 1x จะดาวน์โหลดภาพพื้นฐานและไม่สูญเปล่าใด ๆ

บทความ Mozilla guide to device pixel ratio ได้บันทึกวิธีการที่เบราว์เซอร์รายงานและใช้ DPR ซึ่งเป็นพื้นฐานของกลยุทธ์ภาพ retina ทุกรูปแบบ

ต้องสร้างเวอร์ชันรูปภาพ 2x และ 3x อย่างไร?

ให้เริ่มต้นจากแหล่งที่มาที่มีความละเอียดสูง แล้ว เครื่องมือปรับขนาดภาพ ลงไปยังแต่ละเป้าหมาย แทนที่จะทำการ upscaling ไฟล์ขนาดเล็ก รูปภาพที่ตั้งใจใช้สำหรับช่องแสดงผลกว้าง 400-pixel จำเป็นต้องมีเวอร์ชัน 400px (1x), 800px (2x), และ 1200px (3x) สำหรับโทรศัพท์มือถือ

1. เริ่มต้นจากแหล่งที่มาที่มีขนาดใหญ่พออย่างน้อยเท่ากับเป้าหมายที่ใหญ่ที่สุดของคุณ (3x)
2. เครื่องมือปรับขนาดภาพ ให้เหลือความกว้างที่ 1x, 2x และ 3x
3. เครื่องมือบีบอัดภาพ แต่ละเวอร์ชัน — ไฟล์ 2x และ 3x จะบีบอัดได้ดีกว่าต่อพิกเซล
4. ส่งออกเป็น WebP เพื่อให้ได้ไฟล์คุณภาพสูงที่มีขนาดเล็กที่สุด
5. ให้บริการทุกเวอร์ชันและปล่อยให้เบราว์เซอร์เลือก

• ห้าม upscale รูปภาพขนาดเล็กเป็น 2x เด็ดขาด — เพราะมันจะยังดูนุ่มและมีน้ำหนักเพิ่มขึ้นเท่านั้น
• โดยปกติแล้ว ไฟล์ 2x จะมีขนาดไบต์น้อยกว่าสองเท่าของไฟล์ 1x เนื่องจากมีการบีบอัดที่ดีกว่า
• เวอร์ชัน 3x มีความสำคัญที่สุดสำหรับโทรศัพท์ที่มีหน้าจอเล็กและมีความหนาแน่นสูง

จะเสิร์ฟเวอร์ชันที่เหมาะสมด้วย srcset ได้อย่างไร?

แอตทริบิวต์ srcset บนแท็ก <img> จะบอกเบราว์เซอร์ว่าควรโหลดไฟล์ใดโดยอิงตาม DPR ของหน้าจอ เบราว์เซอร์จะจัดการการเลือกเอง ดังนั้นคุณจึงเพียงแค่ระบุตัวเลือกและโครงสร้างโค้ดเท่านั้น

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Descriptive alt text"
  width="400" height="300"
/>

• คำอธิบาย 1x, 2x, 3x จะแมปไฟล์ไปยังอัตราส่วนพิกเซลของอุปกรณ์
• เบราว์เซอร์จะโหลดเฉพาะเวอร์ชันที่ตรงกับหน้าจอเท่านั้น
• ควรระบุ width และ height เสมอเพื่อป้องกันการเลื่อนของเค้าโครง (layout shift)
• แอตทริบิวต์ src เป็นตัวสำรองสำหรับเบราว์เซอร์รุ่นเก่า

สำหรับรูปภาพที่ตอบสนอง (responsive images) ซึ่งมีการเปลี่ยนมิติในความกว้างของหน้าจอด้วย คุณควรใช้ srcset ร่วมกับแอตทริบิวต์ sizes และตัวระบุความกว้าง (400w, 800w) แทนการใช้ตัวระบุ DPR คู่กัน responsive images guide จะครอบคลุมรูปแบบที่ซับซ้อนกว่านี้ และ image SEO guide อธิบายว่ารูปภาพที่มีความคมชัดและขนาดถูกต้องช่วยเพิ่มประสิทธิภาพการค้นหาได้อย่างไร

เมื่อใดควรใช้ SVG แทน raster

สำหรับโลโก้ ไอคอน และภาพประกอบที่มีรูปทรงแบน คุณสามารถหลีกเลี่ยงปัญหา 2x/3x ทั้งหมดได้ด้วยการใช้ SVG กราฟิกเวกเตอร์สามารถขยายได้อย่างไม่จำกัดโดยไม่มีการลดทอนความละเอียด ไฟล์ SVG เดียวกันจะคมชัดมากทั้งบนจอ 1x และโทรศัพท์ 3x เพราะมันถูกวาดจากคณิตศาสตร์ ไม่ใช่เก็บเป็นพิกเซล

SVG คือคำตอบที่ถูกต้องเมื่อใดก็ตามที่ภาพประกอบด้วยรูปทรงมากกว่ารายละเอียดแบบภาพถ่าย ข้อแลกเปลี่ยนคือ SVG จำเป็นต้องได้รับการปรับให้เหมาะสม เนื่องจาก metadata ที่ไม่ได้ใช้และขยะจากโปรแกรมแก้ไขทำให้ไฟล์มีขนาดใหญ่ขึ้น และ SVG to PNG guide จะครอบคลุมขั้นตอนการทำงานเมื่อคุณจำเป็นต้องมีทางเลือกสำรองแบบ raster สำหรับสภาพแวดล้อมที่ไม่สามารถแสดงผลเวกเตอร์ได้ สำหรับเว็บไซต์แบรนด์ที่มีโลโก้ในส่วนหัว (header) การใช้ SVG จะช่วยกำจัดปัญหาเรื่องความละเอียดหน้าจอ retina ไปโดยสิ้นเชิงสำหรับองค์ประกอบนั้น

การทดสอบภาพสำหรับจอ Retina ของคุณ

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

1. เปิดหน้าเว็บบนอุปกรณ์จอ Retina หรือตั้งค่า DPR ของเบราว์เซอร์เป็น 2x ในเครื่องมือสำหรับนักพัฒนา (dev tools)
2. ตรวจสอบองค์ประกอบภาพและยืนยันว่า currentSrc ที่โหลดมาคือไฟล์ 2x หรือ 3x
3. สลับไปที่ DPR 1x และยืนยันว่ามันโหลดไฟล์ 1x แทน
4. ตรวจสอบแท็บ Network เพื่อยืนยันว่ามีการดาวน์โหลดเพียงเวอร์ชันเดียวต่อหน้าจอ
5. ดูที่ 100% บนจอ Retina และยืนยันว่าภาพคมชัด ไม่ใช่แบบนุ่ม ๆ

การตั้งค่า device pixel ratio override ใน dev tools ของเบราว์เซอร์ช่วยให้คุณทดสอบได้โดยไม่ต้องใช้อุปกรณ์จริง ถึงแม้ว่าจอ Retina จริงจะเป็นหลักฐานสุดท้ายก็ตาม รูปแบบความล้มเหลวที่พบบ่อยคือการพิมพ์ผิดใน markup ส่วน srcset ซึ่งทำให้เบราว์เซอร์ย้อนกลับไปใช้ src พื้นฐาน ทำให้ภาพดูนุ่มบนจอ Retina โดยไม่มีข้อผิดพลาดใด ๆ แท็บ Network จะจับสิ่งนี้ได้ทันที — หากคุณเห็นไฟล์ 1x โหลดบนหน้าจอ 2x แสดงว่า srcset ไม่ได้เชื่อมต่ออย่างถูกต้อง

การสร้างสมดุลระหว่างความคมชัดและน้ำหนักหน้าเว็บ

กับภาพสำหรับจอเรตินา (retina images) นั้น ข้อผิดพลาดคือการส่งไฟล์ความละเอียดสูงไปยังทุกหน้าจอ ซึ่งจะทำให้น้ำหนักของหน้าเว็บเพิ่มขึ้นเป็นสองหรือสามเท่าสำหรับผู้ใช้ที่มองไม่เห็นความแตกต่าง แนวทาง srcset สามารถหลีกเลี่ยงปัญหานี้ได้ แต่ก็ต่อเมื่อคุณสร้างเวอร์ชันที่เล็กกว่าและอ้างถึงมันจริง ๆ การส่งไฟล์ 3x เพียงไฟล์เดียวให้ทุกคนถือเป็นข้อผิดพลาดที่พบบ่อยที่สุด

web.dev guide to responsive images ได้บันทึกผลกระทบด้านประสิทธิภาพของการทำสิ่งนี้ให้ถูกต้อง และ Core Web Vitals guide เชื่อมโยงน้ำหนักของรูปภาพโดยตรงกับตัวชี้วัด LCP ที่ส่งผลต่อการจัดอันดับ เป้าหมายคือความคมชัดในจุดที่จำเป็นและมีการควบคุมในทุกส่วนอื่น ๆ — ปล่อยให้เบราว์เซอร์เลือก และสร้างทุกเวอร์ชันเพื่อให้มีสิ่งที่ดีพอให้เลือก

คำถามที่พบบ่อย

ฉันจะทำให้ภาพคมชัดบนหน้าจอ retina ได้อย่างไร?

ให้เสิร์ฟเวอร์ชัน 2x (และทางเลือกคือ 3x) ของ raster images ที่ขนาดการแสดงผล โดยใช้ srcset เพื่อให้เบราว์เซอร์เลือกไฟล์ที่เหมาะสมตามอัตราส่วนพิกเซลของอุปกรณ์ ภาพ 1x บนหน้าจอ retina จะดูนุ่มนวลกว่า ในขณะที่ตัวแปร 2x จะช่วยกู้คืนความคมชัด

ฉันจำเป็นต้องมีภาพ 2x สำหรับกราฟิกทุกชิ้นหรือไม่?

สำหรับกราฟิกที่คมชัดและภาพฮีโร่ (hero photos) จำเป็น — เพราะหน้าจอ retina จะแสดงความนุ่มนวลหากไม่ทำเช่นนั้น สำหรับภาพตกแต่งหรือภาพส่วนล่างของหน้า (below-the-fold images) ไฟล์ 1x เพียงไฟล์เดียวมักจะเพียงพอ ให้เสิร์ฟทั้งสองแบบด้วย srcset เพื่อที่อุปกรณ์ที่ไม่ใช่ retina จะไม่ดาวน์โหลดไฟล์ขนาดใหญ่

ฉันควรใช้ SVG แทน raster 2x เมื่อใด?

สำหรับโลโก้ ไอคอน และกราฟิกแบน (flat graphics) จำเป็น — เพราะ SVG เป็นรูปแบบที่อิสระจากความละเอียดและยังคงคมชัดในทุกขนาดโดยไม่มีไฟล์เพิ่มเติม สำหรับภาพถ่าย รูปแบบ raster (พร้อมตัวแปร 2x) ยังคงเป็นทางเลือกที่ถูกต้อง ดูคู่มือ SVG to PNG guide

ฉันจะเสิร์ฟเวอร์ชัน retina ได้อย่างไร?

ใช้ srcset ด้วยแหล่งข้อมูล 1x และ 2x (และทางเลือกคือ 3x) ปล่อยให้เบราว์เซอร์เลือกตามอัตราส่วนพิกเซลของอุปกรณ์ ส่งไฟล์ 1x เป็นค่าเริ่มต้น src เพื่อให้เบราว์เซอร์รุ่นเก่าสามารถทำงานได้อย่างราบรื่น เบราว์เซอร์จะดาวน์โหลดเฉพาะตัวแปรที่จำเป็นเท่านั้น

srcset ทำให้หน้าเว็บช้าลงหรือไม่?

ไม่ — เพราะเบราว์เซอร์จะดาวน์โหลดเพียงตัวแปรเดียวที่ต้องการ ดังนั้นหน้าจอขนาดเล็กก็จะได้รับไฟล์ขนาดเล็ก โดยไม่มี srcset ทุกอุปกรณ์จะต้องดาวน์โหลดไฟล์ที่ใหญ่ที่สุด srcset ช่วยประหยัดไบต์ ไม่ได้เพิ่มมัน