下の画像は PhotoShopや Fireworksなどの画像処理ソフトを利用して 一枚の画像を分割し
4行4列のテーブル(表レイアウト)にして それぞれ配置してあります。
大きな画像は、表示されるサイズも ファイルサイズ自体も大きいので、表示されるまでに
どうしても時間がかかってしまいますが、画像をスライスすることで
読み込ませるファイルを
分担でき、なおかつ それぞれのファイルサイズも変更できますので、
大きな画像も短時間で
表示させることができるようになります。
![]() |
![]() |
![]() |
![]() |
|
![]() |
![]() |
![]() |
![]() |
|
![]() |
![]() |
![]() |
![]() |
|
![]() |
![]() |
![]() |
![]() |
上の画像は 見た目は一枚の画像ですが ホントはこんなふうに表示されています。
![]() |
![]() |
![]() |
![]() |
|
![]() |
![]() |
![]() |
![]() |
|
![]() |
![]() |
![]() |
![]() |
|
![]() |
![]() |
![]() |
![]() |
1枚の画像を そのまま画像処理してしまうと 全体的に画像が荒くなったり
発色が悪くなってしまう場合がありますが、画像をスライスすることで
例えば 上の空の部分は 空と雲の色しかありませんので、その部分の画像だけ
圧縮率をあげて ファイルサイズを小さくさせることも可能になります。
その他の画像も それぞれ適正なファイル形式や圧縮率を指定して より効果的な
画像形式を指定していきます。
応用で 画像をスライスしたところに リンクを貼ることも可能です。
![]() |
![]() |
![]() |
||
![]() |
![]() |
![]() |
||
![]() |
![]() |
|||
![]() |
![]() |
|||
上の画像の HOME、PAGE1、PAGE2、PAGE3、LINKS の画像に
それぞれリンクを貼っちゃうわけですね。