普段目にする画像でよく使用されている「.jpg」「.png」「.gif」、これらの拡張子の違いって気になりませんか？
今回は、Webサイトでよく利用されている画像ファイルの拡張子についてわかりやすく説明します。
今回は、たくさんある拡張子の中で代表的なものを紹介するのでアール！
目次
①拡張子って何？
拡張子とは、「◯◯◯.jpg」「□□□.png」などファイル名の.（ピリオド）のあとに続く文字列をいいます。。
皆さんも下記の拡張子には馴染みがあると思います。
【書類系】
docx、docx、xlsx、ppt、pdf…
【画像/デザイン系】
jpg、png、gif、psd…【音楽/映像系】
mp3、mp4、wav、mov…
それぞれの拡張子には特有の特徴があり、用途に合ったフォーマットを選ぶことがポイントです。
※小文字表記が一般的ですが、大文字表記でも問題ありません。
今回のコラムでは、Webサイトに利用されている代表的な拡張子を紹介します！
②Webサイトに利用されている代表的な拡張子
1 .jpg（JPEG）（読み：ジェイペグ）
「.jpg」は、JPEG（Joint Photographic Experts Group）と呼ばれる画像ファイルの拡張子です。
JPEGは、写真やカラフルな画像を圧縮して保存するのに適しています。そのため、ファイルサイズが比較的小さくなり、Webサイトに画像を載せるときなどによく使われます。
ただし、高い圧縮率を使用すると画質が劣化する場合があるため、注意が必要です。
透明な部分がある
画像を書き出すと
また、jpg画像は透過することができません。
角丸画像や切り抜き画像をjpgで書き出すと、透過することができずに本来透明で表現されるはずの箇所が白や黒で表現されてしまいます。
2 .png（Portable Network Graphics）（読み：ピング）
「.png」は、Portable Network Graphicsの略で、切り抜かれた画像などの背景を透過することができる高品質な画像ファイル形式です。JPEGと比較して圧縮率はやや低いですが、画質の劣化が少なく、透明な部分を持つ画像やアイコンを保存するのに適しています。
また、文字や線がはっきりと表示されるため、Webデザインやイラスト作成にも使用されます。
透明な部分がある
画像を書き出すと
3 .gif（Graphics Interchange Format）（読み：ジフ）
最後に、「.gif」はGraphics Interchange Formatの略で、短いアニメーションやループする画像を保存するのに使用されます。例えば、可愛らしいアイコンやWeb広告でよく見られるアニメーション画像がこれに該当します。ただし、色の表示に制限があるため、写真や高品質な画像の保存には向いていません。
4 .svg（Scalable Vector Graphics）（読み：エスブイジー）
ベクター形式の画像ファイル拡張子「.svg」です。ベクター形式は、画像を拡大・縮小しても画質が劣化しないため、シンプルな形状やイラスト、ロゴの保存に適しています。Webデザインやグラフィックデザインに活用され、クリアで美しい画像を提供します。
これらの拡張子はそれぞれ異なる特性を持っています。
画像の用途や目的に合わせて適切な拡張子を選ぶことでより効果的に画像を利用することができます。実際に使用してみることで違いを感じることができると思います。
1.jpg画像
（74KB）
２.png画像
（29KB）
3.gif画像
（11KBの画像×3つ 37KB）
ワンポイント
上記に紹介した拡張子以外にもWeb技術やテクノロジーの変化に伴い、続々と新しいフォーマット拡張子も登場しています。
.webp（WebP）
Googleが開発した画像ファイル拡張子「.webp」です。この拡張子は、高い圧縮率と高画質を併せ持つ特徴があり、Webページの高速読み込みをサポートするために重要です。また、透明度やアニメーションのサポートもあるため、インタラクティブなコンテンツにも使用されています。将来的には、より多くのWebサイトやプラットフォームで採用される可能性があります。
.heic（High Efficiency Image Format）
.heicは、iOSデバイス（iPhoneやiPad）で一般的に使用される画像フォーマットです。圧縮率が高く、画質が優れているため、デバイスのストレージを節約しつつ高品質な画像を撮影できます。ただし、一部のプラットフォームやアプリはまだ.heic形式に対応していない場合もあるので注意が必要です。
まとめ
新しい拡張子は、より効率的な画像表示や保存を可能にするために開発されています。
ただし、利用する際にはデバイスやプラットフォームへの対応を確認することが大切です。Web技術やテクノロジーの変化に合わせて登場する新たな拡張子にも注目しながら、最適な拡張子を選ぶよう心掛けましょう！
違いに困った時はjpg、png、gifなどの拡張子で
書き出して比較してみてくださいね！
