dataスキームのメモ

URL scheme のひとつとして data スキームが RFC 2397 に規定されている。

<img src="data:image/gif;base64,[BASE64 DATA]">

上記のように base64データ(テキスト)を画像として扱わせることができる。
img タグの src 属性値だけでなく、css の画像にも使用できる。

background-image: url(data:image/gif;base64,[BASE64 DATA])

Firefox, Opera, Safari などのブラウザは対応しているが、以下のような明らかなマイナス要素がある。

• IE7以下は非対応
• base64エンコードによって、データサイズがバイナリよりも30%程度増加する

使いどころとしては、HTTPコネクションを削減する目的が主。

1. 小さな画像をいくつも読み込む場合
2. いわゆる spacer gif とか？

IE8未満を切り捨てられる環境においてはぜひ使いたい。
ただし、uupaa.js を使用することで、 IE対応も限定的に可能らしい。

画像ファイルを base64エンコードする Perl コードは以下。

#!/usr/bin/env perl
use strict;
use warnings;
use MIME::Base64;

my $file = '/path/to/image.png';

my $mime_type;

if ($file =~ m!\.(?:jpeg|jpg)$!) {
    $mime_type = 'jpeg';
} elsif ($file =~ m!\.([a-zA-Z]+)$!) {
    $mime_type = $1;
} else {
    die "$file\nUnknown image file type.";
}

my $filesize = -s $file;
my $binary;

{
    open my $IN, '<', $file or die $!;
    binmode $IN;
    read $IN, $binary, $filesize;
    close $IN;
}

my $html = sprintf(
    qq|<img src="data:image/%s;base64,%s">|,
    $mime_type,
    MIME::Base64::encode_base64($binary, '')
);