画像の扱い方

ホームページ制作と画像の扱い方について

ホームページ制作を行う時は、依頼された会社などから提供された素材を使ってHTMLをコーディングしていく事になりますが、HTMLをコーディングする中で画像に付いての取扱いについて注意をしなければならい事が有ります。

画像は写真やイラストなどの図形であり、ページを読み込む時に負荷がかからないような工夫をしていく事が重要なのです。

1ページのホームページ制作を行う場合も、容量の大きい写真を数枚一度に表示させようとすれば、ホームページ制作を行ったウェブページを読み込むまでの時間が長くかかることになります。
これではユーザービリティが高いホームページ制作とは言い難いものになってしまうのです。

写真と言うのは1枚当たりの容量が大きいものもあれば、サムネイルのようなコンパクトな容量の写真も有ります。
ホームページで写真を大きく見せたいと言う気持ちは誰もが持つものではありますが、一度に多くの写真をウェブページの中に掲載してしまえば、ページが読み込まれるまでの間は時間がかかりますし、中には途中で固まってしまう事も有ります。

そのため、ホームページ制作を行う時は、ユーザーの環境を考慮したウェブページ作りを行う事が大切で、全てのユーザーが快適にウェブページを利用出来るような配慮が必要になってくるのです。
特に、商品を紹介するホームページなどでは写真を掲載するケースが多くなりますので、画像などは極力圧縮をする事や、1度に表示される写真の枚数を少なくしたり、必要に応じて拡大が可能になるような仕組みを取り入れ、見ているユーザーに負担が掛からないような配慮が必要となるのです。

例えば、ウェブページを表示した時には、写真などの画像は全て小さなサイズのサムネイル画像にしておき、必要に応じてそのサムネイルの写真をクリックする事で拡大表示が出来るようにしておけば、ウェブページを読み込む時などスムーズに読み込みが行われ、ユーザーに対してストレスを感じさせないホームページ作りが可能になるわけです。

また、写真にはタイトルや説明などを入れることも可能になっているのが特徴です。
ホームページにアクセスした時、写真が掲載されているページが有った場合、写真部分にマウスカーソルを合わせると、写真の説明がカーソル近くに表示されることが有ります。

これは写真のイメージタグでもある「img」要素の属性でもある「alt」に、写真の説明など記述しておくことで、写真部分にマウスカーソルを近づけた時に、写真の説明が表示されるようになるのです。”