概要

画像ファイル形式

画像ファイル形式は、デジタル画像データをコンピュータ上で保存・表示・転送するための標準的なフォーマットです。JPEG、PNG、GIF、BMP、SVG、WebP、AVIFなど、用途や特性に応じて様々な形式が存在します。それぞれ圧縮方式、透過性、アニメーション対応、色深度などの特徴があり、Web表示、印刷、写真保存、アイコン作成などの目的に応じて適切な形式を選択することが重要です。近年では高圧縮かつ高品質なWebPやAVIFなどの次世代形式も普及しつつあります。

画像形式 JPEG PNG GIF WebP AVIF SVG Web開発 グラフィックス
コード スラッグ 名称 概要 animation browserSupport compression extensions fullName mimeType transparency useCases
01 jpeg JPEG 写真画像に最適化された非可逆圧縮形式です。 false Universal (all browsers) 非可逆圧縮(DCTベース) [".jpg",".jpeg",".jpe",".jif",".jfif"] Joint Photographic Experts Group image/jpeg false ["写真画像","Web表示","デジタルカメラ","印刷用画像"]
02 png PNG 可逆圧縮とフルアルファ透過をサポートする形式です。 false Universal (IE9+) 可逆圧縮(DEFLATE) [".png"] Portable Network Graphics image/png true ["スクリーンショット","ロゴ・アイコン","透過画像","図表・図形"]
03 gif GIF アニメーションと1ビット透過をサポートする形式です。 true Universal (all browsers) 可逆圧縮(LZW) [".gif"] Graphics Interchange Format image/gif true ["シンプルなアニメーション","小さいアイコン","ロゴ","図形"]
04 bmp BMP Windows標準のビットマップ画像形式です。 false Universal (limited use) 無圧縮または可逆圧縮 [".bmp",".dib"] Bitmap image/bmp false ["Windowsアプリケーション","画像編集の中間形式","システムリソース"]
05 svg SVG XMLベースのスケーラブルベクター形式です。 true IE9+, Chrome 4+, Firefox 3+, Safari 3.2+, Edge 12+ XMLベース(HTTP圧縮可能) [".svg",".svgz"] Scalable Vector Graphics image/svg+xml true ["アイコン・ロゴ","図表・ダイアグラム","UI要素","印刷用グラフィックス"]
06 webp WebP Google開発の次世代Web画像形式です。 true Chrome 23+, Firefox 65+, Safari 14+, Edge 18+, Opera 12.1+ 非可逆・可逆両対応(VP8ベース) [".webp"] WebP image/webp true ["Web画像最適化","アニメーション","透過画像","レスポンシブ画像"]
07 avif AVIF AV1コーデックを使用した次世代画像形式です。 true Chrome 85+, Firefox 93+, Safari 16+, Opera 71+, Edge (Chromium-based) 非可逆・可逆両対応(AV1ベース) [".avif",".avifs"] AV1 Image File Format image/avif true ["高圧縮Web画像","HDR画像","高品質写真","次世代Web開発"]

画像ファイル形式は、デジタル画像を保存・表示・転送するために開発された標準的なフォーマットです。用途や特性に応じて様々な形式が存在し、それぞれ圧縮方式、透過性、アニメーション対応、色深度などの特徴が異なります。Web開発やグラフィックデザイン、写真管理など、目的に応じて最適な形式を選択することが重要です。

従来から広く使われているJPEG、PNG、GIFに加え、近年ではGoogleが開発したWebPや、Alliance for Open Mediaが策定したAVIFなどの次世代形式も急速に普及しています。これらの新しい形式は、従来の形式と同等以上の画質を保ちながら、より小さいファイルサイズを実現しており、Webページの高速化に大きく貢献しています。また、解像度に依存しないSVGなどのベクター形式は、アイコンやロゴ作成に不可欠な存在となっています。

各形式の特徴を理解し、写真にはJPEGやWebP、透過が必要な画像にはPNGやWebP、アイコンにはSVG、シンプルなアニメーションにはGIFやWebPといったように、用途に応じた使い分けを行うことで、最適な品質とファイルサイズのバランスを実現できます。最新のブラウザでは複数の形式を組み合わせたフォールバック戦略も可能となっており、より柔軟な画像配信が実現しています。