これは今のところ、Retinaディスプレイを備えたMacにしか当てはまらないことなのかもしれないのだけれど、実はAndroidのスマホなんかでもRetinaディスプレイを超える解像度のものがあったりします。WindowsのノートPCなどでも、高解像度のものがどんどん出ていますよね。
だから、今後はもっともっと気にしておかなければいけないことなんだろうなと思い、ちょっと記事にしてみました。
冒頭の画像は、ご存知この淡波ログのヘッダに使っているもの。
「PNG」と書いてあるほうが先週までのヘッダで、「SVG」と書いてあるのが現在のもの。
明らかに、シャープさが違いますよね。
普通のWEBページだと、大きめの画像を用意しておけばそれなりにきれいに表示されるのですが、Wordpressだとそうはいかないんですよね。Wordpress上の画像管理システムである《メディアライブラリ》に画像を登録する際、自動的に何種類もの画像サイズが生成されて、その画像を表示する端末に最適なサイズのものを自動的に選択してくれるようになっているのですよね。
これ、便利なようでいて、実はとてもおせっかいなくせ者。
（もちろん、僕がWordpressの扱いを熟知していないから、という前提もありますが、ね）
Retinaディスプレイは非常に解像度が高いため、画像表示の仕組みが通常とは違います。普通は１ピクセルを画面の1画素として表示しますが、Retinaでは縦横2ピクセル分（＝4ピクセル）を１画素として表示します。画面上の１画素のサイズが細かいため、そうしないと表示する画像が小さくなりすぎてしまうのですよね。そうならないようにcss上で指定してあれば問題なく、つまり画像を用意した人が思った通りの大きさに表示してくれるのですが、Wordpressのシステムでは前述のように扱うため、ページの作者が特別なcssを書かない限りそのまんまで表示しようとします。
まあ、僕も難しいことは全然わからないのですが、なにしろ、Wordpress側が小さめの画像を用意し、それをMacが拡大して表示するという訳のわからない状態になるのです。
だから、自動的に変換、リサイズされた画像は、RetinaMacで見るといつもボケボケのものになってしまうのですよね。
これは寂しい！
そこで、ない頭を絞って考えました。
冒頭に書いたSVGというのは、Scalable Vector Graphicsという言葉の略。つまり、解像度に縛られないベクター形式の画像フォーマットなのです。これが線画などだったら分かりやすいのですが、普通の画像でもその利点が生きるかどうか、試してみたのです。
ベクターグラフィックを扱えるフリーのソフトといえば、Inkscapeです。
これにヘッダの画像を読み込み、単純にSVGで保存してみました。
すると、ちゃんとSVGとして解像度フリーになっていました。
これまではボケボケだったヘッダ画像が、ついにきれいな画像になりました！
やり方は簡単ですが、一つだけ、大事なコツがあります。
ベクター画像を扱うソフトには《アートボード》という考え方があります。
ビットマップ画像を扱うソフトで新たな画像を読み込むと、ドキュメントのサイズは《その画像のサイズ》になりますよね。
でも、ベクターのソフトでは、ドキュメントサイズはあくまでも起動した時に出る初期設定サイズのままです。
例えば、A4サイズなどですね。
そこに画像を読み込んでSVGで書き出せば出せるのですが、アートボードごとの画像になってしまいます。これでは、白い画像の中に浮いている形になり、どうにもこうにも使えません。画像のサイズもきちんと調整しないと、アートボードの外にはみ出た部分は切り落とされてしまいます。
解決方法はこちら。簡単です。
1.ファイルメニューのドキュメント・プロパティーを開きます。
2.《カスタムサイズ》という項目の中に、《Resize page to drawing or selection》というボタンがあります。これを、押すだけです。
瞬時に、ドキュメントサイズが画像サイズと同じになりました。
そして、上のメニュー画像にもある《Export PNG image…》で書き出すだけです。
（Inkscapeの画像書き出しには少しクセがあります。まず《Export as..》で書き出し場所を指定してファイル名を入れ、次に《Export》ボタンを押すと書き出されます。不思議な仕様ですね……）
もし、きれいなはずの画像がボケボケに表示されてしまう現象に遭遇したら、是非、SVG画像を使ってみてくださいね！
では、また明日！
この記事が、いつか誰かの役に立ちますように！
《天使は、実在した──！》これがウワサのリアルマジックSF最新作。映画的な展開を意識した、ノンストップアクションSF中編小説です。