ブログの画像の引っ越しとSVG化(Retina対応とも)

Jekyll移行メモ に沿った引っ越しを Blogger からしてきたのだが、 この度画像も github page のレポジトリに移動してきた。

また、この際に合わせて一部の図絵を SVG に変換して、 それを直接参照させるようにすることとした。 理由としては以下がある。

• 現在のモダンなブラウザは、スマートデバイスも含めて SVG に対応している
• Retina Display やスマートデバイスなどでの高DPI環境下での見栄え
• 例え容量が増えたとしてもインターネット回線は（特にモバイルで）スループットが上がっているので単純なものなら気にする必要はないのではなか
• そもそも、レポジトリに入れるのならば準テキストな形式の方が気持ちいい

面倒くさいので、色々はしょってみた

なお、Android 2.x 以前や iOS 4.x 以下、そして IE8 以下といった非対応ブラウザを 通常考慮しなければならないが、面倒くさいという理由で、 これは考えないこととした。 また、一般のサイトで提供しているフォールバックも提供しない。

というか、そもそもサムネイルとかも面倒とかいうふざけた理由で提供していないので、 縮小画像でも HTML <img> タグ的に縮小している。 これによって、高 DPI 環境下でキレイに表示されるので、 これまた結果オーライとみなしてあんま考えないこととした。

予想外のユーザビリティ向上

SVG 化したことで、図中のテキストが選択などができるようになったという、 予想外にユーザビリティが上がることとなった。 例えば、 メモ：V-high/モバキャス/ISDB-Tmm/mmbi/nottv の言葉が意味不明だったから調べてみた でのプロトコル・スタックの図はかつてはPNGラスター画像であった。 今回、文献元のPDFファイルをもとにinkscapeでSVG化したものに差し替えた。 テキストがテキストデータとして扱えるので、 多くのブラウザでは図中のテキストが選択や検索対象にできるようになっている。 例えば、図中の"ARIB STD-B31/B29"を選択してコピペなどができるようになった。

ただ、テキスト部分が環境によって適用されるフォントが異なるので、 意図したとおりの表示がなされないという問題がある。 フォントデータを一部埋め込めばいいわけであるが、 わざわざそこまでは対策していない。

github側でgzip転送するので容量はそう増えない

github page は CDN のようなものが導入されていて、 Content-Encoding: "gzip"でレスポンスが帰ってくるので、 それの恩恵も得られる。 SVG化すると<冗長な><タグ></冗長な>が付加されるため ファイルはおおきくなっているケースも多い。 が、gzipで軽くなっている例も結構あるようだ（詳細未調査）。

最後に極端に転送量が減っている例として、 メモ：V-high/モバキャス/ISDB-Tmm/mmbi/nottv の言葉が意味不明だったから調べてみた でのプロトコル・スタックの図で比較をあげる：

これは blogger/Gdrive の自動生成しているサムネイルがかえって容量が増えているというひどい事例となった。 この画像については実に 9割近くの転送量が削減されていることがわかる。 （実際にはこれにHTTPヘッダなどが付いてくるが省略計算）