AwaRyoコメントをどうぞこれは今のところ、Retinaディスプレイを備えたMacにしか当てはまらないことなのかもしれないのだけれど、実はAndroidのスマホなんかでもRetinaディスプレイを超える解像度のものがあったりします。WindowsのノートPCなどでも、高解像度のものがどんどん出ていますよね。今後はもっともっと気にしておかなければいけないことなんだろうなと思い、ちょっと記事にしてみました。冒頭の画像は、ご存知この淡波ログのヘッダに使っているもの。「PNG」と書いてあるほうが先週までのヘッダで、「SVG」と書いてあるのが現在のもの。明らかに、シャープさが違いますよね。普通のWEBページだと、大きめの画像を用意しておけばそれなりにきれいに表示されるのですが、Wordpressだとそうはいかないんですよね。Wordpress上の画像管理システムである《メディアライブラリ》に画像を登録する際、自動的に何種類もの画像サイズが生成されて、その画像を表示する端末に最適なサイズのものを自動的に選択してくれるようになっているのですよね。これ、便利なようでいて、実はとてもおせっかいなくせ者。(もちろん、僕がWordpressの扱いを熟知していないから、という前提もありますが、ね)Retinaディスプレイは非常に解像度が高いため、画像表示の仕組みが通常とは違います。普通は1ピクセルを画面の1画素として表示しますが、Retinaでは縦横2ピクセル分(=4ピクセル)を1画素として表示します。画面上の1画素のサイズが細かいため、そうしないと表示する画像が小さくなりすぎてしまうのですよね。ならないようにcss上で指定してあれば問題なく、つまり画像を用意した人が思った通りの大きさに表示してくれるのですが、Wordpressのシステムでは前述のように扱うため、ページの作者が特別なcssを書かない限りそのまんまで表示しようとします。僕も難しいことは全然わからないのですが、なにしろ、Wordpress側が小さめの画像を用意し、それをMacが拡大して表示するという訳のわからない状態になるのです。自動的に変換、リサイズされた画像は、RetinaMacで見るといつもボケボケのものになってしまうのですよね。これは寂しい!そこで、ない頭を絞って考えました。Graphicsという言葉の略。解像度に縛られないベクター形式の画像フォーマットなのです。これが線画などだったら分かりやすいのですが、普通の画像でもその利点が生きるかどうか、試してみたのです。ベクターグラフィックを扱えるフリーのソフトといえば、Inkscapeです。これにヘッダの画像を読み込み、単純にSVGで保存してみました。すると、ちゃんとSVGとして解像度フリーになっていました。これまではボケボケだったヘッダ画像が、ついにきれいな画像になりました!やり方は簡単ですが、一つだけ、大事なコツがあります。ベクター画像を扱うソフトには《アートボード》という考え方があります。ビットマップ画像を扱うソフトで新たな画像を読み込むと、ドキュメントのサイズは《その画像のサイズ》になりますよね。ベクターのソフトでは、ドキュメントサイズはあくまでも起動した時に出る初期設定サイズのままです。A4サイズなどですね。Inkscape起動時のアートボードそこに画像を読み込んでSVGで書き出せば出せるのですが、アートボードごとの画像になってしまいます。これでは、白い画像の中に浮いている形になり、どうにもこうにも使えません。画像のサイズもきちんと調整しないと、アートボードの外にはみ出た部分は切り落とされてしまいます。