ひとつの画像をWEBで異なる小さいサイズでキレイに表示させる方法

元画像が大きいものを、通常HTMLを使ってWEB上で小さく表示指定するとゲジゲジした不鮮明な画像になります（逆はもっと荒くなりますが）。
しかしそうなっていないWEBサイトを見かけるのですが、どういう手法で可能になるのでしょうか。

たとえばブラウザーで80や200ピクセルくらいなのに、それをコピーして確認すると700ピクセルあり、同じ画像を異なるサイズで表示できています。

No.1 ベストアンサー 回答者： nana_coco 回答日時： 2016/03/19 13:06

縦横の比率を元画像に合わせれば（例：縦１００×横２００の画像を→縦５０×横１００にするみたいな）

画像が不鮮明になる事は少ないと思われますが
古いIEブラウザーをお使いだと、もしかしたら画像にジャギーが出るかもしれませんね？

この回答へのお礼

ありがとうございます。
比率の問題なんですね。試してみます。

お礼日時：2016/03/19 13:30

No.3 回答者： SortaNerd 回答日時： 2016/03/20 17:05

お使いのブラウザは何ですか?

「ゲジゲジした」という表現の意味があまり理解できませんが、補間なし(ニアレストネイバー)で縮小した時に出るジャギのことを言っているのでしょうか。
昔のブラウザは拡大縮小時に補間せずジャギのある表示になりましたが、最近は明示的に指定しないかぎり補間されてなめらかな表示になります。
また、不鮮明になる画像はどのようなものですか?
ピクセルに合わせて1px幅の線で書かれた図やビットマップフォントなどは、拡大縮小すると線の幅が一定しないぼやけた表示になり美しくないですが。

No.2 回答者： ORUKA1951 回答日時： 2016/03/19 15:12

アスペクト比が変わらない方が良いが、基本的にはブラウザの描画能力です。

　私は印刷が表示されるページは、A4用紙を使用する300dpiのプリンターで100mm幅を想定する画像でしたら、1200px程度の画像が必要になります。それを画面上では、width:200px;height:autoで指定しています。200pxはディスプレイ上は
　一方、壁紙集のようなアルバムも最近は横幅1200pxが多いです。1600pxとか1080pxとかも・・

また、HTL上は　　　　　　　　　　　　　＿＿＿＿＿＿＿＿＿＿実際と同じ
　<a href=""><img src="***" width="200" height="150" alt=""></a>
　　　　　　↑フルスケールの画像
としておくと、ネット不が少なくなり、描画を待たせることもありません。

　<img src="***" width="200" height="150" alt="">
　　　　　　　　　　　　　￣￣￣￣￣￣￣￣￣￣表示サイズを縮めて、スタイルシートでサムネイルを背景にして、本来の画像は透明度を100にしておく。

　またmediaqueryを使って表示画像を変更したり・・・

　そのページの目的や利用形態に合わせて選択することになるでしょう。