Responsive Image: ปัญหา แนวคิด...
-
Upload
teerasej-jiraphatchandej -
Category
Design
-
view
253 -
download
1
description
Transcript of Responsive Image: ปัญหา แนวคิด...
![Page 1: Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)](https://reader035.fdocument.pub/reader035/viewer/2022062419/5584e312d8b42ad73a8b517f/html5/thumbnails/1.jpg)
Teerasej Jiraphatchandej User Group Manager, ThaiADC
Responsive Imageปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน
![Page 2: Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)](https://reader035.fdocument.pub/reader035/viewer/2022062419/5584e312d8b42ad73a8b517f/html5/thumbnails/2.jpg)
Thai Adobe Developer Community facebook.com/thaiadc
Responsive Web Design
![Page 9: Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)](https://reader035.fdocument.pub/reader035/viewer/2022062419/5584e312d8b42ad73a8b517f/html5/thumbnails/9.jpg)
Thai Adobe Developer Community facebook.com/thaiadc
ปัญหาเรื่องรูปภาพใน Responsive Web
• ขนาดของไฟล์ภาพ
• การนำเสนอไม่สมบูรณ์
![Page 11: Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)](https://reader035.fdocument.pub/reader035/viewer/2022062419/5584e312d8b42ad73a8b517f/html5/thumbnails/11.jpg)
–HTTPArchive กันยายน 2557
“ขนาดไฟล์รูปภาพคิดเป็น
62% ของไฟล์เว็บเพจที่ต้องโหลดมาที่เครื่องผู้ใช้”
![Page 14: Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)](https://reader035.fdocument.pub/reader035/viewer/2022062419/5584e312d8b42ad73a8b517f/html5/thumbnails/14.jpg)
Thai Adobe Developer Community facebook.com/thaiadc
ขนาดของไฟล์ภาพ
1 mb
Wifi
![Page 16: Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)](https://reader035.fdocument.pub/reader035/viewer/2022062419/5584e312d8b42ad73a8b517f/html5/thumbnails/16.jpg)
Thai Adobe Developer Community facebook.com/thaiadc
ขนาดของไฟล์ภาพ
1 mb
edge/3G/4G/Wifi
![Page 20: Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)](https://reader035.fdocument.pub/reader035/viewer/2022062419/5584e312d8b42ad73a8b517f/html5/thumbnails/20.jpg)
Thai Adobe Developer Community facebook.com/thaiadc
แนวคิดของ Responsive Image
• แสดงขนาดภาพได้เหมาะสมกับอุปกรณ์นั้นๆ
• ขนาดของไฟล์ภาพเหมาะสมกับการใช้งาน
• นำเสนอข้อมูลได้ครบถ้วน
![Page 21: Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)](https://reader035.fdocument.pub/reader035/viewer/2022062419/5584e312d8b42ad73a8b517f/html5/thumbnails/21.jpg)
Thai Adobe Developer Community facebook.com/thaiadc
เครื่องมือ• CSS
• background-image
• HTML
• <img>
• <picture>
• Javascript
• PictureFill.js