HTMLで画像を表示させたが、文字がぼやける 解決方法

Question

HTMLのimgタグでpngの画像を表示させました。
画像にはいくつかのテキストがありますが、画面の関係上400pxぐらいでしか表示できません。
ズームをすればテキストがぼやけずに読めますし、HTMLでこのfont-sizeですと普通に読めるぐらいクッキリと出力できサイズです。しかしそのままの画像ですと少しぼやけます。
解決方法はありますでしょうか。

自分の思いつく解決方法１
・画像の縁ギリギリまでトリミングして少し拡大する。
しかしこれはいくつも画像があるので、大変になってしまいますので、最終手段としています。

自分で思いつく方法2
・もう少しテキスト文字を大きくする
これも最終手段です。

Answer 1

提示されている程度の図でしたら、可能ならばベクトル画像（SVG）で出力あるいは作り直して使えばいいのではと思います。どれだけ拡大してもくっきり表示されますし、ファイルも軽くなります。可能ならの話ですが。

Comments

[oika77]

回答ありがとうございます。SVGにで作成するという発想はありませんでした。しかしSVGで作成したところクッキリと表示させることができました。

Answer 2

用意する画像のサイズと、実際に表示されるサイズをまったく同じにするか、表示サイズ×2倍のサイズで用意してみてください。

この辺で出てきたサイト見てみてください。
http://bit.ly/34nFfq1

元々の画像サイズが小さい場合や、レスポンシブで画面幅によって画像の表示サイズが変動する場合は、ボヤけ回避は難しいと思います。

Comments

[oika77]

回答ありがとうございます。試してみます。