Retina対応しても画像がぼやけるときの対処法

結構悩んだのですがどこにも解決策がなかったので書いておきます。

一般的にRetina対応をする際、psdなどから画像を切り出す際、表示させるサイズの2倍で書き出し、1/2のサイズで表示させることが多いかと思います。

参考：
Retina対応がイマイチ分からない人向けの簡単ガイド【初心者Webデザイナー向け】｜34さん｜note

それでたいていの場合、Retinaディスプレイで確認しても画像がぼやけて表示されることはなくなるのですが、同様に対処しても画像がぼやけてしまうケースがありました。

2倍のサイズで書き出してもぼやけてしまうケース

そのpsdの横幅サイズは1280pxで、そのままのサイズでマークアップし画像を書き出していたのですが、よくよく突き詰めるとこのサイズが原因になってるようでした。

つまり、そもそもpsdで作っているサイズが小さいため、いくら画像を大きく切り出しても解像度は荒いまま……、ということみたいなのです。psdはラスターイメージなので、そもそも制作されているデータのサイズが影響するということなのかもしれません（勝手な解釈）。

参考：
ラスターイメージ（Photoshop）ベクターイメージ（Illustrator）と変換方法 | イラレ屋

結局、psd自体を200%の大きさで作ってもらい（カンバスサイズを200%の大きさにする）、一般的な対応と同様に画像を書き出すと無事くっきり表示されました。

まとめ

このケースは初めてだったのでどう対処すればいいのか悩みましたが、もとのpsdを大きくしてみるというシンプルな対応で解決されました。

もし、Retina対応しても画像がぼやけてしまうという場合は、一度psd自体のカンバスサイズを大きくしてみて試してみるといいかもしれません。