data: URI scheme
data: URI scheme เป็นระบบที่ทำให้เราสามารถแทนที่ข้อมูลขนาดเล็ก ด้วยการเข้ารหัสเป็นกลุ่มตัวอักษรภาษาอังกฤษในแบบ ASCII หรือ base64 ทำให้สามารถเรียกใช้ข้อมูลดังกล่าวได้โดยไม่ต้องเรียกใช้แหล่งข้อมูลจากภายนอก ซึ่งความสามารถนี้ Web Browser ทุกตัวรองรับหมด ยกเว้นเพียงเจ้าเดียวคือ Internet Explorer ที่ทำไม่ได้
Format
ตัวอย่างไฟล์รูปภาพ
http://arthuran.net/favicon.ico
การเรียกใช้งานปกติ
เมื่อใช้ data: URI scheme
ตัวอย่างการใช้จริง
ไม่เฉพาะรูปขนาดเล็กเท่านั้น รูปขนาดใหญ่ก็ทำได้ด้วย
ปกติแล้วเราไม่ค่อยเห็นการใช้งาน data: URI scheme ในเว็บ ส่วนใหญ่ใช้ระดับโปรแกรม เช่น Bookmark หรือ Search Bar ของ Firefox ที่เก็บ favicon ในแบบ data: URI ทำให้สามารถรวมข้อมูลทั้งรูปและข้อความอยู่ในไฟล์เดียว เพิ่มความสะดวกในการจัดการมากขึ้น เพราะไม่ต้องแยกเก็บไฟล์รูปไว้ต่างหาก
More Info:
Format
data:[<MIME-type>][;base64],<data>;
ตัวอย่างไฟล์รูปภาพ
การเรียกใช้งานปกติ
<img src="http://arthuran.net/favicon.ico"/>
เมื่อใช้ data: URI scheme
<img src="data:image/x-icon;base64,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AQEBAQF8l5qaQwBDmppfVRk0AQEBJyGJnZlfhCmFHQEBATsZYjeZmppDAEOampqUkXFhAQEWJXmamh6YkpB1AQGPDJCTmpqamkMAQ5qampqakhMBAQFHlJqamppfK0wBAYuMgZqampqaQwBDmpqampqSMAEBAQuAlpaWloAIAQEBOXmampqamppDAEOampqampdbEQEBFjKfZmZmeGUBAQEvepqampqamkMAQ5qampqamZZEAQEBAQEBAQEBAQEBQEuBmpqampqaQwBDmpqampqaeRcBAQEBAQEBAQEBAQEikpqampqamppDAEOampqampqWai4BAQFUAQF0igEBARSTmpqampqamkMAQ5qampqampmYBAEBj2eOLByCAQFjGJiampqampqaQwBDmpqampqamnkxAQEBXIBtZGwBARBBmpqampqamppDAEOampqampqalgmHAQEHXnkKAQEBVpOampqampqamkMAQ5qampqampqZgTUBAXMFmQ8BAT8jX5qampqampqaQwBDmpqampqampp5FQEBAQ0afgEBIJWampqampqamppDAEOampqampqampQzfwEBUUkBAQE2kpqampqampqamkMAQ5qampqampqagXueAQFwOgEBc1mXmpqampqampqaQwBDmpqampqampqakmsBAQEBAQF3aZmampqampqamppDAEOampqampqalJIOUzwBAQEBAQZ5mpqampqampqamkMAQ5qampqamoEfboYCXQEBAQGPJJaampqampqampqaQwBDmpqamppfdlgBAQEBAQEBAVBGmZqampqampqamppDAEOampqampdFVwEBAQEBAQEBKpKampqampqampqamkMAQ5qampqagVIbPj4+Pj4+PkoSgZqampqampqampqaQwBDmpqampqagZiampqampqalpiampqampqampqamppDAEOampqampqamYGBgYGBgYGZmpqampqampqampqamkMAnENDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAP////8="/>
ตัวอย่างการใช้จริง
ไม่เฉพาะรูปขนาดเล็กเท่านั้น รูปขนาดใหญ่ก็ทำได้ด้วย
ปกติแล้วเราไม่ค่อยเห็นการใช้งาน data: URI scheme ในเว็บ ส่วนใหญ่ใช้ระดับโปรแกรม เช่น Bookmark หรือ Search Bar ของ Firefox ที่เก็บ favicon ในแบบ data: URI ทำให้สามารถรวมข้อมูลทั้งรูปและข้อความอยู่ในไฟล์เดียว เพิ่มความสะดวกในการจัดการมากขึ้น เพราะไม่ต้องแยกเก็บไฟล์รูปไว้ต่างหาก
More Info:
- data: URI scheme [Wikipedia]
- data: URI Generator
- data: URI image encoder
- RFC 2397 standard [IETF]
- 1917 reads
Comments
Post new comment