Photoshopで画像を拡大して書き出したけどブラウザで確認するとボケる現象

| カテゴリー : Webデザイン Web制作ノウハウ

ども。アイドットデザインの芦刈です。

Retinaディスプレイ用に、画像を拡大して書き出したのに、ブラウザで確認するとボケて表示されることがありました。

何故ボケて表示されたのか?書き出しのやり方が間違っていたのか?
原因について調査してみました。

拡大書き出ししたのにボケる現象

上記画像は少しわかりにくいですが、普段は左画像のように2倍で画像を書き出して表示しています。
しかしPhotoshopでいつもどおり2倍で書き出したのに、右画像のようにボケてしまうのです。
色々と調べてみた結果、Photoshopでの画像配置のやり方に原因がありました。

原因はスマートオブジェクト化されていないこと

基本的なことですが、画像がスマートオブジェクト化されていませんでした。
画像をスマートオブジェクト化せずに配置してしまうと、劣化して画質が落ちてしまいます。

Photoshopで画像を配置するときは、大きいサイズでスマートオブジェクト化してレイアウトするのが基本です。

スマートオブジェクト化されているか確認する方法


① レイヤーパネルで画像箇所を選択する
② 属性パネルを開くとファイル名と拡張子が表示される

上記のように②の拡張子がPSB、またはPSDだったらスマートオブジェクト化されており、拡大書き出ししても劣化することはありません。
②の拡張子がJPEGやPNGの場合は、スマートオブジェクト化されていませんので、拡大書き出しをすると画質が落ちてしまいます。

まとめ

Photoshopの機能で画像にスマートフィルターを使用している場合、フィルターは等倍の画像に処理をかけているため、拡大書き出しをするとボケてしまうようです。
この場合スマートフィルター画像は、別のPSDで作成して読み込むなど、工夫が必要になりそうです。

最近のWebサイトは、高画質で綺麗が当たり前になってきました。
もしPhotoshopで拡大して書き出したけど、ボケてしまうことがあったら、スマートオブジェクト化されているか確認してみてはいかがでしょうか。
それではまた!

参考記事

儲かる会社はやっている!小さな会社のホームページ集客の鉄則

無料の資料をダウンロード

×

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。