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

[ファンク1010]

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

現状は以下の通りです。

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

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

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

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

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

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

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

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

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

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

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

[Ten A]

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

[ファンク1010]

丁寧にありがとうございます。

一応JPEG.PDFサイズも×2、×4も納品しました。ただ画像サイズがどれも500〜2000KBくらいあり、hp上を調べてみると100KBくらいにリサイズされています。

バナー自体は100KBくらいが良いとどこかのサイトで見ましたがやはりそれくらいに小さくしないとダメなのでしょうか？

今回のバナーは細かいイラストが多く、再現できないってことなんでしょうか、、、。

[Ten A · Accepted solution]

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

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

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

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

 

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

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

[ファンク1010]

ありがとうございます。やはりそういうことなんですね。複雑な背景=容量が多い→アップ時に圧縮される→汚くなる。のですね。