ページ速度が激的に早くなった!【スプライト】

スプライトと聞くとジュースの「スプライト」を思い浮かべてしまいますが
ここではホームページの高速化として
画像容量をコンパクトにする「スプライト」の手法を紹介したいと思います

以前にも
オセロのサイトを作る際にスプライトを使ったことはあるのですが
今回は
トップページで導入をすることにしてみました。

そのトップページでは
たくさんのアイコンを使っているので
それだけページの表示する時間がかかってしまいます。

そこで、めんどくさいのですが
スプライトにしようかサイダーにしようかを迷っていたのですが
ついに決断をしました。

例えば
たくさんの画像を使っているとそれだけ
ページの表示時間がかかってしまいます。

そこで画像を一つにまとめて
必要な部分を座標でとってしまおうと言った感じです。

ちょうど郵便局へ行くと切手がつながって売られています
その切手を必要な部分を切り取るようなイメージです

こうすことで、
ページの速度が改善されます。

画像が多ければ多いほど体感できる速さになると思います。

そこで、自動でやることもけんしょうしたのですが

すぐ終わりそうだったの手作業で行いました。

意外にスムーズにいったので
作り方の参考にしてみてくさい。

まず同じ大きさの画像だったので

とりあえず枠組みを作りました。
そこで順番を合わせその枠の中におさめます

そして座標を取りその枠を外します。

かなり思っていたよりも楽な作業でした。
これで自分的には激的に表示スピードが速くなったようなきがします。

※ちなみに「サイダー」は関係ありいません

このエントリーをはてなブックマークに追加
   


スポンサード リンク

 

↑このページの先頭へ