responsive image: ปัญหา แนวคิด...

Teerasej Jiraphatchandej User Group Manager, ThaiADC

Responsive Imageปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน

Thai Adobe Developer Community facebook.com/thaiadc

Responsive Web Design

Responsive Layout

Responsive Image

ปัญหาเรื่องรูปภาพใน Responsive Web

• ขนาดของไฟล์ภาพ

• การนำเสนอไม่สมบูรณ์

ขนาดของไฟล์ภาพ

–HTTPArchive กันยายน 2557

“ขนาดไฟล์รูปภาพคิดเป็น

62% ของไฟล์เว็บเพจที่ต้องโหลดมาที่เครื่องผู้ใช้”

edge/3G/4G/Wifi

การนำเสนอไม่สมบูรณ์

แนวคิดของ Responsive Image

• แสดงขนาดภาพได้เหมาะสมกับอุปกรณ์นั้นๆ

• ขนาดของไฟล์ภาพเหมาะสมกับการใช้งาน

• นำเสนอข้อมูลได้ครบถ้วน

เครื่องมือ• CSS

• background-image

• HTML

• <img>

• <picture>

• Javascript

• PictureFill.js

Design