HTML
画像ファイル形式 - HTML
画像ファイル形式は、デジタル画像データをコンピュータ上で保存・表示・転送するための標準的なフォーマットです。JPEG、PNG、GIF、BMP、SVG、WebP、AVIFなど、用途や特性に応じて様々な形式が存在します。それぞれ圧縮方式、透過性、アニメーション対応、色深度などの特徴があり、Web表示、印刷、写真保存、アイコン作成などの目的に応じて適切な形式を選択することが重要です。近年では高圧縮かつ高品質なWebPやAVIFなどの次世代形式も普及しつつあります。
画像形式
JPEG
PNG
GIF
WebP
AVIF
SVG
Web開発
グラフィックス
<table>
<thead><tr><th>code</th><th>slug</th><th>name</th><th>description</th><th>animation</th><th>browserSupport</th><th>compression</th><th>extensions</th><th>fullName</th><th>mimeType</th><th>transparency</th><th>useCases</th></tr></thead>
<tbody><tr><td>01</td><td>jpeg</td><td>JPEG</td><td>写真画像に最適化された非可逆圧縮形式です。</td><td>false</td><td>Universal (all browsers)</td><td>非可逆圧縮（DCTベース）</td><td>[".jpg",".jpeg",".jpe",".jif",".jfif"]</td><td>Joint Photographic Experts Group</td><td>image/jpeg</td><td>false</td><td>["写真画像","Web表示","デジタルカメラ","印刷用画像"]</td></tr>
<tr><td>02</td><td>png</td><td>PNG</td><td>可逆圧縮とフルアルファ透過をサポートする形式です。</td><td>false</td><td>Universal (IE9+)</td><td>可逆圧縮（DEFLATE）</td><td>[".png"]</td><td>Portable Network Graphics</td><td>image/png</td><td>true</td><td>["スクリーンショット","ロゴ・アイコン","透過画像","図表・図形"]</td></tr>
<tr><td>03</td><td>gif</td><td>GIF</td><td>アニメーションと1ビット透過をサポートする形式です。</td><td>true</td><td>Universal (all browsers)</td><td>可逆圧縮（LZW）</td><td>[".gif"]</td><td>Graphics Interchange Format</td><td>image/gif</td><td>true</td><td>["シンプルなアニメーション","小さいアイコン","ロゴ","図形"]</td></tr>
<tr><td>04</td><td>bmp</td><td>BMP</td><td>Windows標準のビットマップ画像形式です。</td><td>false</td><td>Universal (limited use)</td><td>無圧縮または可逆圧縮</td><td>[".bmp",".dib"]</td><td>Bitmap</td><td>image/bmp</td><td>false</td><td>["Windowsアプリケーション","画像編集の中間形式","システムリソース"]</td></tr>
<tr><td>05</td><td>svg</td><td>SVG</td><td>XMLベースのスケーラブルベクター形式です。</td><td>true</td><td>IE9+, Chrome 4+, Firefox 3+, Safari 3.2+, Edge 12+</td><td>XMLベース（HTTP圧縮可能）</td><td>[".svg",".svgz"]</td><td>Scalable Vector Graphics</td><td>image/svg+xml</td><td>true</td><td>["アイコン・ロゴ","図表・ダイアグラム","UI要素","印刷用グラフィックス"]</td></tr>
<tr><td>06</td><td>webp</td><td>WebP</td><td>Google開発の次世代Web画像形式です。</td><td>true</td><td>Chrome 23+, Firefox 65+, Safari 14+, Edge 18+, Opera 12.1+</td><td>非可逆・可逆両対応（VP8ベース）</td><td>[".webp"]</td><td>WebP</td><td>image/webp</td><td>true</td><td>["Web画像最適化","アニメーション","透過画像","レスポンシブ画像"]</td></tr>
<tr><td>07</td><td>avif</td><td>AVIF</td><td>AV1コーデックを使用した次世代画像形式です。</td><td>true</td><td>Chrome 85+, Firefox 93+, Safari 16+, Opera 71+, Edge (Chromium-based)</td><td>非可逆・可逆両対応（AV1ベース）</td><td>[".avif",".avifs"]</td><td>AV1 Image File Format</td><td>image/avif</td><td>true</td><td>["高圧縮Web画像","HDR画像","高品質写真","次世代Web開発"]</td></tr></tbody>
</table>