スマホで見たときアイコン画像があんまり荒くならない方法メモ

2011年10月1日

仕事でスマホページ作ってて、「メニューのアイコン画像がボケたようになるけどどうにかならないか」みたいなことを言われたのでどうにか出来るか調べてみた。

例えばこんな感じ。ハイライトの当たりが特にボケてる。

忘れないうちにメモっとく。

サンプル

普通に画像を貼り付ける場合は

今回使用する画像の元のサイズがこれ。16×16のアイコン

で、使用するのはこれ。

あんまでかくしすぎてもファイルサイズがでかくなるし、

等倍で見たときそれなりに見れればいいらしいのでとりあえず2倍の大きさの画像を、縮小して表示してみる。

HTML

<divclass="smp1">
<p><ahref="javascript:void(0);"><imgsrc="bkado301.png">テストテキスト</a></p>
</div>

CSS

.smp1 img{
width:16px;
height:16px;
}

iPod touchでの拡大スクリーンショット。

若干ドットの角がマシに。

CSSで背景画像に指定する場合

画像はさっきのとおんなじの。

HTML

<divclass="smp2">
<p><ahref="javascript:void(0);">テストテキスト</a></p>
</div>

CSS

.smp2 a{
display:inline-block;
padding-left:17px;
height:16px;
line-height:16px;
background:url('bkado301.png') no-repeat 0 0;　/*背景画像指定*/
background-size:16px 16px;　/*背景画像サイズ*/
-moz-background-size:16px 16px;　/*firefox用背景画像サイズ指定。スマホならいらんかも*/
-webkit-background-size:16px 16px;　/*webkit系用背景画像サイズ指定*/
}

iPod touchでの拡大スクリーンショット。

位置のズレは適宣直せばいいとして、一つ前のとのとだいたい同じ感じ。

CSS Spriteを使用する場合

画像はこれ。

上のやり方だとアイコン全部リンクの後ろにダーッと出るので別の方法。

HTML

<divclass="smp3">
<p>
<ahref="javascript:void(0);"class="my1">テストテキスト</a><br>
<ahref="javascript:void(0);"class="my2">テストテキスト</a><br>
<ahref="javascript:void(0);"class="my3">テストテキスト</a><br>
<ahref="javascript:void(0);"class="my4">テストテキスト</a><br>
<ahref="javascript:void(0);"class="my5">テストテキスト</a><br>
<ahref="javascript:void(0);"class="my6">テストテキスト</a><br>
</p>
</div>

CSS

.smp3 a::before{
content:''; /*.smp3内のa要素の前に何もかかれてない四角い箱を作る*/
display:inline-block;
width:16px;
height:16px;
background-image:url('sprite1.png'); /*スプライト画像を読み込む*/
background-repeat:no-repeat;
background-size:32px 48px;/*スプライト画像の横幅・高さをそれぞれ2分の1にして指定。*/
-moz-background-size:32px 48px;
-webkit-background-size:32px 48px;
}
/*それぞれのアイコンをbackground-positionで振り分ける。
　この時、画像を2分の1に縮小した後の位置で考える。
*/
.smp3 a.my1::before{
background-position:0 0;
}
.smp3 a.my2::before{
background-position:-16px -32px;
}
.smp3 a.my3::before{
background-position:0 -16px;
}
.smp3 a.my4::before{
background-position:-16px 0;
}
.smp3 a.my5::before{
background-position:-16px -16px;
}
.smp3 a.my6::before{
background-position:0 -32px;
}

iPod touchでの拡大スクリーンショット。

実機だともうちょいマシなんだけど、

スクショを保存するときに画像が……

選んだ画像的にあんまり変わんないような気もするけどｗ

解決方法が「画像を大きくする」だし画像をツールで最適化してても多用はできない方法だけど、まあちょこっとしたあれならいいかな。

Showtime a little

Blog > スマホで見たときアイコン画像があんまり荒くならない方法メモ