Responsive images & preload

เมื่อความต้องการในการใช้งาน images ใน website ของแต่ละ device นั้นแตกต่างกัน นอกจาก UX/UI ที่ต้องคำนึงถึงแล้ว perfomance ของ web นั้นก็เป็นสิ่งสำคัญ เพื่อให้ได้ทั้งการทำงานที่รวดเร็วและ UX/UI ที่ดี เราจึงต้องจัดการกับขนาดของภาพที่จะแสดงให้เหมาะสมกับหน้าจอต่างๆ ด้วยเช่นกัน

Responsive images คืออะไร

ปฎิเสธไม่ได้เลยว่าขนาดของภาพนั้นทำให้หน้า web นั้น load ช้าลง และยิ่งถ้าเราเขียน responsive web แน่นอนว่าภาพที่ใช้ก็จำเป็นจะต้อง support ทุก device โดยเราจำเป็นจะต้องใช้ภาพที่มีขนาดใหญ่ก่อนเพื่อความชัดเจน จึงทำให้ที่หน้าจอเล็กนั้นอาจจะต้องรับภาระไปด้วยresponsive imagesจึงน่าจะเป็นทางออกของปัญหานี้ ซึ่งจะทำโดยจะใช้ attribute srcset มาเป็นตัวกำหนดขนาดของภาพที่จะใช้ที่หน้าจอต่างๆ ทำให้แต่ละหน้าจอได้รับขนาดภาพที่เหมาะสม โดยจะมี attribute srcset ที่เพิ่มเข้ามาใน tag img ไว้สำหรับใส่ path image และ หน้าจอซึ่งจะมีสองแบบคือกำหนดโดยดูจาก Retina resolution และความกว้างของภาพค่ะ

ตัวอย่าง code แบบ Retina resolution

<img src="medium.jpg" 
     srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"    
     alt="…"
/>

ภาพตัวอย่าง Retina resolution : https://www.smashingmagazine.com/2015/05/retina-design-in-photoshop/

จาก code รูปจะ support ภาพดังนี้ small.jpg จะแสดงที่ หน้าจอปกติ (หน้าจอ laptop) ภาพ medium.jpg แสดงที่หน้าจอมือถือ 2x และ large.jpg แสดงที่หน้าจอมือถือขนาด 3x นั่นเอง

ตัวอย่าง code แบบ ความกว้างของภาพ

<img src="medium.jpg" 
     srcset="small.jpg 300w, medium.jpg 500w, large.jpg 750w"    
     alt="…" 
/>

จาก code รูป w values จะแสดงความกว้างของรูปแต่ละรูปในหน่วย pixel ตัวอย่างเช่น small.jpg 300w คือการบอก browser ว่าภาพ small นั้นมีขนาดกว้าง 300px ซึ่ง browser จะเป็นคนเลือกการแสดงรูปภาพตามรูปแบบหน้าจอและ viewport โดยที่จะไม่ download ขนาดอื่นๆ มา ดูตัวอย่างได้ที่ http://srcset.salcode.com/ (แนะนำให้ดูจากหน้าจอเล็กไปใหญ่นะ)

ส่วน srcนั้นเราจะใส่กันไว้สำหรับ browser ที่ไม่รองรับ srcset นั่นเองค่ะ

นอกจาก srcset attribute แล้ว ยังมี size attribute ที่จะใช้ในการเลือกภาพ ซึ่งส่วนนี้ค่อนข้างจะเข้าใจยากเหมือนกันค่ะ แต่มีเพื่อเป็นส่วนเสริมและเป็นทางเลือกมากขึ้น

<img src="medium.jpg" 
     srcset="small.jpg 300w, medium.jpg 500w, large.jpg 750w"    
     alt="…" 
     sizes="(min-width: 960px) 540px, 100vw" />

จาก code ถ้า viewport กว้างตั้งแต่ 960px ขึ้นไป จะแสดงภาพขนาด 540px ซึ่งแม้ว่าเราจะไม่มีภาพขนาด 540px browser ก็จะไปเลือกขนาดจาก srcset ที่มีขนาดกว้างกว่าขึ้นไปมาแสดงค่ะ (ในที่นี้จะเลือกขนาด large.jpg มาแสดง)

แต่ถ้า viewport น้อยกว่า 960px จะแสดงภาพเท่าขนาด viewport (100vw = 100% ของหน้าจอนั่นเอง)

ในความเห็นส่วนตัวเราคิดว่าใช้แค่ srcset อย่างเดียวก็น่าจะเอาอยู่ แต่ถ้าหากจะลงลึกไปถึง size แล้วเรายังไม่เจอเคสที่จำเป็นที่จะใช้ ณ ตอนนี้ค่ะ

รู้จักกับ Preload

rel="preload"

คำสั่งนี้จะเป็นคำสั่งที่จะบอก browser ว่าเราต้องการ load source file นี้ไวที่สุดเท่าที่จะทำได้ เป็น file ที่เราอยากจะให้ browser load มาก่อน สามารถใช้ได้กับ script, style, font, image ฯลฯ ตัวอย่างเช่น เราต้องการให้ font ถูกโหลดมากก่อน css เป็นต้น

ภาพการ load แบบปกติ

ภาพจะการเขียนโดยใช้ preload (<link rel="preload" href="Pacifico-Bold.woff2" as="font" type="font/woff2" />)

Responsive images + preload

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

สำหรับบทความนี้ต้องขอจบไว้แต่เพียงเท่านี้ก่อนนะคะ เราได้แปะ link reference เพิ่มเติมไว้ด้านล่างแล้วค่ะ สามารถ comment แลกเปลี่ยนกันได้เลยนะคะ (hny 2021 🤗)

Responsive Images - The srcset and sizes Attributes

Responsive images using `srcset`

Preloading responsive images

Responsive images with srcset and sizes

Optimizing CSS for faster page loads

Preload critical assets to improve loading speed