バナー作成。HPで画質が落ちてしまう。

Question

イラレにてバナーを制作しましたがHPにアップすると画質が悪くなります。原因がわからず非常に困っております。

現状は以下の通りです。

1256*376、JPEGで作成。(指示通り)

作成したバナーを32インチ4Kモニターでフル画面にすると画質悪い。(サイズが小さいので当然？)

倍のサイズまたは4倍のサイズで作成すると綺麗に見える。

1256＊376サイズがHPにアップされるとさらに少し悪くなる(ボヤける？)

ChromeでHP上でのサイズを検証してみると少しリサイズされている？

スマホ版で見るとそこまで気にならない(PC版がすごく荒れているように見える)

全く原因がわかりません。その後依頼主からPNGでくださいと言われたのでそれは渡しました。

それも上記に書いたJPEGと比較してもさほど変わりはありません。

簡単な文字や写真ではなく細かいイラストなのでそれが原因している？？

バナー制作の知識少なく何か対処法があるのかわからず困っております。

詳しい方、是非よろしくお願いします。

Ten A · Accepted Answer

容量と見た目はトレードオフなので絵柄にもよりますが、そのサイズの画像を100KB程に抑えるには1xサイズでも高圧縮率の設定を選択する必要があります。

例えば以下のような入り組んだ絵柄の場合、

PNGを書き出すと600KBを超えますが、

同じサイズでも以下のようなものだと

60KB程度の容量まで圧縮されます。1つ目のような画像は圧縮効率が悪いので100KB程度の容量にするにはJPGの高圧縮率設定を選択する必要があります。また、絵柄にもよりますが、カラーの減色等を利用してインデックスカラーモードで8bitPNGにすれば容量は抑えられます。

という事で、どのように使うかという点は先方の意向次第ですから納品仕様に関してはしっかり打ち合わせしましょう。

Ten A · Answer

4Kで全画面表示にすると3840px幅ですからかなり拡大表示になります。標準解像度で原寸表示を想定してのサイズであれば仕様通りの画像で納品しても問題ないでしょう。高解像度表示向けのものが必要であればWeb用に書き出しを利用して@2xや@4xの画像を同時に書き出せばOKです。

Sign up