スマホで見たときアイコン画像があんまり荒くならない方法メモ
仕事でスマホページ作ってて、「メニューのアイコン画像がボケたようになるけどどうにかならないか」みたいなことを言われたのでどうにか出来るか調べてみた。
例えばこんな感じ。ハイライトの当たりが特にボケてる。
忘れないうちにメモっとく。
普通に画像を貼り付ける場合は
あんまでかくしすぎてもファイルサイズがでかくなるし、
等倍で見たときそれなりに見れればいいらしいのでとりあえず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での拡大スクリーンショット。
実機だともうちょいマシなんだけど、
スクショを保存するときに画像が……
選んだ画像的にあんまり変わんないような気もするけどw
解決方法が「画像を大きくする」だし画像をツールで最適化してても多用はできない方法だけど、まあちょこっとしたあれならいいかな。