データ URL スキーム

HTML に様々なバイナリデータを埋め込むために使用される URL スキーム。WHATWG で名称変更されるまでは、「データ URI」と呼ばれていた。

参考:

データ URL | MDN

概要

  • パーセントエンコーディング
  • Base64

外部からファイルを読み込まないため、HTTP リクエストが発生せず、ページの読み込みが高速化される可能性があるが、エンコードによりデータ量が増えることに注意する。

参考:

データ URL | MDN

Data URI Scheme – Wikipedia

使い方

参考:

Data URI Scheme について | HAKUHIN’s Home Page

Data URL スキームとは何なのか?便利な理由と扱うときの注意点 | PisukeCode

Data URI スキームとは | Points & Lines

Data URI と Base64 の基本を理解する | Phenomena Blog

表示速度改善 Data URI スキーム 前編/仕組みとメリット | CodeGrid

CSS で使う

参考:

url() | MDN

パーセントエンコーディング

参考:

encodeURI / encodeURIComponent – URL エンコード/デコードを行う | まくまくノート

Python でパーセントエンコード/URL エンコード | 分析ノート

URI で使用できる文字 | CyberLibrarian

ASCII 文字と URL エンコードの対応表 | SEIL

パーセントエンコーディング (Percent-Encoding) | MDN

URL エンコード/パーセントエンコーディング | e-Words

パーセントエンコーディング – Wikipedia

Base64 エンコーディング

ツール:

Base64 エンコード/デコードツール

参考:

Base64 について | HAKUHIN’s Home Page

Base64 ってなんぞ??理解のために実装してみた – Qiita

Base64 | MDN

Base64 – Wikipedia

The Base16, Base32, and Base64 Data Encodings (RFC 4648) | IETF

JavaScript で変換する

参考:

JavaScript で画像を Base64 形式の URL に変換するやり方 | PisukeCode

FileReader.readAsDataURL() – Data URI として読み込む | SYNCER

FileReader.readAsDataURL() | MDN

btoa() | MDN

atob() | MDN

base64 コマンド

参考:

base64 コマンドを使って文字をエンコード/デコードする | BAMBi’s Blog

base64コマンドを使って暗号化復号化っぽいことをしてみる | Terralien

base64 コマンドと padding 文字 | notrogue

base64 | Linux コマンド虎の巻

base64 コマンド | hydrocul のメモ

base64 コマンドの使い方 | UNIX/Linux の部屋

Man page of BASE64 | JM Project

certutil コマンド

参考:

Windows で Base64 エンコード/デコードする方法 – Qiita

Windows で Base64 エンコード→デコードする方法 | Eiji James Yoshida の記録

Windows 標準機能で base64 の encode / decode を行う | FAQ Center

PowerShell で変換する

参考:

Convert.ToBase64String メソッド | Microsoft Docs [公式]

規格

参考:

data URLs: revised specification · Issue #234 · whatwg/fetch – GitHub

Define data: URLs by annevk · Pull Request #579 · whatwg/fetch – GitHub

Where should the web platform’s base64 algorithm go? · Issue #2912 · whatwg/html – GitHub

Move base64 algorithms to Infra by annevk · Pull Request #2920 · whatwg/html – GitHub

Define forgiving-base64 by annevk · Pull Request #145 · whatwg/infra – GitHub

The Base16, Base32, and Base64 Data Encodings (RFC 4648) | IETF

パフォーマンス/キャッシュ

参考:

How is it possible inline base64 data uri (image) is cached? – Stack Overflow

Data-URI’s and caching – Stack Overflow

Disabling data URL JPG cache – Stack Overflow

DataURL Browser Cache Security Implications – Information Security Stack Exchange

ツール

Base64 エンコード/デコードツール|株式会社エン・PC サービス

画像を Data URI Scheme でテキストに変換するツール | PEKO STEP

Base64 エンコード | ツールタロウ

Base64 エンコード (ファイル) | ツールタロウ

Base64 デコード | ツールタロウ

画像から Data URL に変換 | HIDAZINE

Base64 Image Viewer

Base64 Decode and Encode

Base64 Image Viewer

リポジトリ:

jaredwinick/base64-image-viewer: Paste in Base64. View Your Image – GitHub

デモ:

Base64 Image Viewer

記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA