HTML Academy · บทเรียน

รูปภาพแบบปรับตามหน้าจอด้วย srcset และ sizes

ส่งรูปภาพที่มีขนาดเหมาะสมสำหรับความหนาแน่นของหน้าจอแต่ละแบบ

รูปภาพแบบปรับตามหน้าจอด้วย srcset และ sizes เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปัญหาของการใช้รูปภาพเดียว

การส่งรูปภาพขนาดใหญ่เพียงรูปเดียวให้กับอุปกรณ์ทุกเครื่องทำให้แบนด์วิดท์บนหน้าจอขนาดเล็กสูญเปล่า:

โทรศัพท์ที่มีหน้าจอกว้าง 390 พิกเซลไม่จำเป็นต้องใช้รูปภาพขนาด 2400 พิกเซล
จอภาพ 4K ควรได้รับรูปภาพความละเอียดสูงกว่า 96 จุดต่อนิ้ว
รูปภาพแบบตอบสนองจะส่งรูปภาพที่เหมาะสมให้กับหน้าจอที่เหมาะสม

แอตทริบิวต์รายการแหล่งรูปภาพ

srcset จัดเตรียมรายการแหล่งที่มาของรูปภาพพร้อมความกว้างของแต่ละรายการ:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

ตัวบอกความหนาแน่นของพิกเซล

ใช้ตัวบอก 1x, 2x และ 3x สำหรับรูปภาพขนาดคงที่ที่มีความละเอียดต่างกัน:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

แอตทริบิวต์ขนาด

sizes บอกเบราว์เซอร์ว่ารูปภาพจะแสดงกว้างเท่าใดในขนาดพื้นที่แสดงผลต่าง ๆ:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

เบราว์เซอร์เลือกรูปภาพอย่างไร

เบราว์เซอร์จะคำนวณ: ค่าขนาด × อัตราส่วนพิกเซลของอุปกรณ์ เพื่อเลือกจาก srcset:

พื้นที่แสดงผลกว้าง 600px, DPR 2×, size=100vw → ต้องใช้รูปภาพกว้าง 1200px → เลือก 1600w
พื้นที่แสดงผลกว้าง 1200px, DPR 1×, size=50vw → ต้องใช้รูปภาพกว้าง 600px → เลือก 800w
เมื่อโหลดแล้ว เบราว์เซอร์จะเก็บไว้ในแคชและอาจไม่โหลดใหม่

ค่าขนาดเริ่มต้น

หากไม่มี sizes เบราว์เซอร์จะถือว่ารูปภาพใช้ความกว้างเต็มพื้นที่แสดงผล (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

ตัวบอกความกว้างกับตัวบอกความหนาแน่นของพิกเซล

โหมดของ srcset มีสองแบบ:

ตัวบอกความกว้าง — ใช้ร่วมกับ sizes เพื่อเลือกแบบยืดหยุ่นตามเค้าโครง
ตัวบอกความหนาแน่นของพิกเซล — ใช้กับรูปภาพขนาดคงที่ที่มีความละเอียดหลายระดับ

ใช้ตัวบอกความกว้างสำหรับรูปภาพแบบตอบสนองส่วนใหญ่ ใช้ตัวบอกความหนาแน่นของพิกเซลสำหรับไอคอน โลโก้ และองค์ประกอบขนาดคงที่

การสร้างไฟล์รายการแหล่งรูปภาพ

เครื่องมือสำหรับสร้างรูปภาพหลายรูปแบบที่ตอบสนอง:

ชาร์ป (Node.js) — ปรับขนาดรูปภาพด้วยโปรแกรม
สควิช — ทำงานบนเบราว์เซอร์และเปรียบเทียบภาพได้
คลาวด์ินารี / อิมจิกซ์ — ปรับขนาดตามคำขอโดยใช้ที่อยู่เว็บ
ปลั๊กอินของเว็บแพ็ก / วีต — สร้างไฟล์ระหว่างการสร้างโปรเจกต์

รายการแหล่งรูปภาพร่วมกับ WebP และทางเลือกสำรอง

ใช้ srcset ร่วมกับ <picture> เพื่อสร้างทางเลือกสำรองของรูปแบบไฟล์:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

การกำหนดภาพกับการสลับความละเอียด

ปัญหาของรูปภาพแบบตอบสนองมีสองประเภท:

การสลับความละเอียด — รูปภาพเดียวกันแต่มีความละเอียดต่างกัน → ใช้ srcset + sizes
การกำหนดภาพ — ตัดภาพหรือจัดองค์ประกอบต่างกันในหน้าจอต่าง ๆ → ใช้ <picture> ร่วมกับ <source media>

การทดสอบรูปภาพแบบตอบสนอง

วิธีตรวจสอบว่า srcset ทำงานอยู่:

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

การรองรับรายการแหล่งรูปภาพของเบราว์เซอร์

การรองรับ srcset ในเบราว์เซอร์อยู่ในระดับดีเยี่ยม:

เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ (โครม, ไฟร์ฟอกซ์, ซาฟารี, เอดจ์)
ทางเลือกสำรองจาก src รองรับเบราว์เซอร์รุ่นเก่า
ไม่จำเป็นต้องใช้โพลีฟิลล์สำหรับการใช้งานจริง

ตรวจสอบอย่างรวดเร็ว

แอตทริบิวต์ขนาดบอกอะไรกับเบราว์เซอร์

สรุป: รายการแหล่งรูปภาพและขนาด

สิ่งสำคัญของรูปภาพแบบตอบสนอง:

srcset — รายการไฟล์รูปภาพพร้อมความกว้างจริงหรือความหนาแน่นของพิกเซล
sizes — เงื่อนไขสื่อที่อธิบายว่ารูปภาพจะแสดงกว้างเท่าใด
เบราว์เซอร์จะเลือกตัวเลือกที่เหมาะสมที่สุด: ค่าขนาด × DPR ของอุปกรณ์
ใช้ตัวบอกความกว้าง (w) สำหรับรูปภาพแบบยืดหยุ่น และใช้ x สำหรับองค์ประกอบขนาดคงที่
ระบุ src เป็นทางเลือกสำรองเสมอ

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

บทเรียน “รูปภาพแบบปรับตามหน้าจอด้วย srcset และ sizes” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รูปภาพแบบปรับตามหน้าจอด้วย srcset และ sizes” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รูปภาพแบบปรับตามหน้าจอด้วย srcset และ sizes”

ส่งรูปภาพที่มีขนาดเหมาะสมสำหรับความหนาแน่นของหน้าจอแต่ละแบบ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “รูปภาพแบบปรับตามหน้าจอด้วย srcset และ sizes” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

องค์ประกอบ img: src, alt, width และ height
รูปภาพแบบปรับตามหน้าจอด้วย srcset และ sizes
องค์ประกอบ picture สำหรับการกำกับงานศิลป์
figure และ figcaption

← กลับไปที่ HTML Academy