HTML Tag <img> as an anti-pattern แสดง ภาพในรูปแบบ Next-Gen Formats

ก่อนที่เราจะเข้าเรื่อง img ขอข้ามไปดูเรื่อง background-img ก่อน ขอยกเหตุผลที่ จะเปลี่ยนจาก CSS background-image ไปใช้อย่างอื่นแทน

Here are a few rea­sons why using the CSS background-image prop­er­ty can be bad:

1.BAD FOR SEO

• CSS background-image จะไม่มีการรวบรวมหรือทำดัชนีโดย google
• background-image จะไม่มี tag alt=”” ซึ่งมันเป็น tag ที่เอาไว้ใส่ รายละเอียด ของรูปภาพนั่นเอง

2.BAD FOR ACCESSIBILITY

The CSS background-image prop­er­ty is not good for acces­si­bil­i­ty. Screen read­ers will ignore background-image entirely.

โปรแกรมอ่านหน้าจอ หรือ Screen Readers จะไม่อ่าน background-image

3.BAD FOR PERFORMANCE

เวลาที่เราเปิดเวปเนี่ย ในเวปก็จะมีรูปภาพใช่ไหม ซึ่งมันเป็นส่วนหนึ่งที่ทำให้เวปโหลดช้า แต่เราก็ปฎิเสธที่จะใช้มันไม่ได้

พอการทำเวป มันมาอยู่ในยุคที่เรียกว่า Responsive ปัญหาที่เด่นชัดก็คือ ไม่ว่าเราจะเปิดผ่าน Notebook หรือ Mobile มันก็ต้องโหลดไฟล์ขนาดเดียวกันหมด

บางทีเราอาจจะละเลยไม่ใส่ใจมัน แต่จะบอกว่า ทำ Responsive Web ที่ดี ไม่ได้หยุดแค่ layout ที่เปลี่ยนไปอย่างเหมาะสมเท่านั้นแต่มันต้องใช้งานได้อย่างมีประสิทธิภาพ ในสถานการณ์ต่างๆด้วย

4.BAD FOR CMS’S & CDN’S

การ add พื้นหลัง ยังดูไม่เข้ากับ ระบบจัดการหลังบ้าน จะค่อนข้างจัดการยากในระบบ Content Management Systems

SO WHEN IS IT GOOD?

ใช้ <PICTURE> สิ

ถ้าเราเปลี่ยนจาก css:background มาใช้ <picture> เราจะใช้ object-fit ซึ่งเป็น prop­er­ty ที่จะควบคุมการโชว์ของรูป ไม่ต่างจาก background-size: cover; แต่คุณจะได้รับคุณสมบัติที่ต่างกันออกมาเช่น

• SEO-friend­ly images
• Acces­si­bil­i­ty friend­ly images (just use the alt=”” property)
• Works great with CMS-gen­er­at­ed image links & CDNs
• Works great with src­set for opti­mized images
• Can use <source> for next-gen­er­a­tion image for­mats like .webp

ซึ่งไอ้ตัว PICTURE เนี่ย มันมีโครงสร้างแบบด้านล่างนี้

เป้าหมายของ Picture Element

Picture element จะให้อิสระแก่นักพัฒนาและนักออกแบบในการควบคุมรูปภาพบนเว็บสำหรับสถานการณ์ต่างๆ โดยไม่ต้องพึ่ง css หรือ javascript

Picture element ตามสเปคของ W3C ถูกกำหนดให้มีหน้าที่ดังนี้

1.ทำให้นักพัฒนาสามารถควบคุมรูปภาพที่ web browser จะแสดงผลด้วย Media Queries หรือชนิดของตัวภาพได้ (jpg,png,webp)

2.จะถูกใช้ในกรณีที่รูปภาพมีรายละเอียดหลายระดับ หรือบนเว็บไซด์แบบ Responsive ที่ต้องการแสดงรูปภาพที่แตกต่างกันตามอุปกรณ์ที่แสดงผล

วิธีการใช้งาน และ syntax ของ Picture element

<picture> เป็น container element ซึ่งเราต้องกำหนดรายละเอียดของรูปภาพด้านในอีกที

<source> คือตัวกำหนดรูปภาพ สามารถใช้ Media query หรือ size เพื่อควบคุมการแสดงผลรูปในกรณีต่างๆ

<img> จะใช้กันเหนียว เผื่อไว้สำหรับ web browser เก่าๆ ที่ยังไม่รองรับ

SERVE IMAGES IN NEXT-GEN FORMATS

next-gen formats ก็คือ WebP (นามสกุลภาพที่พัฒนาโดย Google ทำให้ขนาดของภาพลดลง)

ปัจจุบัน มี browser 2 ตัวที่ยังไม่รองรับ webp คือ browser ที่ไม่มีคนใช้แล้ว และ browser ที่ไม่ร่วมก๊วนกับชาวบ้านเขา ทำให้ตอนนี้มีคนประมาณ 78.83% ทั่วโลกใช้งาน webp ได้ (สถิติ จาก caniuse.com )

ยาวมาซะขนาดนี้ มันรองรับทุกบราวเซอร์ยังนะ

ตามนี้จ๊ะ

https://caniuse.com/#feat=picture

https://caniuse.com/#search=webp

ทุกคนพร้อมแล้ว เหลือแค่พวก Web Browser นี่แหละครับ ที่ต้องรอเวลา

Reference

The CSS background-image property as an anti-pattern

รู้จักกับ Picture Element สำหรับการสร้าง Responsive Image

object-fit