contents

CSS Spriteのすすめ

Category : Study Comments : [0]

090915a.jpgやややっ!STUDYカテゴリーが0件だったよ!勉強嫌いでなにがいかんと?
先にあれこれカテゴリー作っちゃうと縛りが多くて大変。徐々に増やすのがよい!ってのが一番の勉強だよね。これでとりあえず埋まったから一安心。
でもでもがんばらないとこの先、氷の上のプロポーズが待っていないし、せっかくモテスリム着てもモテない! 着ないけど。

画像2枚でON/OFF作ってたけど、最近では(でもないか?)一枚に使われる画像をある程度まとめて位置指定で表示するのがすっかりモアベター。

一枚の大きな画像って重そうだけど、細かい画像を何度も読み込見に行く方が、処理に時間がかかる様子。
---
Yahoo!のパフォーマンス改善チームによると、
ネットの表示時間の20%がHTML、80%が画像やCSS、JavaScriptなどのコンポーネ
ントをロードするのに時間がかかっている。
HTTPのリクエスト回数を減らすことが、パフォーマンスの改善にもっとも効果的ダス!。
---
だってよ。

でもでも、試して気づいたのは何でもかんでもは出来ないのです。
注意点として
・当然jpg・gifは共存できない。(透明化とか考えると、すべてpngで行ける条件での使用がベストかも。IEめ!)
・gifアニメも無理。
・大きな修正が多いと大変。修正が少ない背景画像やアイコンで使うのが良いのかも。
・サイズ固定の画像で使わないといけない。文字が大きくなって背景が伸びる箇所などには不向き。
・修正時にサイズ変更があったときの対応用にアキを設けておく(かといって無駄に大きいと重い)
・沢山いれるとbackground-positionでの位置指定がめんどい。( CSS Sprite Generator的なサービスを使うと便利。ただ、この手のサービスに社外秘画像送っちゃって平気なのかの確認 )
・そしてそしてユーザビリティの確保(altが必要な画像もあるため)
とかとか。
手間がかかるところを親切に作ってあげる事で差がつく数少ないサンクチュアリ。
使いどころに慣れなきゃな。

ちなみにこのブログではやってないけどNE!

 

Post a Comment

 

menu

PROFILE

FUJIKKO。1975年生まれ。WEB制作会社所属。イラスト描いたり、デザインしたり、しなかったり。

twitter

recent comments

  • sugetty
    おお、久々に見たら、愛玉子が…
  • fujikko
    そうだよガ〜ス〜ことガスちゃ…
  • fujikko
    そうでした、ド○えもんといえ…
  • どらみみ
    ドコデ買ったの?超ほすぃ〜♪
  • fujikko
    このソフトのバグがあったので…
  • miki
    fuji先生うま過ぎて、ちび…
  • fujikko
    お、 同じの買ったんけ? 持…
  • miki
    ちらっと映り込んでる小物が気…
  • 塚ブック
    お、 同じの買っとる。 これ…
  • fujikko
    忘れちゃいないよ。忘れちゃい…