HTMLでのIMGのサイズの件

例えば画面上の表示サイズは400x300の画像があったとします。
HTMLでIMGタグで画像を入れますよね？

lang
1<img src="img01.jpg" >

って普通に書くと思います。
指定しないとサイズが確保されなかったりはわかってますが、そこは置いておきます。

今回フォントの関係で文字を画像にしてあったわけです。

通常はそのまま400x300のサイズで書き出しして貼り付けるのですが、当たり前ですが「拡大すると汚い」と言われまして、文字への変換を勧めたところ、フォントや文字の詰め等が思ったとおりでは無いので嫌だと。
（元々イラストレーターで作った紙パンフレットを元にHPを作成中な前提です）

重くなることは全然構わないと（それはそれでどうかと思いますが・・）言われ、きれいな大きい画像を縮小して表示すれば良いんじゃ？と言う話が出たので、それならテストでそこで単純に同じ物を800x600で書き出して、imgタグ中でサイズ指定して書き出してみました。

lang
1<img src="img01.jpg" width="400" height="300">

拡大率100％表示時、見た目は当然400x300で見えるのですが、拡大するとちゃんときれいに見えるわけです。
要するに200%で拡大表示したときにこの画像通りに出力されているのです。
200％時に400x300の画像が2倍に拡大されるわけでは無く、800x600の画像がちゃんと見える・・って言う言い方でわかりますでしょうか？

PCのIE、Firefox、Chrome
タブレットのIpadAirやAir2のサファリではきれいになるのを確認できました。

私は今まで今回の場合だとブラウザ側で800x600の画像を400x300に画像自体リサイズして表示するのかと勝手に思っていたのですが、２００％で表示したときに書き出したままの画像で表示される訳です。

意味わかってもらえるかわからないのですが、これが本来の動作なのでしょうか？

昨日からネットで資料をあさったのですが、これが正しい動作かがわからず、今後お客様に提案して良いやり方なのかを参考資料、ご意見等頂けないかと思いましたので宜しくお願いします。

行動規範の内容に同意します

回答4件

ベストアンサー

いわゆる Retina 画面への対応について、ですよね。

Webの世界においては「デバイスピクセル」と「CSSピクセル」の2種類に分類されます。
◎ デバイス・ピクセル
デバイス、すなわちWebページを表示する端末自体が物理的にサポートする最小単位のピクセルを指します。
◎ CSSピクセル
CSSにおいて理論値として解釈されるピクセルのことです。Webデベロッパが普段何げなく「ピクセル」という場合は、多くの場合はこちらの意味を指しています。

jQuery×HTML5×CSS3を真面目に勉強（4）：WebページをRetina対応させるテクニック～基礎知識編 (1/2) - ＠IT

例示された
<img src="img01.jpg" width="400" height="300">
の width と height は CSS ピクセルですね。

実際の対応については、このあたりの内容が役立つのではないでしょうか（ retina img tag でググりました）。

投稿2015/01/23 15:37