複数の画像を一つにまとめることでHTTPリクエストを減らし、表示速度を上げる手法「CSS Sprite」
Fireworks CS6にも機能が追加されたりと最近注目度が高いですよね。
私自身、取り入れてみてかなり表示が早くなって驚いています。
最近、このCSS Spriteでハマってしまったことがあったのでブログに書き留めます。
—–
少し分かりづらかったかもしれないので、始めに結論を書きます。
画像のサイズ(定規で測る方のサイズです。実際には測りませんが例えで。)が大きすぎる場合はMobile Safariの仕様で勝手に縮小されます。
—-
簡単にCSS Spriteについて説明をしますと、
こんな感じの複数の画像を
こんな感じにひとつにまとめちゃって
こんな感じのposition指定で背景画像として表示させます。
ーーーーーーーcssーーーーーーー
.sprite-purple01{
background-position: 0 0;
width: 62px;
height: 61px;
display: block;
}
.sprite-purple02{
background-position: 0 -71px;
width: 62px;
height: 61px;
display: block;
}
.csssprite{
background: url(./purple_tefutefu.png) no-repeat top left;
}
ーーーーーーーhtmlーーーーーーーー
- 蝶々０１
- 蝶々０２
背景画像部分にテキスト（上では「蝶々０１/蝶々０２」箇所）を表示させたければコレ、入れとけば大丈夫です。
.text{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
サンプルページ
今回ハマった内容は、
「CSS Spriteで画像を表示させようとしたら、pcでは見れるけどスマフォでは崩れる」
です！
私、ソースの書き方おかしい・・・・？
何かポカミスしてる・・・・？
そんなこんなで調べていたら原因が判明しましたよ！
それは、Mobile Safariの仕様でした。
なので厳密に言うと、スマフォで崩れるのではなくMobile Safari(主にiphone)で崩れるですね。
Mobile Safariですと、
JPEG,GIF,PNG,TIFF画像のデコードサイズ制限は２メガピクセルです。
positionで位置を指定しているので表示画像が小さくなってしまうともちろん崩れます・・・
画像サイズを見たら、1190 × 2333px・・・
２メガピクセル、余裕でオーバーしてました＞＜
対処法として画像をいくつかに分けたら、スマフォ(Mobile Safari)でもきちんと画像が表示されました。
今回の件で、スマフォページ作成で気をつけることってページ幅や画像容量以外にも色々とあることを知りました。
これからきちんと勉強していきます！！