同じWebサイトをPCと携帯双方に対応させたいという需要は結構あると思いますが、そこでネックになるのがページ、特に画像の容量です。
XHTML準拠にしてhandheld用のCSSを(@media handheld{}で)書けば見た目的に両対応は可能ですが、画像に関しては少し工夫が要ります。
具体的には、PC(@media screen)では大きい画像が表示されるようにしたDIVに、携帯用の画像が表示されるPCでは非表示のIMGを配置します。
この方法を使用すればPCで双方の画像が読み込まれる問題はありますが、携帯に読み込まれる容量を節約でき、見かけも最適化できます。
<div style="padding:0px; @media screen{ width:400px; height:300px;
background:url('pc_image.png') } @media handheld{ width:200px; height:150px; }">
<img src="handheld_image.jpg" style="width:200px; height:150px;
@media screen{ display:none; }" alt="説明" />
</div>
実装例はhttp://hcm.wankuma.com/をご覧ください。