静岡のHP屋コラム

2017.02.26

今さら聞けない? ホームページ制作に使用する画像の種類

みなさんはホームページにどんな種類の画像を使用しているか気にしたことはありますか?
特に気にしていない方も多いかもしれませんが、一口に画像といっても様々な形式があります。

今回はホームページに使用できる画像形式(ファイルフォーマット)とその特徴について解説したいと思います。

どんな形式の画像がホームページ制作に使用できるのか?

画像ファイルというとよく名前があがるのが、BMP(ビットマップ)、JPEG(ジェイペグ)、GIF(ジフ)、PNG(ピング)、TIFF(ティフ)などです。
しかし、このうちホームページ制作に使用できるのはJPEG、GIF、PNGの3種類であり、BMPとTIFFは使用できません。

パソコンに入っている画像が上記のどの画像形式にあたるかは拡張子を見ることで判断できます。拡張子とはファイル名の一番最後にある「.jpg」のようなドット以降の文字列のことです。Windowsの設定によってはパソコンでは拡張子が表示されない場合がありますので、その場合は設定を変更しましょう。

JPEG(ジェイペグ)の特徴

JPEGとはJoint Photograph Experts Groupの略で、拡張子は「.jpg」※です。
デジカメでは基本的に写真をJPEG形式で保存するので、デジカメを使う人はなじみのある形式かもしれません。

特徴としては
最大1670万色まで扱うことができる
・ファイルを不可逆圧縮している
などがあります。

写真の保存に適したファイル形式ですが、不可逆圧縮という方式でファイルを圧縮しているため、何度もファイルを保存しなおすと画質が悪くなっていくという特徴があります。
そのため、画像加工を行う際は注意が必要です。

※JPEGの拡張子は「.jpeg」、「.jpe」、「.jfif」と表記される場合もありますが「.jpg」または「.jpeg」を使うのが一般的で無難でしょう。

GIF(ジフ)の特徴

GIFとはGraphics Interchange Formatの略で、拡張子は「.gif」です。
GIFはJPEGとは異なり、最大256色までしか扱うことができません。

しかし、JPEGにはない特徴として
・画像に透過(透明色)を使用できる
可逆圧縮のため、保存を繰り返しても劣化しない
・パラパラ漫画のようなアニメーションを扱える
といったものがあります。

上記のような特徴からGIFはアイコンやイラストといった単色・ベタ面が多い画像、またはアニメーションを取り入れた画像に適しています。

PNG(ピング)の特徴

PNGとはPortable Network Graphicの略で、拡張子は「.png」です。
PNGはJPEGやGIFよりは後発のフォーマットで、Web上での使用を目的に開発されたフォーマットです。

特徴としては
最大1670万色まで扱うことができる
可逆圧縮のため、保存を繰り返しても劣化しない
・画像に透過(透明色)を使用できる
というようにJPEGとGIFのいいとこどりをしたような形式です。

しかし、その分JPEGと比べるとファイルサイズは大きくなってしまうため、容量に関しては注意が必要です。


以上簡単ですが、ホームページに使用できるJPEG、GIF、PNGについていかがでしたでしょうか。

私個人的には
・写真をそのまま使う場合はJPEG
・アニメーションを使う場合はGIF
・上記に当てはまらない場合はPNG
というように画像形式を使いわけています。

何が正解はありませんが、みなさんもこれを機に一度ホームページに使う画像について考えてみてください。

お気軽にお問い合わせください
参加無料HP活用セミナーのご案内

ホームページ応援隊対応エリア

静岡市・沼津市・三島市・駿東郡(清水町・長泉町・小山町)・富士市・富士宮市・裾野市・御殿場市・伊豆市・伊豆の国市・伊東市・熱海市・焼津市・藤枝市・函南町

その他の地域の方はお気軽にご相談ください。

毎月2社様限定 HP無料診断

HP成功法則45(無料小冊子)プレゼント中

セミナーのご案内&実績

「地域+サービス名」で顧客をつかむ最新SEO対策セミナー

お店や商品、サービスの情報や評判などを調べるとき、多くの方が手元にあるスマホやタブレットを使ってその場で調べるようになりました。地域情報を調べる見込み客にアプローチする為に、サイトや店舗の情報を上位表示させるためはどうすればいいのか、その具体的な方法をお伝えします。

【11月/12月】集客が2倍になるスマホサイト徹底公開セミナー

スマホの普及率は爆発的に増えており、スマホサイトの重要性は高まり続けています。今回のセミナーでは、スマホで見やすく、目的の行動をしやすいサイトにするためのポイントをお伝えします。

10/19(水)集客が2倍になるスマホサイト徹底公開セミナー@沼津

スマホの普及率は爆発的に増えており、スマホサイトの重要性は高まり続けています。今回のセミナーでは、スマホで見やすく、目的の行動をしやすいサイトにするためのポイントをお伝えします。

新着情報一覧へ

サイト内検索

このサイトの運営会社

㈱アーティスティックス
411-0943 静岡県駿東郡長泉町下土狩690-1-101

TEL:055-928-6500
FAX:055-928-6501
お問い合わせはこちら
運営会社情報はこちら

ページの先頭へ