ブログを投稿する時やwebページを制作する時、どの画像形式を使えば良いのか迷ったことはありませんか？
適切な画像の取り扱いができると、サイト速度アップやSEO順位アップなどwebサイト運用の質向上に繋がります。
この記事ではWebサイト運用に携わる方に向けて、webサイト運用でよく使われる各画像形式の特長や適切な使用方法をご紹介します。
Web運用でよく使用される画像形式の紹介
Web運用でよく使用されている画像形式には、大きく分けて2つの種類が有ります。
まずはそちらをご紹介します。
①写真の表示に向いている形式
jpg / jpeg / webpなど
特徴
・データ容量が小さめ
・画像の一部を透過できない
・一度圧縮すると、元の画質には戻せない
・色数の多い写真やグラデーションでの表現に向いている
②イラストや文字、変形した画像を表示する事に向いている形式
png / apng / svg / webpなど
特徴
・データを圧縮しても劣化しにくい
・画像の一部を透過させる表現ができる(切り抜き写真等に向いている)
・データ容量が大きめ
画像形式の選び方「基本のキ」
写真の様に色数の多い画像やグラデーションの多い画像には、
jpg / jpegやwebp形式を使用すると良いでしょう。
画質とデータ容量のバランスが良く、ページの読み込み速度の遅延を防ぐことが出来ます。
テキストを使用する画像やアイコン・ロゴ画像には、
pngやsvg形式を選択すると良いでしょう。
細かい文字やイラストを高画質で表示出来たり、透過を組み合わせることでコンテンツの表現を豊かにしてくれます。
pngはデータサイズが大きくなりやすいので、使用する際は設置ページの読み込み速度に注意が必要です。
画像を取り扱う際の2つのポイント
①適切な画像サイズを使用する
画像のデータ容量が大きすぎるとページの読み込み速度低下に繋がってしまいます。
例えば、表示させる場所が横幅400pxなのに横幅が1500pxの画像を使用してしまうと、無駄に読み込みを行ってしまい、ページが表示されるまでに余計に時間がかかってしまいます。
表示させる場所が横幅400pxであれば横幅400px(retinaであれば800px)を使用するように心がけましょう。
②データサイズを少しでも軽く
画像圧縮ツールを活用し、画像のデータ容量を極力小さくしておくと良いでしょう。
このひと手間を加えるだけで、ページの読み込み速度低下を防ぐことが出来ます。
圧縮には「TinyPNG」や「ImageOptim(こちらはmacのみ)」などのツールがオススメです。
まとめ
今後Web運用で画像を取り扱う際は、画像の形式は適切か？サイズは適切か？圧縮は行ったか？ぜひ確認してみてください。
必ず、Web運用の質向上につながります。
また、今回ご紹介した内容以外にも、htmlタグの書き方やレスポンシブ対応など、まだまだ運用の質を高めることが出来る内容が沢山あります。
今回の内容に慣れてきたら、是非そちらにもチャレンジしてみてください。