効果的なホームページでの画像ファイルの選び方！おすすめファイル形式とその使い分け方6つ

こんにちは
島村竜一です。

伝わる会員サイトの構築

解説動画の作成・サポート

業務効率化によるRPAの作成・サポート・教育

の仕事をさせていただいています。

さてさて

ここのところ会員サイトの作成およびサポート業務の中でランディングページを作成することが多くなりました。ランディングページとはインターネット上のチラシのことをいいます。ランディングページといったらやっぱり大切なものは画像になります。今回の記事はランディングページに限らずホームページ上で画像を取り扱う時の種類について記事にまとめました。

あなたの参考になればうれしいです。

その1）JPEGフォーマット

一番今までインターネット上で使われてきた画像ではないでしょうか？

圧縮効率が高く、写真やカラー画像に適しているJPEGは適しています。
色数の多い写真に最適です。

長所としては圧縮率を指定できること、
PNGと比べるとサイズが軽いことになります。
短所は、画質を一度下げると元に戻せないことです。

その2）PNGフォーマット

透過性が高く、文字やアイコンに使用することができます。
背景をくりぬきたいなどの透過が可能です。
長所としては、透過が可能であること。そしてアニメーションを設定できることです。
短所はJPEGと比べるとサイズが重いことです。

その3）WEBPフォーマット

Googleが開発した新しい画像フォーマットであり、高い圧縮率と高画質を両立しています。
長所は透過が可能であること、アニメーションを設定できることです。
短所は昔に比べると使えるブラウザーが増えてきましたがまだ対応していないブラウザーがあることです。

その4）GIFフォーマット

アニメーション画像に使用されることが多いGIFになります。昔はアイコン職人さん達が良く使っていましたが、一部の掲示板以外ではあまり使われていないイメージですね。

長所はサイズが軽いこと、
短所は256色までしか表示できないことです。

その5）SVGフォーマット

ベクターデータであり、拡大縮小に強く、
ロゴやイラストなどの画像に適しています。

長所としてアニメーションができること、そしてなにより画像に含まれる文字がきれいなことです。
短所は、複雑な形状だとサイズが重くなることです。

その6）Font Awesome

いままで説明してきたものとFont Awesomeは分類が違いますがおすすなのでぜひご紹介させてください。

画像ではなくアイコンになります。インターネット上で分かりやすく説明するためのアイコンを簡単に使うことができます。

https://fontawesome.com/

Font Awesome

Webフォントアイコンの代表的なライブラリであるFont Awesomeは上記のサイトから登録することで使うことできます。

長所としてさまざまなアイコンが簡単に使えるので文章が分かりやすくなること。
短所は最初の設定がひと手間かかることです。

まとめ

Webサイトに掲載する画像は、適切なファイル形式を選ぶことが大切です。

JPEGフォーマットは写真やカラー画像に適しています。
PNGフォーマットは透過性が高くアルファチャンネルが必要な場合に適しています。

また、Googleが開発した新しい画像フォーマットであるWEBPフォーマットは高い圧縮率と高画質を両立しているため、Webサイトの表示速度の向上にもつながります。

GIFフォーマットはアニメーション画像に使用され、SVGフォーマットはベクターデータであり、拡大縮小に強くロゴやイラストなどの画像に適しています。

また、Webフォントアイコンの代表的なライブラリであるFont Awesomeは、使い勝手が良く、Webサイトにおけるアイコン表示に最適です。

お仕事で使う場合には
ランディングページにはSVGを、
そしてホームページの画像はPNG、
ワンポイントでのアクセントはFont Awesomeがお勧めです。

適切なファイル形式やアイコン表示方法を選ぶことで、Webサイトの表示速度の向上やアクセス数の増加、ユーザーの利便性向上につながります。是非、本記事を参考にして効果的なWeb画像の選び方をマスターしてみてくださいね。

ここまで読んでくださってありがとうございました。

この記事を読んで参考になったことなどありましたら
コメントをもらえると嬉しいです。

ではまた次の記事でお逢いしましょう！