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