แสดงรูปภาพ responsive ด้วย HTML

แอตทริบิวต์ srcset นั้นมากับ HTML 5 ซึ่งมีประโยชน์ในการใช้กำหนดชุด URL ของรูปภาพ.

การใช้ประโยชน์นี้จะมีข้อดีแตกต่างจากการแสดงรูป responsive ด้วย CSS คือ.
ใน srcset เราสามารถกำหนด URL ของรูปภาพที่เหมาะกับขนาดหน้าจอได้หลายรูป เพื่อใช้แบนด์วิธในการดาวน์โหลดรูปอย่างเหมาะสม.
ในขณะที่การแสดงรูป responsive ด้วย CSS ในแบบเดิมๆนั้น (auto height + max width) มักจะใช้ URL รูปเพียงรายการเดียว แล้วปรับขนาดการแสดงผลให้ใหญ่หรือเล็กด้วย CSS.

ตัวอย่างการแสดงรูปภาพ responsive ด้วย CSS. คุณสามารถย่อหรือปรับขนาดเบราว์เซอร์เพื่อดูการแสดงผลของขนาดรูปภาพที่จะเปลี่ยนแปลงตาม.

img.fluid-image {
    height: auto;
    max-width: 100%;
}

<img class="fluid-image" src="https://rundiz.com/wordpress/wp-content/uploads/2022/04/responsive-screen-sizes-1024x768.jpg" alt="responsive image">

การใช้ srcset ระหว่างแท็ก <img> กับ <picture> นั้นมีความแตกต่างกันอยู่ คือ ในแท็ก <img> จะใช้กำหนดหลาย URL และแยกแต่ละ URL ด้วยขนาดของหน้าจอหรือความหนาแน่นของ pixel. ในขณะที่แท็ก <picture> นั้นจะใช้ร่วมกับแท็ก <source> และจะใช้ srcset เพียง 1 URL โดยไม่ต้องมีกำหนดขนาดหน้าจอต่อท้าย แต่จะไปกำหนดขนาดหน้าจอที่แอตทริบิวต์ media แทน.

นอกจากนี้แท็ก <img> จะมีความแตกต่างในการแสดงรูประหว่าง Google Chrome, Opera, Microsoft Edge และ Firefox, Safari คือ บน Firefox นั้น เมื่อปรับขนาดหน้าต่างแล้วรูปจะโหลดมาแสดงตามขนาดหน้าต่างที่ปรับเสมอ ในขณะที่บน Google Chrome จะแสดงเฉพาะรูปที่โหลดมาแล้วบนขนาดหน้าต่างนั้นๆ ถ้าหากหน้าต่างที่ถูกปรับใหญ่ขึ้นจึงจะโหลด URL ใหม่ที่ตรงตามกำหนด แต่ถ้าปรับเล็กลงก็จะแสดงรูปจาก URL เดิม.
แต่ว่าแท็ก <picture> นั้นทางเบราว์เซอร์ทุกยี่ห้อจะนำภาพที่เหมาะกับขนาดหน้าต่างนั้นๆมาแสดงใหม่เสมอ ทำให้แท็กนี้เหมาะสำหรับการแสดงผลใน layout ที่มีความหลากหลายมากกว่า.
ทั้งหมดนี้ขอให้ทดลองได้จากตัวอย่างบน codepen ในลิ้งค์ด้านล่าง.

<img>

ตัวอย่างการแสดงรูป responsive ด้วยแท็ก <img>.

<img 
    srcset="https://dummyimage.com/200x100/eeeeee/999999 200w,
        https://dummyimage.com/300x150/eeeeee/999999 300w,
        https://dummyimage.com/600x300/eeeeee/999999 600w,
        https://dummyimage.com/800x400/eeeeee/999999 800w,
        https://dummyimage.com/1000x500/eeeeee/999999 1000w,
        https://dummyimage.com/1200x600/eeeeee/999999 1200w"
    sizes="(min-width: 1265px) 1200px,
        (min-width: 1060px) 1000px,
        (min-width: 860px) 800px,
        (min-width: 650px) 600px,
        (min-width: 350px) 300px,
        200px"
    src="https://dummyimage.com/200x100/eeeeee/999999"
    alt="dummy image">

จากด้านบน จะใช้ URL ของรูปที่เล็กที่สุดมาแสดงก่อน คือขนาด 200×100 โดย 200w คือขนาดความกว้างของรูป. จากนั้นก็ใช้เครื่องหมายจุลภาค (,) เพื่อเพิ่มรายการ URL แล้วไล่ลำดับรูปที่ใหญ่ขึ้นมาทีละน้อย.

แอตทริบิวต์ sizes จะทำหน้าที่เหมือนกันกับ CSS media queries โดยจากตัวอย่างจะกำหนดขนาดแสดงผลจากหน้าจอที่เล็กที่สุด (min-width) แล้วตามด้วยขนาดของรูปในหน่วย pixel (px) ที่จะแสดงผล. ตัวอย่าง (min-width: 1265px) 1200px คือขนาดหน้าจออย่างน้อย 1265 pixels จะแสดงรูปที่ความกว้าง 1200 pixels. การกำหนดลำดับขนาดนี้ ถ้าใช้ min-width ล้วน ก็จะเป็นการไล่จากใหญ่ไปเล็กจะทำให้เข้าใจง่ายกว่า และขนาดสุดท้าย 200 pixels คือขนาดแสดงรูปที่เล็กที่สุด.

ดูตัวอย่างการทำงานได้บน codepen.

<picture>

ตัวอย่างการแสดงรูป responsive ด้วยแท็ก <picture>.

<picture>
    <source media="(min-width: 1265px)" srcset="https://dummyimage.com/1200x600/eeeeee/999999">
    <source media="(min-width: 1060px)" srcset="https://dummyimage.com/1000x500/eeeeee/999999">
    <source media="(min-width: 860px)" srcset="https://dummyimage.com/800x400/eeeeee/999999">
    <source media="(min-width: 650px)" srcset="https://dummyimage.com/600x300/eeeeee/999999">
    <source media="(min-width: 350px)" srcset="https://dummyimage.com/300x150/eeeeee/999999">
    <img src="https://dummyimage.com/200x100/eeeeee/999999" alt="dummy image">
</picture>

แท็ก <picture> นี้จะใช้การแสดงรูปจากแท็กย่อย <source> ซึ่งกำหนด URL ของรูปด้วยแอตทริบิวต์ srcset และกำหนดขนาดหน้าจอที่จะแสดงรูปนั้นด้วยแอตทริบิวต์ media.

ดูตัวอย่างการทำงานได้บน codepen.