今すぐ画像置換をやめるべきたった一つの理由

2016年5月3日 著

......というタイトルはもちろん、いまさら釣られる人なんていないと思いつつ、そこを敢えての「釣り」。昨夜の飲み会で、そういうタイトルの記事を書きますってなんとなく約束してしまったのですけど、一部でいまだ画像置換と呼ばれる古の悪しき風習が、しかもSEO（何）目的で残っているらしいという話を聞いてしまっては、書かないわけにはいかない。とはいえ、やめるべき理由をただ一つだけ挙げるとなると、実は難しかったりします。なので、無理やり一つに絞るなら、集約して画像置換にはデメリットしかないから、とでもしましょうか。具体的かつ個別にデメリットを挙げます：

• CSSが有効かつ画像を表示できない閲覧環境、あるいは何らかの理由で画像がダウンロードされない状況（通信が不安定だったり低速 etc.）において、背景画像にある意味内容を伝えることができない可能性が高い（背景画像が表示されるべきエリアが、単なる空白地帯として表示されてしまう可能性がある）。
• 印刷時において、当該の背景画像が紙面に出力されず、そこで表現された意味内容を伝えることのできない可能性が高い。出力すること自体は可能であっても、主要なブラウザーではデフォルトの設定をユーザーが意図的に変更しない限り出力されなかったりするので。
• 弱視など視覚に障害のある方が、Windows OSをハイコントラストモードで使用している状況下において、やはり背景画像にある意味内容を伝えることができない可能性が高い。Microsoft Edgeでは改善されるらしいけど（Building a more accessible web platform | Microsoft Edge Dev Blog参照）。
• 置換の対象が単純な文字列だった場合、画像に頼らずWebフォントを使った時とどっちがどうよ？ってのは一概には言えないけれど、画像化文字を読み込ませることに起因して、Webページの表示速度が遅くなる可能性がある。
• メンテナンス性が低下する。例えば画像に含まれている文字を一文字変えるだけでも、画像を作り直しサーバーにアップし直さなければいけない。そのプロセスを多少は自動化できるだろうけど、それでも運用しにくさは否めない。

他にもあるかもだけど、パッと思いつく限りはこんなところか。かつて画像置換が流行った背景には、デザイナーの意図した書体で見出しの文字列を表示させたいという動機があったと思うけれど、Webフォントに対応した閲覧環境の普及した今となっては、画像置換を採用するメリットが上記に挙げた主にはアクセシビリティ、ユーザビリティに関するデメリットを上回っているとは考えにくい。Webフォントが使えないなら、画像化したものを普通に img 要素で実装すべき（F3: 達成基準 1.1.1 の不適合事例 － CSSを用いて、重要な情報を伝える画像を表示させている｜WCAG 2.0 実装方法集参照）。書体云々とは関係なく、CSSスプライト使いまくりで表示速度を上げるぜ！！みたいな動機もあったかもしれないですが、将来的にはHTTP/2が普及していく中で廃れていくのでしょうし......。