2021.11.09 2020.03.02
WEBで当たり前に使われている画像ファイル。
WEBページを作る際に欠かせない画像ファイルには拡張子があります。
jpeg、gif、png・・・
画像を保存する際に、拡張子を決める必要がありますが、
皆さんは多くの拡張子の中から何となく選んでいませんか?
拡張子にはそれぞれ特性があり、利用する画面に応じて最適な拡張子を選ぶ必要があります。
考えずに適当にしていると、ファイル容量が膨大になったり、想定していない表示がされたりと
トラブルの原因になります。しっかりと理解しておきましょう。
拡張子とは
基本的なことですが、拡張子はパソコンがそのファイルの種類を識別するための文字列を指します。
画像の場合は「.jpg」や「.png」が拡張子になります。
ちなみに、ファイル名の変更で「.jpg」や「.png」となっている拡張子を「.gif」や「.bmp」などと他の拡張子に無理やり変更すると、
本来設定されているファイル形式とは別のファイル形式としてパソコンが認識しようとするため、正常にファイルが開けなくなります。
これら、拡張子を別の形式の拡張子にする場合には専用のツールを利用して変更する必要があります。
画像ファイルの場合であれば、PhotoshopやIllustratorなどの画像編集ソフトが該当します。
画像拡張子の種類と特徴
画像の拡張子には主に下記の種類があります。
【jpeg(ジェイペグ/Joint Photographic Experts Group)】
ファイル拡張子は「.jpg(.jpeg)」です。
フルカラー1670万色まで扱うため、この拡張子では、主に写真などのような色数の多い画像に適します。
jpegファイルでは以下の特徴があります。
・透過色を取り扱えない
・ファイルサイズを小さく出来る(色数が少ない画像だと逆にサイズが大きくなりやすい)
・保存するたびに画質が劣化する
・低画質で保存すると元の画質に戻せない
・文字などのシャープな部分がぼやける
【GIF(ジフ/Graphics Interchange Format)】
ファイル拡張子は「.gif」です。
最大256色で表現するため、ロゴ・アイコン、簡単なイラストなど少ない色数で表現する画像に適します。
gifファイルは以下の特徴があります。
・透過色を扱える
・低画質で保存しても元の画質に戻せる
・色数の多い画像の保存には適さない
・アニメーション画像を扱える(GIFアニメーション)
【PNG(ピング/Portable Network Graphics)】
ファイル拡張子は「.png」です。
jpegとgif両方の特徴を併せ持った画像形式で、フルカラー1670万色まで扱え、透過色も扱うことが可能です。
透過を前提とした色数の多いデザインはpng形式が適しています。
pngファイルでは以下の特徴があります。
・「可逆圧縮」を用いているため、低画質で保存しても元の画質に戻せる
・写真などの色数が多い画像でもイラストなどの単調な画像でも適している。
・ファイルサイズが大きくなりがち
【TIFF(ティフ/Tagged Image File Format)】
ファイル拡張子は「.tif(.tiff)」です。
データを圧縮しても画質などが損なわれることはありませんが、
データ容量が非常に大きいためWEBページに用いることはできません。
tifファイルでは以下の特徴があります。
・画像編集ソフトで編集可能
・データ容量が大きくなりがち
・WEBでは使用できない
【BMP(ビットマップ/ビーエムピー/Microsoft Windows Bitmap Image)】
ファイル拡張子は「.bmp」です。
Windows用の画像形式で、tifと同様にWEBページに用いることはできません。
tifファイルでは以下の特徴があります。
・データ容量が大きくなりがち
・WEBでは使用できない
何を使うべきか
WEBページを作成するにあたっては以下の拡張子が一般的に利用されます。
・JPEG
・GIF
・PNG
特に、ランディングページのように複雑なデザイン(色数が多く透過色も取り扱いたい)の場合、
png形式が適しているため使用頻度も高くなります。
上記のような特徴を理解して、なるべく容量の少ない形式を選びましょう。
作ったらそれでおしまい。
ではなく、何度もテストを重ねてより良い成果を生むランディングページを作成することが大切です。
貴社でお使いのランディングページを改善するための代表的なチェック項目を以下にまとめておりますので、ぜひダウンロードして活用してみてください。
弊社ではランディングページの無料簡易分析も承っております。
プロ視点で見た、貴社ランディングページの課題点を発見し、オーダーメイドの分析結果資料をお届けいたします。
詳しくはチェックリストをご覧ください。
BCJ管理人
ブルースクレイ・ジャパン(株)サイトの管理人です。 担当業務は全ファネル領域におけるサイト改善コンサルです。
BCJメールマガジンのご登録
最新のセミナー情報やお役立ち情報をメールにてお届け致します!
-
パンくずリストとは?種類やSEO効果、ユーザビリティ向上のメリットを徹底解説
2024.11.13
View more
-
共起語とは?サジェストや関連キーワードとの違い、調査方法とユーザーニーズを把握する方法を解説
2024.11.11
View more
-
PV(ページビュー)数とは?セッション数やUU数との違い、目安と増やす方法
2024.11.07
View more
-
被リンクとは?SEO効果や良質な被リンクの増やし方を徹底解説
2024.11.05
View more
-
コンテンツマーケティングとは?メリットや実施手順・成功事例を解説
2024.10.21
View more
-
robots.txtとは?書き方や確認方法、SEO上の効果について徹底解説!
2024.08.05
View more