Embed Size (px)
DESCRIPTION
เรียนรู้ปัญหา แนวคิด และวิธีใช้งาน Responsive Image สำหรับ Responsive Web Design ในปัจจุบัน ที่มีความสำคัญต่อเว็บไซต์สำหรับอุปกรณ์พกพา เรียนรู้ HTML5 Picture Element ได้ที่นี่ http://nextflow.in.th/html5/picture-element-for-responsive-image/ ดูตัวอย่างการใช้ Adobe Edge Reflow CC, CSS Background Image, HTML5 Picture Element, และ PictureFill.js
Citation preview
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
ปัญหาเรื่องรูปภาพใน 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
แนวคิดของ Responsive Image
• แสดงขนาดภาพได้เหมาะสมกับอุปกรณ์นั้นๆ
• ขนาดของไฟล์ภาพเหมาะสมกับการใช้งาน
• นำเสนอข้อมูลได้ครบถ้วน
Thai Adobe Developer Community facebook.com/thaiadc
เครื่องมือ• CSS
• background-image
• HTML
• <img>
• <picture>
• Javascript
• PictureFill.js
