画像ファイルのことがすべてわかる。形式・保存・OGP・メタデータまで一通り
写真や図を残す・Webに載せる・SNSで共有するとき、どの形式で保存すればよいか、寸法や透過で嵌らないようにするにはどうすればよいか。画像ファイルの「形式」「中身の仕様」「デジタル保存」「SNS・OGP」を一通り押さえておくと、あとで困りにくい。この記事では、拡張子とMIMEからラスター・ベクター・RAW、色と透明度、メタデータ、用途別の選び方、そしてOGP（リンク共有時のプレビュー用メタデータ）の実務まで、読めば画像ファイルの全体像がつかめるようにまとめた。
画像ファイルの基礎：拡張子とMIME、ピクセルとラスター
画像ファイルは、拡張子（.png, .jpg など）で種類を表すことが多い。一方、Webやメールでは MIMEタイプ（例: image/png, image/jpeg）という文字列で種別をやり取りする。ブラウザやサーバーはこのMIMEを見て「画像として扱う」「どのデコーダで開くか」を決める。
ピクセルは、画像を構成する最小単位の点だ。一つ一つの点に色（と透明度）の情報が入る。ラスター画像は、このピクセルの格子（グリッド）で表現した画像で、PNG・JPEG・GIF・WebP・AVIF など、よく目にする形式のほとんどがラスターである。拡大すると点が粗くなる。対して ベクター画像は、点の座標や線・曲線の数式で形を表す。拡大しても滑らかで、ロゴや図形に向く。代表格が SVG だ。
用途で「どの形式が向くか」をすぐに確認したいときは、次のデモで保存・Web・SNS・印刷の4パターンを見られる。
形式の三大分類：ラスター、ベクター、RAW
画像形式は大まかに三つに分けられる。
- ラスター: ピクセルの集まり。写真・スキャン・イラストの多くはラスター。PNG, JPEG, GIF, WebP, AVIF, BMP, TIFF など。ビット深度・透過・圧縮（可逆／非可逆）は形式ごとに異なる。
- ベクター: 座標とパスで描く。拡大縮小に強い。SVG が代表的。写真の保存には向かず、ロゴ・アイコン・図表向き。SNSの多くはOGP用サムネイルにSVGをそのまま使えないため、ラスターに変換してから使う運用が多い。
- RAW: カメラのセンサーから得た生データに近い形式。各社独自（CR2, NEF, ARW など）と、Adobeのオープン形式 DNG（Digital Negative）がある。現像・編集用。長期保存ではDNGへの統一が推奨されることが多い。
どの場面でどれを使うかは、後述の「利用シーン別の選び方」とデジタル保存の観点で整理するとよい。
ラスター形式の中身：ビット深度、透過、圧縮、MIME
主要なラスター形式の特徴を簡潔にまとめる。
| 形式 | MIME | 透過 | 圧縮 | 備考 |
|---|
| PNG | image/png | あり（アルファ） | 可逆 | W3C仕様。Web・アーカイブで広く使われる。 |
| JPEG | image/jpeg | なし | 非可逆 | 写真配布で一般的。ファイルサイズを抑えやすい。 |
| GIF | image/gif | 1色指定 | 可逆 | 256色。アニメーション対応。 |
| WebP | image/webp | あり | 可逆/非可逆 | ブラウザ対応が進んでいる。 |
| AVIF | image/avif | あり | 可逆/非可逆 | 高効率。対応環境は増加傾向。 |
形式ごとの「保存向き」「透過」「SNSでの扱い」をタブで切り替えて確認できるデモを用意した。
色と透明度：RGB、RGBA、そしてSNSで嵌りやすい点
色は RGB（赤・緑・青の三成分）で表すことが多い。ここに アルファ（不透明度）を足したのが RGBA である。PNGでは、各ピクセルを3成分（不透明）または4成分（R,G,B,A）で持てる。W3CのPNG仕様では、アルファは0＝完全に透明、最大値＝完全不透明として定義される。
注意したいのは、SNS・OGP用のサムネイルだ。Open Graph や各社の画像要件では「PNG可」とされていても、PNGのRGBA（透過付き） が一部環境で正しく表示されない報告がある。とくにX（Twitter）では、OGP用は RGB（不透明）に変換 すると表示が安定しやすい。透過が必要ならPNGのままでもよいが、SNSでプレビューが崩れるようなら、背景を付けてRGBにしたPNGやJPEGを検討するとよい。
RAWとベクター：DNG、各社RAW、SVG
RAWは、カメラメーカーごとに形式が違う。CanonのCR2/CR3、NikonのNEF、SonyのARW など。いずれも仕様はメーカー公開の技術文書やリバースエンジニアリングに依存する。DNG（Adobe Digital Negative）は、それらを一つのオープンな形式にまとめるためのコンテナで、Library of Congressがアーカイブに推奨している。長期保存では、各社RAWをDNGへ変換して揃える運用がよく使われる。
SVGはベクターのため、拡大しても劣化しない。ただし多くのSNSではOGP用画像にSVGをサポートしていない。Webサイトの表示用にはそのまま使え、OGP用にはPNGやJPEGなどラスターに書き出して使う形になる。
メタデータ：Exif、XMP、IPTC
画像ファイルには、ピクセルデータのほかに メタデータ（付帯情報）を埋め込める。
- Exif: 撮影日時・カメラ・レンズ・露出・GPSなど。デジカメ・スマホでよく使われる。
- XMP: Adobe系の汎用メタデータ。編集履歴・著作権・キーワードなどを格納。多くの形式で利用可能。
- IPTC: ニュース・報道向けの説明・キーワード・著作権者など。
保存や互換性を考えると、重要な情報はメタデータにも入れておくとよい。形式によってサポートが異なる（JPEGはExifが一般的、PNGはtEXtなど、TIFF/DNGは複数対応）。
デジタル保存：ロスレスと非可逆、アーカイブ向き形式、形式の寿命
長期保存では、ロスレスな形式を選ぶと再現性が高い。PNG、TIFF（無圧縮またはLZW）、DNG、JPEG 2000 などが候補になる。非可逆（JPEG、WebPの非可逆モードなど）は配布・表示用には便利だが、何度も保存し直すと劣化が積み重なるので、原保存には向かない。
形式の「寿命」は、標準化されているか・デコーダが広くあるかで決まる。オープンで仕様が公開されている形式のほうが、長い目では有利になりやすい。
利用シーン別の選び方
- 長期・アーカイブ: PNG, TIFF, DNG, JPEG 2000。ロスレスを選び、メタデータも残す。
- Web表示: PNG, JPEG, WebP, AVIF。ブラウザ対応を確認。透過が必要ならPNG/WebP/AVIF。
- SNS・OGP: JPEG, PNG（RGB推奨）, WebP, GIF。各社の寸法・アスペクト・形式制限に合わせる。
- 印刷・DTP: TIFF, PDF, 高解像度のPNG/JPEG。解像度・色空間（CMYKなど）は別途確認する。
SNS・OGPの実務：寸法、アスペクト、デバッガー、キャッシュ
リンクを共有したときに、サムネイル画像が正しく表示されるようにする仕組みが OGP（Open Graph Protocol）である。必須のメタタグは og:url, og:image, og:type, og:title の4つ。画像については、og:image:width と og:image:height を指定しておくと、Facebookのクローラーが画像をダウンロードせずに寸法を把握でき、初回表示が速くなる。
各プラットフォームの画像要件は次のとおり。
- Meta（Facebook）: 推奨 1200×630 px、アスペクト比 1.91:1。最小 600×315。ファイルサイズ上限 8 MB。
- X（Twitter）: アスペクト比 2:1。最小 300×157。JPG, PNG, WEBP, GIF 対応。SVGは非対応。
- LinkedIn: 最小 1200×627、推奨アスペクト 1.91:1。5 MB 以下。幅が 401 px 未満だとサムネイル表示になる。
- Google News: 最小 60×90。実務では 1200×630 以上を推奨する説明が多い。Schema.org または og:image で記事画像を指定する。
幅から「1.91:1」「2:1」の推奨高さを計算したいときは、次のデモが使える。
用意した画像の幅・高さが各社の要件を満たすかは、寸法チェッカーで確認できる。
OGP用のメタタグ例を生成し、コピーしてHTMLに貼りたいときはこちら。
画像の選定から公開確認までの流れを、4ステップで追えるデモも用意した。
1.91:1 と 2:1 では、同じ画像でも切り出し範囲が変わる。一枚で両方に合わせるなら、1200×630 が無難だ。
キャッシュと差し替え
Facebook・LinkedIn・X などは、URLごとに画像をキャッシュする。画像を差し替えても、同じURLのままではプレビューが更新されないことがある。新しい画像は 新しいURL で配信するか、各社のデバッガーで再取得をかける。Facebookは Sharing Debugger、Xは Card Validator(今は、もうサービス停止みたいです)、LinkedInは Post Inspector でプレビューを確認し、必要に応じてキャッシュをクリアする。
📝
NOTE
OGP用に og:image:width と og:image:height を指定すると、クローラーが画像をダウンロードせずに寸法を把握でき、初回表示が速くなることがある（Metaのドキュメントで推奨）。
まとめ
- 画像ファイルは 拡張子・MIME で種別され、ラスター（ピクセルの格子）が一般的。ベクター（SVG）は図形向き、RAW は現像・保存用。
- ラスターの 中身（ビット深度・透過・圧縮）は形式ごとに異なる。SNS用ではPNGのRGBAが一部で問題になることがあるため、OGP用はRGBにすると安定しやすい。
- メタデータ（Exif, XMP, IPTC）は保存・互換性のために重要。長期保存では ロスレス 形式を選び、用途（保存／Web／SNS／印刷）に応じて形式を切り替える。
- OGP では必須4タグに加え、
og:image:width / og:image:height を指定するとよい。各社の寸法・アスペクトを満たし、差し替え時はURLを変えるかデバッガーで再取得する。
上で紹介したデモ（用途別形式、アスペクト比、寸法チェック、メタタグ生成、形式表、選定フロー、クロップ比較）で、手元の画像がどの形式・寸法で使えるか確認してみてほしい。
さらに深く学ぶには