Data URI scheme
ãÂÂã¼ã¿URIã¹ãÂÂã¼ã ï¼Âè±èªÂ: data URI schemeï¼Âã¨ã¯ãÂÂãÂÂãÂÂãÂÂãÂÂå¤Âé¨ãªã½ã¼ã¹ãÂÂèªÂã¿込ãÂÂã®ã¨åÂÂãÂÂãÂÂãÂÂã«ãÂÂã¦ã§ãÂÂãÂÂã¼ã¸ã«ã¤ã³ã©ã¤ã³ã«ãÂÂã¼ã¿ãÂÂÃ¥ÂÂãÂÂãÂÂãÂÂæÂÂ段ãÂÂæÂÂä¾ÂãÂÂãÂÂURIã¹ãÂÂã¼ã ã§ãÂÂãÂÂãÂÂãÂÂã¡ã¤ã«ãªãÂÂã©ã«ãÂÂãÂÂãÂÂãÂÂã¯ãÂÂã¢ãÂÂãÂÂãÂ¥ã¡ã³ãÂÂã®ä¸Âå½¢æ Âã§ãÂÂãÂÂãÂÂãÂÂã®æÂÂè¡ÂãÂÂå©ç¨ãÂÂãÂÂãÂÂã¨ã§ãÂÂéÂÂ常ã¯åÂ¥ã®ãÂÂã¼ã¿ã«åÂÂãÂÂãÂÂã¦ãÂÂãÂÂçÂȌÂÂãÂÂã¹ã¿ã¤ã«ã·ã¼ãÂÂãªã©ã®è¦Âç´ ãÂÂãÂÂ1ã¤ã®HTTPãªã¯ã¨ã¹ãÂÂã«ãÂÂã£ã¦èªÂã¿込ãÂÂãÂÂã¨ãÂÂå¯è½ã«ãªãÂÂãÂÂãÂÂãÂÂã«ãÂÂãÂÂãÂÂHTTPãªã¯ã¨ã¹ãÂÂæ°ãÂÂÃ¥ÂÂæ¸ÂãÂÂãÂÂãÂÂãÂÂã¼ã¿ã®転éÂÂå¹çÂÂãÂÂæ¹åÂÂãÂÂãÂÂãÂÂå¯è½æ§ãÂÂãÂÂãÂÂ[1]ãÂÂã¾ãÂÂãÂÂä¸Âé¨ã®ãÂÂã©ã¦ã¶æ¡張æ©Âè½ã§ãÂÂãÂÂçÂȌÂÂãªã©ã®ã³ã³ãÂÂã³ãÂÂãÂÂÃ¥ÂÂä¸Âã®HTMLãÂÂã¡ã¤ã«å ã«ãÂÂãÂÂã±ã¼ã¸ã³ã°ãÂÂã¦ã¦ã¼ã¶ã¼ã«å±ÂãÂÂãÂÂãÂÂãÂÂã«å©ç¨ãÂÂãÂÂã¦ãÂÂãÂÂ[2][3]ãÂÂ2018å¹´ç¾å¨[update]ãÂÂãÂÂã¼ã¿URIã¯主è¦ÂãªãÂȋ¨ãÂÂã©ã®ãÂÂã©ã¦ã¶ã§å®Âå ¨ã«ãµãÂÂã¼ãÂÂãÂÂãÂÂã¦ãÂÂãÂÂãÂÂãÂÂã ãÂÂãÂÂInternet Explorerã¨Microsoft Edgeã§ã¯ãÂÂä¸Âé¨ã®æ©Âè½ãÂÂå®Â裠ãÂÂãÂÂã¦ãÂÂãªãÂÂ[4]ãÂÂ
ãÂÂã«ãµãÂÂã¼ãÂÂãÂÂãÂÂãÂÂãÂÂã©ã¦ã¶ã§ã¯ãÂÂJavaScriptã§çÂÂæÂÂãÂÂãÂÂãÂÂã³ã³ãÂÂã³ãÂÂã§ãÂÂã£ã¦ãÂÂwindow.location.hrefã«å¤ãÂÂè¨Âå®ÂãÂÂãÂÂãÂÂã¨ã§éÂÂ常ã®å¤Âé¨ãÂÂã¡ã¤ã«ã¨åÂÂæ§Âã«ãÂÂãÂÂã¦ã³ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂãÂÂãÂÂã¨ãÂÂã§ãÂÂãÂÂãÂÂ
2018å¹´ã«ã¯ãÂÂWHATWGã®Fetch Standardã§æ¹ãÂÂã¦å®Â義ãÂÂãªãÂÂãÂÂãÂÂãÂÂã¨ã¨ãªã£ãÂÂ[5]ãÂÂ
é·æÂÂ
- ãÂÂã¼ã¿ãÂÂãÂÂãÂÂã¹ãÂÂå½¢å¼Âã§åÂÂãÂÂè¾¼ãÂÂã®ã§HTTPãªã¯ã¨ã¹ãÂÂãÂÂãÂÂãÂÂãÂÂã®ãÂÂã©ãÂÂã£ãÂÂã¯ãÂÂä½Âæ¸Âã§ãÂÂãÂÂãÂÂãÂÂã¼ã¿ã«ãÂÂã£ã¦ã¯ãÂÂã®ã¾ã¾åÂÂãÂÂè¾¼ãÂÂãÂÂã¨ãÂÂã§ãÂÂãªãÂÂãÂÂãÂÂã¨ã³ã³ã¼ãÂÂã®ãÂÂãÂÂã®ãªã¼ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂèµ·ãÂÂãÂÂï¼Âä¾ÂãÂÂã°ãÂÂ600ãÂÂã¤ãÂÂã®ãÂÂã¼ã¿ãÂÂãÂÂã¼ã¿URIã¹ãÂÂã¼ã ã§åÂÂãÂÂè¾¼ãÂÂå ´åÂÂãÂÂBase64ã§ã¨ã³ã³ã¼ãÂÂãÂÂãÂÂç´Â800ãÂÂã¤ãÂÂã«ãªãÂÂãÂÂ200ãÂÂã¤ãÂÂãÂȋ©ãÂÂã¼ã¿éÂÂã¯å¢ÂãÂÂãÂÂï¼ÂãÂÂãÂÂãÂÂãÂÂã§ãÂÂãÂÂã©ãÂÂã£ãÂÂã¯ãÂÂ軽æ¸Âã§ãÂÂãÂÂäºÂã®æ¹ãÂÂæÂÂç¨ã§ãÂÂãÂÂãÂÂ
- å°ÂãÂÂãªãÂÂã¡ã¤ã«ãÂÂå¤Âæ°転éÂÂãÂÂãÂÂãÂÂãÂÂãÂÂãÂÂã¼ã¿URIã¹ãÂÂã¼ã ãÂÂ使ã£ãÂÂæ¹ãÂÂé«ÂéÂÂã§ãÂÂãÂÂãÂÂTCPã®ãÂÂã¡ã¤ã«転éÂÂã«ã¯ã¹ãÂÂã¼ã¹ã¿ã¼ãÂÂã®ä»ÂçµÂã¿ãÂÂæ¡ç¨ãÂÂãÂÂã¦ãÂÂãÂÂãÂÂå°ÂãÂÂãªãÂÂã¡ã¤ã«1ã¤1ã¤ãÂÂTCPã³ãÂÂã¯ã·ã§ã³ãÂÂè¦Âæ±ÂãÂÂãÂÂå ´åÂÂãÂÂ転éÂÂéÂÂ度ã¯ã©ã¦ã³ãÂÂãÂÂãªãÂÂãÂÂã¿ã¤ã ãÂÂ帯åÂÂå¹ ã«å¿ÂãÂÂã¦å¶éÂÂãÂÂãÂÂãÂÂãÂÂï¼ÂãÂÂã ãÂÂãÂÂHTTP/1.1ã§è¦Âå®ÂãÂÂãÂÂãÂÂæÂÂç¶ÂçÂÂæ¥綠(Keep alive)ãÂÂæÂÂå¹ã§ãÂÂã£ãÂÂãÂÂãÂÂHTTP/2ãÂÂ使ç¨ãÂÂã¦ãÂÂãÂÂãÂÂãÂÂãÂÂå ´åÂÂãÂÂãÂÂã®é·æÂÂã¯価å¤ãÂÂä¸ÂãÂÂãÂÂãÂÂï¼Â
- HTTPSãÂÂ使ç¨ãÂÂãÂÂã¦ã§ãÂÂãÂÂã¼ã¸ãÂÂé²覧ãÂÂãÂÂå ´åÂÂãÂÂãÂÂã©ã¦ã¶ã¯ãÂÂã¼ã¸å ã§çºçÂÂãÂÂãÂÂå ¨ã¦ã®ãÂÂã¦ã³ãÂÂã¼ãÂÂã«対ãÂÂã¦ãÂȋÂÂãÂ¥ã¢ãªæÂ¥ç¶ÂãÂÂè¦Âæ±ÂãÂÂãÂÂãÂÂãÂÂä¸Âé¨ãÂȋÂÂãÂ¥ãªãÂÂã£ã§å®ÂãÂÂãÂÂã¦ãÂÂãªãÂÂè¦Âç´ ãÂÂãÂÂãÂÂãÂÂã¨ãÂÂã¦ã¼ã¶ã«è¦åÂÂãÂÂãÂÂãÂÂãµã¼ãÂÂã¼ã®è¨Âå®Âã«ãÂÂã¹ãÂÂãÂÂã£ãÂÂå ´åÂÂãÂÂéÂÂ常ã®HTTPãªã¯ã¨ã¹ãÂÂã«æ¯Âã¹ã¦HTTPSã®ãªã¯ã¨ã¹ãÂÂã¯大ãÂÂãªãªã¼ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂçºçÂÂãÂÂãÂÂãÂÂãÂÂã¼ã¿URIã¹ãÂÂã¼ã ã«ãÂÂãÂÂå ¨ã¦ã®ãÂÂã¡ã¤ã«ãÂÂ1ã¤ã«ã¾ã¨ãÂÂãÂÂãÂÂã¨ãÂÂã§ãÂÂãÂÂã°ãÂÂã®ãÂÂãÂÂãªå¿Âé Âã¯ãÂÂãªãÂÂã¦ãÂÂãÂÂãÂÂãÂÂ
- å¤ÂãÂÂã®ãÂÂã©ã¦ã¶ã¯1ã¤ã®ãÂÂã¡ã¤ã³åÂÂã«対ãÂÂãÂÂæÂ¥ç¶Âæ°ã«éÂÂãÂÂãÂÂãÂÂãÂÂ[6]ãÂÂãÂÂã¼ã¿URIã¹ãÂÂã¼ã ã«ãÂÂãÂÂå ¨ã¦ã®ãÂÂã¡ã¤ã«ãÂÂ1ã¤ã«ã¾ã¨ãÂÂãÂÂãÂÂã¨ãÂÂã§ãÂÂãÂÂã°æÂ¥ç¶Âæ°ã®å¶éÂÂã¯åÂÂé¡Âã«ã¯ãªãÂÂãªãÂÂãÂÂ
- å¤Âé¨ãÂÂã¼ã¿ã¸ã®ã¢ã¯ãÂȋ¹ãÂÂå¶éÂÂãÂÂãÂÂã¦ãÂÂãÂÂç°å¢Âã§æÂÂç¨ã§ãÂÂãÂÂãÂÂ
- 1ã¤ã®HTMLãÂÂã¡ã¤ã«ã§ãÂÂã«ãÂÂã¡ãÂÂã£ã¢ãÂÂ表ç¾ãÂÂãÂÂãÂÂã¨ãÂÂã§ãÂÂãÂÂãÂÂ
- éÂȌÂÂã¡ã¼ã«ã§å¤Âé¨ãÂÂã¡ã¤ã«ãÂÂæ·»ä»ÂãÂÂã¡ã¤ã«ãÂÂ使ç¨ãÂÂãÂÂã«çÂȌÂÂãÂÂ表示ã§ãÂÂãÂÂãÂÂ
çÂÂæÂÂ
- ãÂÂã¼ã¿URIã¹ãÂÂã¼ã ã«ãÂÂã£ã¦ãÂÂã¦ã³ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂãÂÂã¡ã¤ã«ã¯åÂÂå¥ã«ãÂÂã£ãÂÂã·ãÂ¥ãÂÂãÂÂãªãÂÂãÂÂHTMLãÂÂCSSã®ãÂÂã¡ã¤ã«ãÂÂãÂÂã¦ã³ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂãÂÂã³ã«ãÂÂã¼ã¿ãÂÂãÂÂã¦ã³ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂãÂÂ
- HTMLãÂÂCSSã®ãÂÂã¡ã¤ã«ãÂÂæ´æ°ãÂÂãÂÂãÂÂãÂÂã³ã«ãÂÂãÂÂã®ä½Âè ã¯ã¨ã³ã³ã¼ãÂÂãÂÂÃ¥ÂÂãÂÂè¾¼ã¿ãÂÂãÂÂãÂÂç´ãÂÂãªãÂÂãÂÂã°ãªãÂÂãªãÂÂãÂÂ
- å¤ãÂÂInternet Explorerã§ãµãÂÂã¼ãÂÂãÂÂãÂÂã¦ãÂÂãªãÂÂãÂÂãÂÂã¼ã¸ã§ã³8ã§ã¯ãÂÂã¼ã¿ãµã¤ãºãÂÂ32kBã«å¶éÂÂãÂÂãÂÂã¦ãÂÂãÂÂãÂÂ
- Internet Explorerã®ãÂÂã¼ã¸ã§ã³8ã¨ãÂÂã¼ã¸ã§ã³9ã§ã¯çÂȌÂÂã§ãÂÂãÂÂ使ç¨ã§ãÂÂãªãÂÂãÂÂJavaScriptã§çÂÂæÂÂãÂÂãÂÂãÂÂã³ã³ãÂÂã³ãÂÂã¯ãÂÂã¦ã³ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂã¨ãÂÂã§ãÂÂãªãÂÂ[7]ãÂÂãÂÂã¼ã¿URIã¹ãÂÂã¼ã ã§ã¯ãÂÂã¼ã¿ã¯åÂÂç´ÂãªæÂÂÃ¥ÂÂÃ¥ÂÂã¨ãÂÂã¦表ç¾ãÂÂãÂÂãÂÂãÂÂãÂÂã©ã¦ã¶ãªã©ãÂÂå¤ÂãÂÂã®å¦çÂÂç°å¢Âã§ã¯ã¡ã¿ãÂÂã¼ã¿ãÂÂãÂÂã¼ã¿å§縮ãÂÂã³ã³ãÂÂã³ãÂÂãÂÂã´ã·ã¨ã¼ã·ã§ã³ã®ãÂÂãÂÂãªè¤ÂéÂÂãªå¦çÂÂã¯ãµãÂÂã¼ãÂÂãÂÂãªãÂÂã§ãÂÂãÂÂãÂÂãÂÂä»Âã«ãµãÂÂã¼ãÂÂãÂÂãÂÂãªãÂÂã§ãÂÂãÂÂãÂÂã¨æÂÂãÂÂãÂÂãÂÂè¦Âç´ ã«ãÂÂéÂȌÂÂã¡ã¼ã«ã¯ã©ã¤ã¢ã³ãÂÂã®ãÂÂã«ãÂÂãÂÂã¼ãÂÂå½¢å¼ÂãÂÂmessage/rfc822ãªã©ãÂÂãÂÂãÂÂãÂÂ
- Base64ã§ã¨ã³ã³ã¼ãÂÂãÂÂãÂÂãÂÂãÂÂã¼ã¿ã¯å Âã®ãµã¤ãºãÂÂãÂÂ1/3ç¨Â度大ãÂÂãÂÂãªãÂÂï¼ÂãÂÂã¤ãÂÂÃ¥ÂÂä½Âï¼ÂãÂÂãÂÂã ãÂÂãÂÂãÂÂã®ãªã¼ãÂÂã¼ãÂÂãÂÂãÂÂã¯HTTPãµã¼ãÂÂã¼ãÂÂ㋹ãÂÂã³ã¹ãÂÂgzipã§å§縮ãÂÂãÂÂå ´åÂÂ2ï½Â3%ã«ã¾ã§軽æ¸ÂãÂÂãÂÂãÂÂ[8]ãÂÂ
- ãÂÂã¼ã¿URIã¹ãÂÂã¼ã ã§ãÂÂã¦ã³ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂã¡ã¤ã«ã«ã¯éÂÂ常ã®ãªã³ã¯ãÂÂãÂÂãÂÂã¦ã³ãÂÂã¼ãÂÂãÂÂãÂÂãÂÂã¡ã¤ã«ã¨éÂÂã£ã¦ãÂÂã¡ã¤ã«åÂÂãÂÂãªãÂÂãÂÂä¿ÂÃ¥ÂÂãÂÂãÂÂã¨ãÂÂã®ãÂÂã¡ã¤ã«åÂÂã¯MIMEã¿ã¤ãÂÂãÂÂã¨ã«ç¨æÂÂãÂÂãÂÂãÂÂãÂÂãÂÂã©ã«ãÂÂã®ç©ã¨ãªãÂÂãÂÂãÂÂã ãÂÂãÂÂHTML5ã§ã¯aè¦Âç´ ã«ãÂÂã¦ã³ãÂÂã¼ãÂÂæÂÂã®ãÂÂã¡ã¤ã«åÂÂãÂÂæÂÂå®Âã§ãÂÂãÂÂdownloadå±Âæ§ãÂÂ追å ãÂÂãÂÂãÂÂãÂÂãÂÂãÂÂä¸Âé¨ã®ãÂÂã©ã¦ã¶ã§ã¯ãÂÂã®åÂÂé¡Âã¯解決ãÂÂãÂÂãÂÂ
- ä¾ÂãÂÂ1ã¤ã®ã¦ã§ãÂÂãÂÂã¼ã¸ã«åÂÂãÂÂè¾¼ãÂÂãÂÂã¼ã¿ã§ãÂÂã£ã¦ãÂÂãÂÂÃ¥ÂÂãÂÂãÂÂã¼ã¿ãÂÂè¤Âæ°使ç¨ãÂÂãÂÂã¨使ç¨ãÂÂãÂÂãÂÂæ°ã ãÂÂã³ãÂÂã¼ãÂÂå¿ è¦Âã¨ãªãÂÂãÂÂå¤Âé¨ãÂÂã¼ã¿ã®場åÂÂã¯ãÂÂãÂÂã¤ãÂÂã¼ã¿ãÂÂ使ç¨ãÂÂãÂÂå ´åÂÂã§ãÂÂ1ã¤ã§æ¸ÂãÂÂãÂÂ
- ãÂÂã¼ã¿URIã¹ãÂÂã¼ã ã¯ã¢ã³ãÂÂã¦ã¤ã«ã¹ã½ãÂÂãÂÂã¦ã§ã¢ã®ãÂÂã£ã«ã¿ãªã³ã°å¦çÂÂãÂÂé£ãÂÂãÂÂãÂÂãÂÂ[9]ãÂÂ
æ¸å¼Â
ãÂÂã¼ã¿URIã®æ§ÂæÂÂã¯ãÂÂIETFãÂÂ1998å¹´ã«æ¨ÂæºÂãÂÂãÂÂãÂÂã³ã«æ¡ÂRFC 2397ã¨ãÂÂã¦å®Â義ãÂÂãÂÂ[10]ãÂÂç¶ÂãÂÂã¦ãÂÂURIã¹ãÂÂã¼ã ã®æ§ÂæÂÂãÂÂå®Â義ãÂÂãÂÂãÂÂãÂÂæ§ÂæÂÂã¯ãÂÂ以ä¸Âã®éÂÂãÂÂã§ãÂÂãÂÂãÂÂ
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
ã¨ã³ã³ã¼ãÂÂãÂÂå¿Â
è¦ÂãªãÂÂã¼ã¿ã«対ãÂÂã¦ã¯Base64ã®ã¨ã³ã³ã¼ãÂÂå½¢å¼ÂãÂÂæÂÂå®ÂãÂÂãÂÂãÂÂã¨ã³ã³ã¼ãÂÂå½¢å¼Âã®æÂÂå®ÂãÂÂç¡ãÂÂå ´åÂÂãÂÂãÂÂã¼ã¿ã¯URLã§使ç¨å¯è½ãªæÂÂÃ¥ÂÂ[11]ã«ã¤ãÂÂã¦ã¯ASCIIã³ã¼ãÂÂã§è¨Âè¿°ãÂÂãÂÂãÂÂãÂÂ以å¤Âã®æÂÂÃ¥ÂÂã«ã¤ãÂÂã¦ã¯æ¨ÂæºÂã®%xxå½¢å¼Âï¼ÂãÂÂã¼ãÂȋ³ãÂÂã¨ã³ã³ã¼ãÂÂã£ã³ã°ï¼Âã§ã¨ã³ã³ã¼ãÂÂãÂÂãÂÂãÂÂMIMEã¿ã¤ãÂÂãÂÂçÂÂãÂÂãÂÂãÂÂå ´åÂÂãÂÂãÂÂãÂÂã©ã«ãÂÂå¤ã®text/plain;charset=US-ASCII
ãÂÂæÂÂå®ÂãÂÂãÂÂãÂÂãÂÂã®ã¨ãÂÂãÂÂãÂÂï¼ÂãÂÂã®場åÂÂãÂÂcharsetã ãÂÂã®æÂÂå®ÂãÂÂå¯è½ãÂÂï¼Â
ãÂÂãÂÂã¤ãÂÂã®ãÂÂã©ã¦ã¶ (Google Chrome, Opera, Safari, Firefox) ã§ã¯;charset
ã¨;base64
ã®é ÂçªãÂÂéÂÂã«ãªã£ã¦ãÂÂæ£常ã«å¦çÂÂãÂÂãÂÂãÂÂãÂÂInternet Explorerã§ã¯;charset
ã¨;base64
ã®é Âçªã¯éÂÂã«ãªã£ã¦ã¯ãªãÂÂãªãÂÂãÂÂãÂÂã¼ã¿ãµã¤ãºã¯ãªã¯ãÂÂãÂÂãÂÂÃ¥ÂÂä½Âã§ãÂÂãÂÂãÂÂ
ä¾Â
HTML
赤ãÂÂå°ÂãÂÂãªç¹ã®çÂȌ () ãÂÂ表示ãÂÂã HTML:
<img src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" alt="Red dot" />
ãÂÂã®ä¾Âã¯ãÂÂã©ã¼ãÂÂãÂÂãÂÂã®ãÂÂãÂÂã«æ¹è¡ÂãÂÂãÂÂã¦ãÂÂãÂÂã Data URI ãÂÂå«ãÂÂãÂÂå®ÂéÂÂã® URI ã§ã¯ãÂÂå¶御æÂÂå (ASCII 0 ãÂÂã 31 ã¾ã§ã¨ 127) ã¨ã¹ãÂÂã¼ã¹ (ASCII 32) ã¯é¤å¤ÂæÂÂÃ¥ÂÂã§ãÂÂãÂÂãÂÂã¤ã¾ãÂÂãÂÂ空ç½æÂÂÃ¥ÂÂã data URI ã«堥ã£ã¦ãÂÂã¦ã¯ãÂÂãÂÂãªãÂÂãÂÂ
ãÂÂãÂÂãÂÂãÂÂHTML4 㨠HTML5 ã«ãÂÂãÂÂã¦ã¯ãÂÂè¦Âç´ ã®å±Âæ§å¤ (ä¸Âè¨Âã® "src" ã®ãÂÂãÂÂãª) ã®ä¸Âã®æ¹è¡Âã¯ç¡è¦ÂãÂÂãÂÂã [è¦Âåº堸]ã ãÂÂãÂÂãÂÂã£ã¦ãÂÂä¸Âè¨Âã®ä¾Âã® data URI ã¯æ¹è¡ÂãÂÂç¡è¦ÂãÂÂãÂÂã¦æ£常ã«å¦çÂÂãÂÂãÂÂãÂÂãÂÂ
ãÂÂãÂÂ㯠HTML ã®æ©Âè½ã§ãÂÂã£ã¦ data URI ã®æ©Âè½ã§ã¯ãªãÂÂãÂÂãÂÂãÂÂHTML 以å¤Âã§ã¯ URI å ã®空ç½æÂÂÃ¥ÂÂãÂÂç¡è¦ÂãÂÂãÂÂãÂÂæÂÂÃ¥ÂÂã¯使ãÂÂãªãÂÂãÂÂã¨ã«çÂÂæÂÂãÂÂ
CSS
èÂÂæ¯ã«çÂȌÂÂãÂÂå«ã CSS ã«ã¼ã«:
ul.checklist li.complete {
padding-left: 20px;
background: white url('data:image/png;base64,iVB\
ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\
AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\
yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\
FTkSuQmCC') no-repeat scroll left top;
}
\ + <LF>
ã®è¡Âæ«ã¯ãÂÂ次è¡Âã«ç¶Âç¶ÂãÂÂãÂÂãÂÂã¨ãÂÂ表ã CSS ã®æ©Âè½ã§ãÂÂãÂÂãÂÂãÂÂãÂÂ㯠CSS 解éÂÂæÂÂã«é¤åÂȋÂÂãÂÂã¦ãÂÂdata URI ãÂÂ空ç½ã®ãªãÂÂãÂÂãÂÂã«æ£ãÂÂãÂÂÃ¥ÂÂæ§Âç¯ÂãÂÂãÂÂãÂÂãÂÂ
JavaScript
次ã®ã¹ã¯ãªãÂÂãÂÂã¯åÂÂãÂÂè¾¼ã¿ãÂÂã¼ã¿ãÂÂå Âã«ãµãÂÂã¦ã£ã³ãÂÂã¦ãÂÂ表示ãÂÂãÂÂãÂÂèÂÂ注ãªã©ã«使ç¨ã§ãÂÂãÂÂãÂÂ
window.open('data:text/html;charset=utf-8,' +
encodeURIComponent( // URLæ¸å¼Âã«ã¨ã¹ã±ã¼ãÂÂ
'<!DOCTYPE html>'+
'<html lang="en">'+
'<head><title>Embedded Window</title></head>'+
'<body><h1>42</h1></body>'+
'</html>'
)
);
ãÂÂã®ä¾ÂãÂÂInternet Explorer 8ã§表示ãÂÂãÂÂãÂÂã¨ãÂÂã¦ãÂÂå®Âè¡ÂãÂÂã¡ã¤ã«ã®ãÂȋÂÂãÂ¥ãªãÂÂã£å¶éÂÂã®ãÂÂãÂÂ失æÂÂãÂÂãÂÂãÂÂï¼Â訳注:ençÂÂã®wikipediaã«ãÂÂã£ãÂÂä¾ÂãÂÂãÂÂã®ã¾ã¾è¨Âè¿°ãÂÂã¦ãÂÂãÂÂãÂÂãÂȋÂÂãÂ¥ãªãÂÂã£ã«ã¤ãÂÂã¦èÂÂæ ®ãÂÂã¹ãÂÂä¾Âãªã®ã§Internet Explorer 8以å¤Âã§ãÂÂ注æÂÂãÂÂï¼Â
SVG
![](http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/35_mm_angle_of_view_vs_focal_length.svg/220px-35_mm_angle_of_view_vs_focal_length.svg.png)
Base64 ã¨ã³ã³ã¼ãÂÂã® JPEG çÂȌÂÂãÂÂÃ¥ÂÂãÂÂè¾¼ãÂÂã SVG
<svg>
<image width="64" height="24" href="data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k="/>
</svg>
é¢é£頠ç®
èÂÂ注
- ^ âÂÂUsing Data URIs to Speed Up Your WebsiteâÂÂ. Treehouse Blog (2014å¹´3æÂÂ27æÂÂ¥). 2018å¹´8æÂÂ26æÂ¥é²覧ãÂÂ
- ^ âÂÂSingleFile - Chrome Web StoreâÂÂ. Chrome Web Store. 2018å¹´8æÂÂ25æÂ¥é²覧ãÂÂ
- ^ âÂÂSingleFile â Add-ons for FirefoxâÂÂ. Firefox Add-ons. 2018å¹´8æÂÂ25æÂ¥é²覧ãÂÂ
- ^ Deveria, Alexis (2015å¹´7æÂÂ). âÂÂCan I use...âÂÂ. 2015å¹´8æÂÂ31æÂ¥é²覧ãÂÂ
- ^ âÂÂDefine data: URLs by annevk ÷ Pull Request #579 ÷ whatwg/fetchâÂÂ. GitHub (2017å¹´8æÂÂ14æÂÂ¥). 2018å¹´5æÂÂ26æÂ¥é²覧ãÂÂ
- ^ âÂÂRFC 2616 Section 8.1.4âÂÂ. Internet Engineering Task Force. 2012å¹´12æÂÂ14æÂ¥é²覧ãÂÂ
- ^ âÂÂdata Protocolâ (è±èªÂ). Microsoft. 2014å¹´3æÂÂ16æÂ¥é²覧ãÂÂ
- ^ Martin Isenburg, Jack Snoeyink (2003å¹´). âÂÂBinary Compression Rates for ASCII FormatsâÂÂ. 2011å¹´4æÂÂ7æÂ¥é²覧ãÂÂ
- ^ Masinter, L (1998å¹´8æÂÂ). âÂÂSecurityâÂÂ. RFC 2397 - The "data" URL scheme. Internet Engineering Task Force. pp. 2. 2008å¹´8æÂÂ12æÂ¥é²覧ãÂÂ
- ^ Masinter, L (1998å¹´8æÂÂ). âÂÂRFC [https://datatracker.ietf.org/doc/html/rfc2397 2397 - The "data" URL scheme]âÂÂ. Internet Engineering Task Force. 2008å¹´8æÂÂ12æÂ¥é²覧ãÂÂ
- ^ âÂÂsafe URL characters Uniform Resource Identifiers (URI): Generic SyntaxâÂÂ. 2012å¹´12æÂÂ14æÂ¥é²覧ãÂÂ
å¤Âé¨ãªã³ã¯
- Fetch Standard
- 7. data: URLsã«ä»Âæ§ÂãÂÂè¨Âè¿°ãÂÂãÂÂã¦ãÂÂãÂÂãÂÂ
- Fetch Standard æÂ¥æ¬èªÂ訳ï¼ÂéÂÂå ¬å¼Âï¼Â
- RFCÂ 2397
- data: URL tests
- Using Data URLs effectively with Cascading Style Sheets
- Create Dynamic Thumbnails using Data URI
- DataURL.net Open source web-based tools for creating and working with Data URLs
- Data Encode Images Web-based tool for turning images available via the web into Data URIs.