เรียนรู้ปัญหา แนวคิด และวิธีใช้งาน 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

1. Responsive Image
ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน
Teerasej Jiraphatchandej
User Group Manager, ThaiADC

2. Responsive
Web Design
Thai Adobe Developer Community
facebook.com/thaiadc

3. Thai Adobe Developer Community
facebook.com/thaiadc

4. Thai Adobe Developer Community
facebook.com/thaiadc

5. Responsive Layout
Thai Adobe Developer Community
facebook.com/thaiadc

6. Thai Adobe Developer Community
facebook.com/thaiadc

7. Responsive Image
Thai Adobe Developer Community
facebook.com/thaiadc

8. Thai Adobe Developer Community
facebook.com/thaiadc

9. ปัญหาเรื่องรูปภาพใน
Responsive Web
Thai Adobe Developer Community
facebook.com/thaiadc
• ขนาดของไฟล์ภาพ
• การนำเสนอไม่สมบูรณ์

10. ขนาดของไฟล์ภาพ
Thai Adobe Developer Community
facebook.com/thaiadc

11. “ขนาดไฟล์รูปภาพคิดเป็น
62%
ของไฟล์เว็บเพจที่ต้องโหลดมาที่เครื่องผู้ใช้”
–HTTPArchive กันยายน 2557

12. ขนาดของไฟล์ภาพ
Thai Adobe Developer Community
facebook.com/thaiadc
1 mb

13. ขนาดของไฟล์ภาพ
Thai Adobe Developer Community
facebook.com/thaiadc
1 mb

14. ขนาดของไฟล์ภาพ
Thai Adobe Developer Community
facebook.com/thaiadc
Wifi
1 mb

15. ขนาดของไฟล์ภาพ
Thai Adobe Developer Community
facebook.com/thaiadc
1 mb

16. ขนาดของไฟล์ภาพ
edge/3G/4G/Wifi
Thai Adobe Developer Community
facebook.com/thaiadc
1 mb

17. การนำเสนอไม่สมบูรณ์
Thai Adobe Developer Community
facebook.com/thaiadc

18. Thai Adobe Developer Community
facebook.com/thaiadc

19. Thai Adobe Developer Community
facebook.com/thaiadc

20. แนวคิดของ Responsive Image
• แสดงขนาดภาพได้เหมาะสมกับอุปกรณ์นั้นๆ
• ขนาดของไฟล์ภาพเหมาะสมกับการใช้งาน
• นำเสนอข้อมูลได้ครบถ้วน
Thai Adobe Developer Community
facebook.com/thaiadc

21. เครื่องมือ
Thai Adobe Developer Community
facebook.com/thaiadc
• CSS
• background-image
• HTML
• <img>
• <picture>
• Javascript
• PictureFill.js

22. Demo
Thai Adobe Developer Community
facebook.com/thaiadc