イラストを多用したweb制作

イラストの数が多い場合はページを分割しよう

イラストを多く掲載するサイトを制作する場合、どのような点に注意すればいいでしょうか。まず、ページの読み込み速度が適切になるような構成にすることが大事です。たとえば、イラストが50あるとして、それらを1ページで表示しようとすればそのページのファイルはかなり大きくなり、表示完了に至るまでかなりの時間がかかってしまうでしょう。特に、格安SIMの低速回線でアクセスしているような人にとって、そのようなページにアクセスするのはかなりつらいことです。当然、ページを離脱する可能性が高くなります。 50あったら、1ぺージあたりに5つのイラストを掲載し、合計で10ページのサイトを作るようにすればそうした問題を回避することができるでしょう。

画像を読み込むタイミングをコントロールする

イラストを紹介するページではなく、文章メインのページにイラスト素材をたくさん載せたいという場合はどうすればいいのでしょうか。イラスト素材をたくさん使うとページの雰囲気が明るくなりますし、他サイトとの差別化も果たせますが、使いすぎるとやはりページ全体の読み込みが遅くなるという問題が発生します。
これを回避するためには、たとえば、画像の読み込みを段階的に行うスクリプトを用いるという方法があります。ページにアクセスした時点ですべてのイラストを読み込むのではなく、画面外のイラストは読み込まず、画面の中に入ってきたら読み込むという形にすれば、転送されるファイルは少なくなり、表示速度は落ちないというわけです。