PCで扱うファイルの保存形式について
画像ファイルの話
ホームページを制作するにあたり、きれいにデザインされた「画像ファイル」は、見栄えに大きな影響を与える大事な要素です。
今回は、ホームページ内に必ず使用されている「画像ファイル」についてお話します。
適切なファイル形式か
ホームページでは主に「jpg/jpeg」「gif」「png」の3つを使用する事が多く、それぞれに特徴があります。
- jpg/jpeg→写真、透過のない画像で使用します。
- png→透過を使いたい、イラストの場合はこちらの形式を使用します。
- gif→アイコンなどの色数が少ない画像で使用します。そのため、グラデーション画像には不向きです。アニメーションを使う場合にも使用します。透過も使えます。
ざっくりではありますが、フリーコンテンツを作成される際は、上記の特徴を意識してみてください。
適切なサイズか
ファイルサイズの大きい画像は、読み込みが遅くなったり最悪読み込めなかったりするため、注意が必要です。
まるごとHPでは大きいサイズの画像がアップされるのを避けるために、フリーコンテンツにアップできる画像は、画像1枚につき300KBが上限サイズとして設定されています。
どうしてもサイズが大きくなってしまう場合は、細分化して1個1個の画像を小さくする方法もあります。
便利な画像圧縮サービスもあるので、適宜利用してみましょう。
「高圧縮低劣化」が理想ですが、サービスによって特徴が異なります。
例えば…
- 圧縮率は高いが画像の劣化が激しい
- 複数画像をまとめて圧縮可能
- pngは比較的劣化しないが、jpgは劣化が酷くなる
ファイル形式や圧縮する用途にあわせて、複数のサービスを併用することをお勧めします。
検索エンジンに認識してもらう
テキストと違い、検索エンジンは画像から情報を認識する事が難しいため、適切なALTを入れるようにしましょう。
画像内に文章も含まれるのであれば、文章もきっちりALT内に入れておくのが理想的です。
ソース内に文章があることでテキストで作ったページと同様の扱いになり、Googleが認識しやすくなります。
ただし、ALTに同様のキーワードを複数入れるとスパム扱いになるようなので注意してください。
携帯サイトを作る際の注意点
ガラケーは1つのページに100KB以上の画像があると動作が不安定になる事があります。
また、png形式をサポートしていない機種があります。
そのため、携帯サイトに関して言えば、
- なるべくテキストでページを作る
- どうしてもという時、低サイズの画像を置く
- pngは端末によって読み込めないことがあるため、使用を避ける
以上3点を心掛けるようにしましょう。