こんにちは、福岡のホームページ制作シンス株式会社の芦刈です。
Retinaディスプレイ用に、画像を拡大して書き出したのに、ブラウザで確認するとボケて表示されることがありました。
何故ボケて表示されたのか？書き出しのやり方が間違っていたのか？
原因について調査してみました。
拡大書き出ししたのにボケる現象
上記画像は少しわかりにくいですが、普段は左画像のように2倍で画像を書き出して表示しています。
しかしPhotoshopでいつもどおり2倍で書き出したのに、右画像のようにボケてしまうのです。
色々と調べてみた結果、Photoshopでの画像配置のやり方に原因がありました。
原因はスマートオブジェクト化されていないこと
基本的なことですが、画像がスマートオブジェクト化されていませんでした。
画像をスマートオブジェクト化せずに配置してしまうと、劣化して画質が落ちてしまいます。
Photoshopで画像を配置するときは、大きいサイズでスマートオブジェクト化してレイアウトするのが基本です。
スマートオブジェクト化されているか確認する方法
① レイヤーパネルで画像箇所を選択する
② 属性パネルを開くとファイル名と拡張子が表示される
上記のように②の拡張子がPSB、またはPSDだったらスマートオブジェクト化されており、拡大書き出ししても劣化することはありません。
②の拡張子がJPEGやPNGの場合は、スマートオブジェクト化されていませんので、拡大書き出しをすると画質が落ちてしまいます。
まとめ
Photoshopの機能で画像にスマートフィルターを使用している場合、フィルターは等倍の画像に処理をかけているため、拡大書き出しをするとボケてしまうようです。
この場合スマートフィルター画像は、別のPSDで作成して読み込むなど、工夫が必要になりそうです。
最近のWebサイトは、高画質で綺麗が当たり前になってきました。
もしPhotoshopで拡大して書き出したけど、ボケてしまうことがあったら、スマートオブジェクト化されているか確認してみてはいかがでしょうか。
それではまた！
参考記事
〈 この記事を書いた人 〉
Webディレクター芦刈光彦
社内では、Web制作のディレクション、フロントエンドを担当しています。
音楽と登山が好きです。ずっと福岡に住んでます。どうぞお気軽に。
