Teerasej Jiraphatchandej User Group Manager, ThaiADC
Responsive Imageปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน
Thai Adobe Developer Community facebook.com/thaiadc
Responsive Web Design
Thai Adobe Developer Community facebook.com/thaiadc
Thai Adobe Developer Community facebook.com/thaiadc
Thai Adobe Developer Community facebook.com/thaiadc
Thai Adobe Developer Community facebook.com/thaiadc
Thai Adobe Developer Community facebook.com/thaiadc
ปัญหาเรื่องรูปภาพใน Responsive Web
• ขนาดของไฟล์ภาพ
• การนำเสนอไม่สมบูรณ์
–HTTPArchive กันยายน 2557
“ขนาดไฟล์รูปภาพคิดเป็น
62% ของไฟล์เว็บเพจที่ต้องโหลดมาที่เครื่องผู้ใช้”
Thai Adobe Developer Community facebook.com/thaiadc
ขนาดของไฟล์ภาพ
1 mb
Wifi
Thai Adobe Developer Community facebook.com/thaiadc
ขนาดของไฟล์ภาพ
1 mb
edge/3G/4G/Wifi
Thai Adobe Developer Community facebook.com/thaiadc
Thai Adobe Developer Community facebook.com/thaiadc
Thai Adobe Developer Community facebook.com/thaiadc
แนวคิดของ Responsive Image
• แสดงขนาดภาพได้เหมาะสมกับอุปกรณ์นั้นๆ
• ขนาดของไฟล์ภาพเหมาะสมกับการใช้งาน
• นำเสนอข้อมูลได้ครบถ้วน
Thai Adobe Developer Community facebook.com/thaiadc
เครื่องมือ• CSS
• background-image
• HTML
• <img>
• <picture>
• Javascript
• PictureFill.js