製作したスマホサイト用バナーの画質が悪いです

書き出しした画像の解像度の問題です。

PhotoshopでWeb掲載用のバナーを作成されたとのことですのでおそらく「アセット生成」か「web用に保存」で書き出しをしていると思います。

通常そのやり方ですと72ppiで書き出しされます。これは以前からのPCのブラウザ表示用画像の標準的な解像度です。

が、スマホにもよりますが最近のスマホは高精細ディスプレイを搭載しています。例えばiPhone6のRetinaHDディスプレイでは原寸の画像解像度は326ppi、左右のピクセルサイズはw750pxですから、w300pxしかない画像を引き伸ばして表示すればそりゃあボケます。

各デバイスの画像サイズはPhotoshopで新規ドキュメント開くとき、プリセットでモバイルを選択すれば各デバイスのサイズがプリセットで用意されています。

ですが、乱立する各デバイスの高精細ディスプレイの解像度に合わせて画像の解像度を変えていると対応しきれなくなるので、昨今では画像を大きめに書き出しして縮小表示する、という苦肉の対応が取られています。

画像アセットを生成する時にパラメーターを x200％ x400％ と適切な大きさに指定しておくか、web用に保存する時に％指定で拡大します。

その際、元の画像の解像度が足りない場合はボケますので、大きめサイズの画像をスマートオブジェクトにしておく必要があります。テキスト等は通常ベクターなので迂闊にラスタライズしない限りボケないはずです。

以下を参考にしてみてください。

Photoshop でのレイヤーから画像アセットの作成

Photoshop でのグラフィック形式でのファイルの保存

で、その設定や本来の解像度以上の解像度で書き出しをする対応の煩わしさから、最近はIllustratorでweb用画像を作る方法も取られています。

配置画像の解像度にだけ注意して、あとはアセットの書き出しパネルでスケールを複数設定できるので重宝ですよ。

Illustrator ヘルプ | アセットの収集と一括書き出し

ここ数年パソコンのディスプレイも高解像度化が進んでますので、そのうちPCでも対応が迫られるでしょう。ロゴなどのベクターデータはSVGという手段もありますし。

これについてはいくつかの観点が出てきますので、それらを順に確認することになります。

• 元々の画像そのものがPC上の、Photoshop以外のアプリケーションでどのように表示されるか
• サイト側でピクセル数の自動的な変更が行われていないかどうか
• スマートフォンとの場合、画面解像度などとあっていないのではないか

スマートフォンの場合ということだと、一番あありうるのが最後です。

たとえばiPhoneであればRetina基準になるので、@2xや@3xでの用意をしておくことで

それらの画像に切り替えることで、適正なピクセルの画像を用いることができるようになります。

逆に用意していないと、自動的に引き延ばされたのと同じになるのでぼやける可能性があります。

ですからまずは、そのあたりについて確認してみてはどうでしょうか。

ここは作成・利用されているサイトの仕様なども関わってくるので、そこも確認してみましょう。