スマホ用ホームページのヘッダーロゴについて

スマホホームページ用のヘッダーロゴの作成について質問させて頂きます。

現在、横1450px 縦530px 144ppiのPNG画像を
ホームページのヘッダーに設定したのですが
画質が落ちすぎて文字が読めない状態です。

推奨サイズが横240px 縦40pxとありますので
画像の大きさが違いすぎてそうなるのかと思い
Photoshopでリサイズを試みましたが
それも画像が落ちすぎてしまい上手くリサイズできませんでした。

調べても調べても、画質の荒さ大きめの画像を使えば解決されるという答えしか見つからず困っております。。
ホームページに設定後画質が落ちるのは大きさの問題ではないのでしょうか？

全く無知で申し訳ないのですが
どなたか詳し方、教えて頂けたら助かります
宜しくお願い致します。

質問者からの補足コメント

• 追記です！
  元の元画像は2048px ✖️ 2048px 350ppiです。
  これをどうにかスマホ用ホームページのヘッダーに設定できるようにする方法がありましたらお願い致しますm(._.)m

    補足日時：2021/05/05 12:06

No.3 回答者： t_fumiaki 回答日時： 2021/05/05 14:17

あっ、そういう事なんですね。

印刷用の画像ではppiが有効ですが、スマホやpcで無視されます。
ディスプレイモニタの解像度内でしか表示出来ないからです。
px数のみが関係します。

また、印刷用の色表現はymcですが、スマホやpcはRBGです。
原理的にピタっと同じにする変換は出来ません。

これらを考慮してディスプレイモニタ用画像を作るしか無いと思います。

No.2 回答者： t_fumiaki 回答日時： 2021/05/05 13:54

それは無理でしょう。

画像はディジタルデータなんだけど、その画像を作った大元の画像の解像度が低ければ、意味ないでしょう？

たとえば、ピンボケ画像を写真にとって、それをPCやスマホにいれて、048px ✖️ 2048px 350ppiです、と言ったって、ぼやけた物が忠実に再現されるだけです。

またスマホの1pxは縦2px･横2pxの4pxを1pxとして扱うので、これも要注意です（元の4px分が混ざって1pxになる訳だから・・・）。

この回答へのお礼

ご回答ありがとうございます！
ピンボケした画像を2048px × 2048px 350ppiに加工したのではなく、印刷用データとして作成して頂いたので元画像が2048px × 2048px 350ppiです。
印刷しても綺麗なので元画像の画質は悪くないと思っていたのですが、印刷用とデジタルでは違うのでしょうか？

お礼日時：2021/05/05 14:02

No.1 回答者： 放浪者 回答日時： 2021/05/05 11:45

画像サイズでなくて、画質です。

画質が良ければ、サイズを落としても大きくしても綺麗ですよ。

この回答へのお礼

早速のご回答ありがとうございます！
そうなんですね。では画像を作り直した方が良さそうですね。を
そもそも、240px 40pxで画質の良い画像を作るのは可能なのでしょうか？
調べても専門用語が難しすぎて理解できませんでした（ ; ; ）

お礼日時：2021/05/05 12:00