- 技術 💻
WebP・HEICとは|JPG・PNGへの変換と画像圧縮を実測で解説
結論
WebPはWeb用、HEICはiPhoneの写真用の、JPGより軽い画像形式です。開けないときはJPG・PNGに変換します。
この記事でわかること
- Windows・Mac・iPhoneの変換手順と設定名
- 5形式×画質14通りのサイズとSSIMの実測表
- エラー・症状14件の直し方と位置情報の扱い
変換先は「何に使うか」で決まります。人に渡すなら JPG(透過があれば PNG)、Web サイトに載せるなら WebP か AVIF、容量を減らしたいなら形式の変更と縮小を組み合わせます。
flowchart TD
A{人に渡す?} -->|はい| C[JPG に変換<br>透過は PNG]
A -->|いいえ| B{Web に載せる?}
B -->|はい| D[WebP・AVIF<br>+予備の JPG]
B -->|容量を減らす| E[縮小・減色<br>形式の変更]
よくある用事ごとの方法を先にまとめます。
| やりたいこと | 方法 | 補足 |
|---|---|---|
| HEIC を JPG にする(Windows) | フォトで開く →[…]→ 名前を付けて保存 → JPG | HEIF と HEVC の拡張機能が要る |
| HEIC・WebP を JPG にする(Mac) | プレビュー → ファイル → 書き出す | フォーマットで JPEG を選ぶ |
| iPhone で最初から JPG で撮る | 設定 → カメラ → フォーマット → 互換性優先 | 撮影済みの写真は変わらない |
| WebP を JPG・PNG にする | ペイントやプレビューで開いて保存 | 透過があるなら PNG |
| まとめて変換する | mogrify -format jpg *.webp |
ImageMagick。Python の完成スクリプトもある |
| JPG・PNG を WebP にする | cwebp -q 80 in.jpg -o out.webp |
写真は同じ見た目で JPG より約26%小さい |
| PNG を軽くする | pngquant で減色、optipng で可逆圧縮 |
スクリーンショットで約65%減 |
| Web サイトに載せる | <picture> に WebP と JPG を並べる |
HEIC は Chrome では表示されない |
確認環境:Ubuntu 24.04.4 LTS・libwebp 1.3.2(cwebp・dwebp・gif2webp・anim_dump・webpinfo)・libheif 1.17.6(heif-enc・heif-convert、エンコーダーは x265 3.5)・ImageMagick 6.9.12-98・FFmpeg 6.1.1・Python 3.11.15・Pillow 13.0.0(libwebp 1.6.0・libavif 1.4.2)・pillow-heif 1.8.1(libheif 1.23.6)・NumPy 2.4.6・pngquant 2.18.0・OptiPNG 0.7.8・file 5.45・Chromium 141(ヘッドレス、picture 要素と Accept ヘッダーの確認)。試験画像は scikit-image 0.26.0 に同梱のサンプル画像(astronaut:NASA のパブリックドメイン、coffee:CC0)と、自作の画面キャプチャ・透過ロゴです。この記事のコマンド・コードはすべて実行し、出力・エラー文・ファイルサイズを載せています。SSIM と PSNR は NumPy で自作した計算で出しました(SSIM は輝度に 11×11 のガウス窓)。Windows・Mac・iPhone の画面の手順は Apple サポート・Microsoft Store・Microsoft Q&A で、形式の仕様は Google の WebP ドキュメント・RFC 9649・ISO で、ブラウザの対応は Can I use で、WordPress の動きは Make WordPress Core で確かめました(確認日 2026年10月22日)。
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
(記載例)出典:株式会社RJC「WebP・HEICとは|JPG・PNGへの変換と画像圧縮を実測で解説」
WebPとは(Googleが作ったWeb用の画像形式)
この節では、WebP が何のための形式で、何ができるかが分かります。
WebP(拡張子 .webp)は、Google が Web の画像を軽くするために作った画像形式です。 2010年9月に Google の開発者ブログで発表されました。 写真向けの非可逆圧縮(少し画質を捨てて小さくする)と、図やロゴ向けの可逆圧縮(画素を1つも変えない)の両方に対応し、透過とアニメーションも1つの形式で扱えます。2024年11月には仕様が RFC 9649「WebP Image Format」として公開され、MIME タイプ image/webp が登録されています。
1JPG より小さい
Google の FAQ は「JPEG より平均30%多く圧縮できる」としています。この記事の実測では、同じ SSIM で JPG より26%小さくなりました。
2可逆でも PNG より小さい
FAQ では可逆の WebP は PNG より26%小さいとされます。画面キャプチャでは PNG(最適化後)の61%の大きさでした。
3透過とアニメーション
PNG の透過も、GIF のアニメーションも1つの形式で持てます。アニメの GIF は WebP にすると38%小さくなりました。
4主要ブラウザが対応
Can I use の集計で、世界の利用者の97.18%のブラウザが WebP を表示できます(2026年10月22日時点)。
WebP の中身は、RIFF という入れ物に、VP8(非可逆)か VP8L(可逆)の画像データを入れたものです。ファイルの先頭16バイトを見ると、それが分かります。
od -A d -t x1z -N 16 photo.webp
0000000 52 49 46 46 be 99 00 00 57 45 42 50 56 50 38 20 >RIFF....WEBPVP8 <
できないこと・注意も押さえておきます。
| 項目 | WebP の仕様(Google の FAQ・RFC 9649) |
|---|---|
| 最大の大きさ | 幅・高さとも 16383 ピクセル |
| 色 | 非可逆は 8 ビットの YUV 4:2:0、可逆は RGBA |
| プログレッシブ表示 | JPEG・PNG のような段階表示は無い(届いた行から順に表示する方式) |
| メタデータ | EXIF・XMP・ICC プロファイルを入れられる(cwebp の既定は入れない) |
| 編集ソフト | Photoshop は 23.2 から WebP の読み書きに対応(Adobe のヘルプ) |
HEICとは(iPhoneの写真の形式・HEIFとの関係)
この節では、HEIC が何で、なぜ iPhone の写真がこの形式になっているかが分かります。
HEIC(拡張子 .heic)は、HEIF という画像ファイルの規格に、動画の圧縮方式 HEVC(H.265)で圧縮した画像を入れたものです。 HEIF は MPEG が作った規格で、ISO/IEC 23008-12(現行は2025年版)として定められています。Apple は iOS 11・macOS High Sierra から HEIF に対応し、iPhone のカメラの[フォーマット]が[高効率]のとき、写真はこの形式で保存されます。
| 言葉 | 意味 | 拡張子 |
|---|---|---|
| HEIF | 画像を入れる入れ物の規格(High Efficiency Image File Format) | .heif |
| HEVC | 動画の圧縮方式(H.265)。HEIC の画像の圧縮に使う | ― |
| HEIC | HEVC で圧縮した画像を入れた HEIF | .heic |
| AVIF | AV1 という別の方式で圧縮した画像を入れた HEIF | .avif |
ファイルの先頭を見ると、ftyp の後に heic という印(ブランド)が入っています。
0000000 00 00 00 1c 66 74 79 70 68 65 69 63 00 00 00 00 >....ftypheic....<
0000016 6d 69 66 31 68 65 69 63 6d 69 61 66 00 00 01 a2 >mif1heicmiaf....<
HEIC のよい点は、同じ見た目で JPG よりかなり小さいことです。 この記事の実測では、同じ SSIM(見た目の近さの数値)で JPG の55%の大きさでした。一方で、HEVC の特許の使用料の問題があり、Can I use は「ライセンスの費用が高く、ブラウザの採用が難しい」と注記しています。2026年10月22日時点で HEIC を表示できるブラウザは Safari 17 以降だけで、利用者の割合は16.93%です。
HEIF は、回転の情報や撮影情報(EXIF)も一緒に持てます(この記事で作った HEIC を heif-info で見ると、Exif: 222 bytes と angle (ccw): 270 が表示されました)。iPhone で撮った HEIC には、位置情報の設定によっては GPS の座標が入ります。変換したときに位置情報がどうなるかは、後の「透過・アニメーション・回転・位置情報の扱い」の節で実物を示します。
WebP・HEIC・JPG・PNG・AVIFの違い(比較表)
この節では、5つの形式の違いと、どれを選ぶかが分かります。
| 項目 | JPG(JPEG) | PNG | WebP | HEIC |
|---|---|---|---|---|
| 圧縮 | 非可逆 | 可逆 | 非可逆・可逆の両方 | 非可逆・可逆の両方 |
| 透過 | できない | できる | できる | できる |
| アニメーション | できない | APNG で可 | できる | 連続画像として可 |
| 色数 | 約1677万色(8 ビット) | 約1677万色・16 ビットも可 | 約1677万色(8 ビット) | 10 ビットも可 |
| 向いている画像 | 写真 | 図・ロゴ・画面キャプチャ | Web の写真・図の両方 | スマホの写真の保存 |
| 項目 | AVIF | GIF |
|---|---|---|
| 圧縮 | 非可逆・可逆の両方 | 可逆(256色まで) |
| 透過 | できる | 1 ビット(透明か不透明か)だけ |
| アニメーション | できる | できる |
| 向いている画像 | Web の写真 | 小さなアニメーション |
対応状況は次のとおりです(ブラウザは Can I use、Android は Android Developers、Windows は Microsoft Store の拡張機能のページで確認。2026年10月22日時点)。
| 形式 | ブラウザ | OS の標準での表示 |
|---|---|---|
| WebP | 97.18%(Chrome 32・Edge 18・Firefox 65・Safari 14 から) | Windows は「WebP 画像表示オプション」、Android 4.0 以降、iOS 14・macOS 11 以降 |
| AVIF | 96.35%(Chrome 85・Edge 121・Firefox 93・Safari 16.4 から) | Android 12 以降で表示 |
| HEIC | 16.93%(Safari 17 以降だけ) | iOS 11・macOS 10.13 以降、Android 9 以降(機種による)、Windows は拡張機能が要る |
| JPG・PNG | すべての主要ブラウザ | すべての OS |
Google 画像検索が扱う形式は BMP・GIF・JPEG・PNG・WebP・SVG・AVIF で、HEIC は入っていません(Google 検索セントラル「Google 画像検索 SEO のベストプラクティス」)。Web サイトに HEIC のまま載せる理由はありません。
どの形式を選ぶかの判断表
| 状況 | 選ぶ形式 | 理由 |
|---|---|---|
| 写真を人に送る・どこでも開けるようにする | JPG | すべての OS・アプリで開ける |
| ロゴ・図・画面キャプチャを人に送る | PNG | 文字がにじまない。透過も残る |
| Web サイトの写真 | WebP(+JPG の予備) | 小さく、97%のブラウザで表示できる |
| Web サイトの写真をさらに小さく | AVIF(+WebP・JPG の予備) | 同じ見た目で WebP より小さくなることが多い |
| Web サイトのロゴ・アイコン | SVG か WebP(可逆)か PNG | 図形なら SVG、画素の画像なら可逆 WebP |
| iPhone の写真を保存する | HEIC のまま | 容量が小さい。渡すときに変換する |
| 編集してから何度も保存する | PNG(作業用)→ 最後に JPG・WebP | 非可逆で保存し直すたびに画質が落ちる |
HEICが開けない・WebPが開けない原因
この節では、「開けない」「表示されない」ときに、どこが原因かが分かります。
原因はほとんどの場合、開こうとしたアプリや OS が、その形式の読み方(コーデック)を持っていないことです。ファイルが壊れているわけではありません。
| 症状 | 原因 | 直し方 |
|---|---|---|
| Windows で HEIC がフォトで開けない | HEIF・HEVC の拡張機能が入っていない | Microsoft Store から入れる(次の節) |
| Chrome・Edge で HEIC の画像が出ない | Chrome・Edge・Firefox は HEIC に対応していない | JPG か WebP に変換して載せる |
| 以前の版の画像ソフトで WebP が開けない | そのソフトが WebP に未対応 | ソフトを更新するか、JPG・PNG に変換 |
保存した画像が .webp になる |
サイトがブラウザに WebP を返している | 下の実験を参照。開けるアプリで変換する |
拡張子は .jpg なのに開けない |
中身が WebP や HEIC で、拡張子だけ違う | file コマンドなどで中身を確かめる |
| Python・コマンドで開けない | HEIC の読み込み部品が無い | pillow-heif や libheif を入れる |
ブラウザで保存すると WebP になる理由
Chromium 141 で画像を読み込ませ、ローカルのサーバーで、ブラウザが送ってきた Accept ヘッダーを記録しました。サーバーは、Accept に image/webp があれば WebP を、無ければ JPG を返すようにしています。
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
返した Content-Type: image/webp 25812 bytes
Accept: */*
返した Content-Type: image/jpeg 53187 bytes
curl: image/jpeg 53187 bytes
同じ URL でも、Chromium には WebP、curl には JPG が返りました。 ブラウザが「WebP も読める」と伝えるので、サーバーや CDN が WebP を返し、それをそのまま保存すると .webp になります。
拡張子と中身が違うとき
拡張子は名前の一部にすぎず、中身の形式とは別です。file コマンドは先頭のバイトで形式を判定します。photo.webp を fake.jpg という名前にコピーして調べました。
file photo.jpg photo.webp IMG_0001.HEIC logo.png fake.jpg
photo.jpg: JPEG image data, JFIF standard 1.01, resolution (DPCM), density 37x37, segment length 16, baseline, precision 8, 600x400, components 3
photo.webp: RIFF (little-endian) data, Web/P image, VP8 encoding, 600x400, Scaling: [none]x[none], YUV color, decoders should clamp
IMG_0001.HEIC: ISO Media, HEIF Image HEVC Main or Main Still Picture Profile
logo.png: PNG image data, 480 x 480, 8-bit/color RGBA, non-interlaced
fake.jpg: RIFF (little-endian) data, Web/P image, VP8 encoding, 600x400, Scaling: [none]x[none], YUV color, decoders should clamp
fake.jpg は中身が WebP だと判定されました。先頭のバイトは、JPG が ff d8 ff、PNG が 89 50 4e 47(.PNG)、WebP が RIFF....WEBP、HEIC が ....ftypheic です。
WindowsでHEIC・WebPをJPG・PNGに変換する(フォト・ペイント)
この節では、Windows に最初から入っているアプリだけで変換する手順が分かります。
Windows で HEIC を開くには、Microsoft Store の拡張機能が要ります。ストアの説明では、「HEIF 画像表示オプション」(HEIF Image Extensions)で HEIF 形式のファイルの読み書きができるようになり、.heic の画像を表示するには、あわせて「HEVC ビデオ拡張機能」が必要です。HEVC ビデオ拡張機能は有料の場合があり、価格はストアのページに表示されます。WebP は「WebP 画像表示オプション」で、エクスプローラーやフォトで表示できるようになります。
フォトで開く
エクスプローラーでファイルを右クリックし、[プログラムから開く]→[フォト]を選びます。HEIC が開けないときは、上の拡張機能を入れます。
[…]から名前を付けて保存
右上の[…](もっと見る)を開き、[名前を付けて保存]を選びます。
ファイルの種類を選ぶ
[ファイルの種類]で JPG(JPEG)を選びます。透過のある WebP は PNG を選ぶと透過が残ります。
ペイントでも、開いてから[ファイル]→[名前を付けて保存]で JPEG 画像・PNG 画像として保存できます(Microsoft Q&A の回答)。同じ Q&A には、1.52MB の HEIC をフォトで JPG にすると 2.03MB、ペイントでは 2.64MB になったという報告があります。HEIC から JPG にすると、ファイルは大きくなるのが普通です。 圧縮の効率が JPG のほうが低いためで、画質がよくなるわけではありません。
たくさんのファイルをまとめて変換するときは、後の「コマンドで変換する」の ImageMagick か、「Python でまとめて変換する」のスクリプトが使えます。Python のスクリプトは Windows でもそのまま動きます。
MacでHEIC・WebPをJPG・PNGに変換する(プレビュー・Finder)
この節では、Mac の標準のアプリで変換する手順が分かります。
プレビューで開き、[ファイル]→[書き出す]を選び、[フォーマット]で JPEG か PNG を選んで保存します。 Apple のプレビューのユーザガイドでは、[フォーマット]で選べるのは HEIC・JPEG・JPEG-2000・OpenEXR・PDF・PNG・TIFF で、Option キーを押しながら[フォーマット]をクリックすると、特殊な形式や以前の形式も表示されます。WebP はこの一覧には入っていないので、Mac の標準のアプリで JPG・PNG を WebP にするのは難しく、後の cwebp などのコマンドを使います。
プレビューでまとめて変換
複数のファイルを1つのウインドウで開く
サイドバーで全部を選ぶ
[ファイル]→[書き出す]で形式を選ぶ
Finder のクイックアクション
Finder でファイルを選んで右クリック
[クイックアクション]→[その他]→[画像を変換]
形式とサイズを選んで変換
Finder の[画像を変換]は、Apple の Mac ユーザガイドに「形式やサイズを選択」とあり、縮小も同時にできます。
iPhoneでHEICをやめてJPGで保存する(互換性優先)
この節では、iPhone の写真を最初から JPG にする設定と、パソコンに送るときに JPG にする設定が分かります。
[設定]→[カメラ]→[フォーマット]で[互換性優先]を選ぶと、これから撮る写真は JPEG、ビデオは H.264 になります(Apple サポート「Apple 製デバイスで HEIF や HEVC メディアを使う」)。[高効率]に戻すと HEIF・HEVC で撮影されます。
撮るときから JPG にする
[設定]→[カメラ]→[フォーマット]→[互換性優先]。撮影済みの HEIC は変わりません。
パソコンに送るときの形式を決める
[設定]→[アプリ]→[写真]で下へスクロールし、元の HEIC のまま送りたいときは[元のフォーマットのまま]を選びます。選ばないと、USB で Windows の PC に読み込むときなどに JPEG に変換されることがあります。
共有のときは自動で変換されることがある
AirDrop・メッセージ・メールでは、受け取る側が対応していなければ JPEG で共有される場合があります。iCloud 写真は元の形式のまま保ちます。
iPhone だけで1枚を JPEG にする方法として、写真を[コピー]して[ファイル]アプリに[ペースト]すると JPEG で保存される手順も、All About の記事で紹介されています。
[互換性優先]にすると、相手の環境を気にせず渡せる代わりに、写真1枚あたりの容量が増えます。この記事の実測では、同じ見た目の JPG は HEIC の約1.8倍の大きさでした。iPhone の空き容量が少ないなら[高効率]のまま撮り、渡すときだけ変換する方法もあります。
コマンドで変換する(cwebp・dwebp・ImageMagick・ffmpeg・heif-convert)
この節では、コマンドで WebP・HEIC・JPG・PNG を相互に変換する書き方と、実際の出力が分かります。
| やりたいこと | コマンド | 道具 |
|---|---|---|
| JPG・PNG → WebP | cwebp -q 80 in.jpg -o out.webp |
libwebp |
| PNG → 可逆の WebP | cwebp -lossless in.png -o out.webp |
libwebp |
| WebP → PNG | dwebp in.webp -o out.png |
libwebp |
| GIF → アニメの WebP | gif2webp -q 80 in.gif -o out.webp |
libwebp |
| HEIC → JPG | heif-convert -q 90 in.heic out.jpg |
libheif |
| JPG・PNG → HEIC | heif-enc -q 50 in.png -o out.heic |
libheif |
| 何でも → 何でも | convert in.webp -quality 85 out.jpg |
ImageMagick 6 |
| まとめて変換 | mogrify -path out -format jpg *.webp |
ImageMagick 6 |
| JPG・PNG → WebP | ffmpeg -i in.jpg -c:v libwebp -quality 80 out.webp |
FFmpeg |
ImageMagick 7 では、コマンド名が convert から magick(例:magick in.webp out.jpg)に変わります。Ubuntu 24.04 の apt で入るのは 6 系です。
入れ方
| OS | コマンド |
|---|---|
| Ubuntu・Debian | sudo apt install webp libheif-examples imagemagick ffmpeg |
| Mac(Homebrew) | brew install webp libheif imagemagick ffmpeg |
| Windows | Google の WebP のページから libwebp を、ImageMagick・FFmpeg は各公式サイトから入手 |
Ubuntu 24.04 で HEIC を書き出すには、libheif-plugin-x265(エンコーダー)も要りました。入れる前の heif-enc --list-encoders には、HEIC の行に何も出ませんでした。
cwebp で JPG を WebP にする
cwebp -q 80 photo.jpg -o photo.webp
Saving file 'photo.webp'
File: photo.jpg
Dimension: 600 x 400
Output: 39366 bytes Y-U-V-All-PSNR 39.49 42.06 41.58 40.13 dB
(1.31 bpp)
block count: intra4: 839 (88.32%)
intra16: 111 (11.68%)
skipped: 0 (0.00%)
bytes used: header: 196 (0.5%)
mode-partition: 4129 (10.5%)
103,579 バイトの JPG(品質92)が 39,366 バイトになりました。-q を省くと 75 です。よく使うオプションは次のとおりです(Google の cwebp のドキュメント)。
| オプション | 意味 | 既定 |
|---|---|---|
-q 0〜100 |
画質。大きいほどきれいで大きい | 75 |
-m 0〜6 |
圧縮にかける手間。大きいほど小さく遅い | 4 |
-lossless |
可逆(画素を変えない) | 使わない |
-near_lossless 0〜100 |
可逆に近い前処理。60 前後が目安 | 100(使わない) |
-alpha_q 0〜100 |
透過の部分の画質。100 は可逆 | 100 |
-metadata all |
EXIF・ICC・XMP を写す | none(写さない) |
-resize 幅 高さ |
縮小。片方を 0 にすると比率を保つ | ― |
-size バイト数 |
目標のファイルサイズに近づける | ― |
-preset photo など |
画像の種類に合わせた設定(最初に書く) | default |
オプションの効き方を、512×512 の写真を -q 75 で変換して比べました。
| 指定 | サイズ | SSIM |
|---|---|---|
指定なし(-m 4) |
25,812 B | 0.9639 |
-m 6 |
24,618 B | 0.9625 |
-sharp_yuv |
26,784 B | 0.9625 |
-preset photo |
25,214 B | 0.9630 |
-size 30000(-q なし) |
29,346 B | 0.9678 |
-m 6 は5%小さくなりました。違いは小さいので、まずは -q だけを調整します。
dwebp で WebP を PNG に戻す
dwebp photo.webp -o photo_back.png
Decoded photo.webp. Dimensions: 600 x 400 . Format: lossy. Now saving...
Saved file photo_back.png
39,366 バイトの WebP が、PNG にすると 388,032 バイト(約9.9倍)になりました。 SSIM は WebP と同じ 0.9558 で、画質は戻りません。非可逆の WebP を PNG にすると、失われた分は戻らないまま、容量だけが増えます。人に渡すだけなら JPG のほうが小さく済みます。
ImageMagick で変換する(透過は白で塗る)
convert photo.webp -quality 85 from_webp.jpg
convert logo.png -background white -flatten -quality 90 logo_white.jpg
mogrify -path ../mg -format jpg -quality 85 -background white -flatten *.webp *.HEIC *.png
透過のある PNG を -flatten なしで JPG にすると、透明だった部分が黒になりました(左上の画素が (0, 0, 0))。-background white -flatten を付けると白 (255, 255, 255) になりました。mogrify は元のファイルを上書きする道具なので、-path で出力先を別のフォルダにします。
ImageMagick 6.9.12 は、libheif のプラグインが入っていれば HEIC も読み書きできました(convert -list format で HEIC rw+)。
ffmpeg で変換する
ffmpeg -i photo.jpg -c:v libwebp -quality 80 photo_ff.webp
ffmpeg -i photo.webp -q:v 3 photo_ff.jpg
それぞれ 39,320 バイト・52,398 バイトになりました。FFmpeg 6.1.1 は、静止画の WebP は読めますが、アニメーションの WebP と HEIC は読めませんでした(エラー文は後の「よくあるエラーと直し方」に)。ffmpeg の動画の変換・圧縮は、関連記事「ffmpegの使い方|MOV→MP4変換・圧縮・切り出しを実測で解説」で扱っています。
heif-convert で HEIC を JPG にする
heif-convert -q 90 IMG_0001.HEIC by_heifconvert.jpg
File contains 1 image
Written to by_heifconvert.jpg
58,961 バイトの HEIC が 70,875 バイトの JPG になりました。heif-convert は向きを正しく直し、EXIF(位置情報を含む)を写しました。
Pythonでまとめて変換する(Pillow・pillow-heif)
この節では、フォルダの中の画像を一度に変換する完成スクリプトと、その実行結果が分かります。
Pillow は WebP・AVIF・PNG・JPEG を読み書きできますが、HEIC は読めません。pillow-heif を入れて register_heif_opener() を呼ぶと、Image.open() で HEIC が開けるようになります。
pip install pillow pillow-heif
次のスクリプトは、HEIC・WebP・PNG・JPEG を JPG・PNG・WebP のどれかにまとめて変換します。透過は白で塗り、向きを画素に反映し、位置情報(GPS)は既定で消します。
"""フォルダ内の HEIC・WebP・PNG・JPEG を、まとめて JPEG / PNG / WebP に変換する。
使い方: python convert_images.py 入力フォルダ 出力フォルダ --to jpg [--quality 85] [--max 1920] [--keep-gps]
"""
import argparse
from pathlib import Path
from PIL import Image, ImageOps
import pillow_heif
pillow_heif.register_heif_opener() # これで Image.open が HEIC/HEIF を読める
SRC = {".heic", ".heif", ".webp", ".png", ".jpg", ".jpeg"}
def flatten(im, color=(255, 255, 255)):
"""透過を白で塗る(JPEG は透過を持てないため)"""
if im.mode in ("RGBA", "LA") or (im.mode == "P" and "transparency" in im.info):
im = im.convert("RGBA")
bg = Image.new("RGBA", im.size, color + (255,))
return Image.alpha_composite(bg, im).convert("RGB")
return im.convert("RGB")
def main():
ap = argparse.ArgumentParser()
ap.add_argument("src"); ap.add_argument("dst")
ap.add_argument("--to", choices=["jpg", "png", "webp"], default="jpg")
ap.add_argument("--quality", type=int, default=85)
ap.add_argument("--max", type=int, default=0, help="長辺の上限(px)。0 は縮小しない")
ap.add_argument("--keep-gps", action="store_true", help="位置情報(GPS)を残す")
a = ap.parse_args()
out = Path(a.dst); out.mkdir(parents=True, exist_ok=True)
for f in sorted(Path(a.src).iterdir()):
if f.suffix.lower() not in SRC:
continue
im = Image.open(f)
if getattr(im, "n_frames", 1) > 1:
print(f"skip {f.name}: アニメーション({im.n_frames}フレーム)は別の手順で")
continue
exif = im.getexif()
im = ImageOps.exif_transpose(im) # 回転の情報を画素に反映
exif[0x0112] = 1 # 反映したので向きは「そのまま」に
if not a.keep_gps:
exif.pop(0x8825, None) # GPS の IFD を消す
if a.max and max(im.size) > a.max:
im.thumbnail((a.max, a.max), Image.LANCZOS)
dst = out / (f.stem + "." + a.to)
if a.to == "jpg":
flatten(im).save(dst, quality=a.quality, optimize=True, progressive=True, exif=exif)
elif a.to == "webp":
im.save(dst, quality=a.quality, method=6, exif=exif)
else:
im.save(dst, optimize=True)
print(f"ok {f.name:20s} {f.stat().st_size:>8,d} B → {dst.name:20s} {dst.stat().st_size:>8,d} B {im.size[0]}x{im.size[1]}")
if __name__ == "__main__":
main()
HEIC・WebP・透過 PNG・画面キャプチャ・アニメの WebP を入れたフォルダで、JPG への変換と、長辺320ピクセルに縮めた WebP への変換を実行しました。
python convert_images.py in out_jpg --to jpg
python convert_images.py in out_webp --to webp --quality 80 --max 320
ok IMG_0001.HEIC 58,961 B → IMG_0001.jpg 53,997 B 400x600
skip anim.webp: アニメーション(12フレーム)は別の手順で
ok logo.png 30,334 B → logo.jpg 15,189 B 480x480
ok photo.webp 39,366 B → photo.jpg 53,688 B 600x400
ok screenshot.png 55,493 B → screenshot.jpg 50,862 B 1280x480
ok IMG_0001.HEIC 58,961 B → IMG_0001.webp 12,226 B 213x320
skip anim.webp: アニメーション(12フレーム)は別の手順で
ok logo.png 30,334 B → logo.webp 9,744 B 320x320
ok photo.webp 39,366 B → photo.webp 12,230 B 320x213
ok screenshot.png 55,493 B → screenshot.webp 3,062 B 320x120
変換後の JPG を調べると、IMG_0001.jpg は向きが正しく(400×600)、GPS は消え、logo.jpg の透過だった角は白 (255, 255, 255) でした。縮小は、形式の変更よりも効きます。 600×400 の写真を長辺320ピクセルにした WebP は 12,230 バイトで、元の WebP の31%でした。
Pillow の基本(リサイズ・トリミング・形式変換)は、関連記事「Python Pillowで画像処理|リサイズ・トリミング・形式変換のコード集」で扱っています。
画質の設定ごとのファイルサイズと見た目の差(実測表)
この節では、同じ写真を形式と画質を変えて保存したとき、大きさと見た目の差がどうなるかが数値で分かります。
元の画像は 512×512 の写真(scikit-image の astronaut、PNG で 791,555 バイト)です。JPG は ImageMagick、WebP は cwebp、HEIC は heif-enc、AVIF は Pillow で作り、元の画像と比べて SSIM と PSNR を出しました。
- SSIM:明るさ・コントラスト・模様の似かたを 0〜1 で表す数値。1 なら元と同じ。人の見え方に近いとされる。
- PSNR:画素の差の大きさを dB で表す数値。大きいほど元に近い。
| 形式と設定 | サイズ | 元との比 | SSIM | PSNR |
|---|---|---|---|---|
| PNG(optipng で可逆圧縮) | 424,472 B | 53.6% | 1.0000 | ― |
WebP 可逆(-lossless) |
340,898 B | 43.1% | 1.0000 | ― |
| JPG 品質60 | 30,724 B | 3.9% | 0.9562 | 32.69 dB |
| JPG 品質75 | 39,726 B | 5.0% | 0.9667 | 33.98 dB |
| JPG 品質85 | 53,187 B | 6.7% | 0.9760 | 35.48 dB |
| JPG 品質95 | 123,871 B | 15.6% | 0.9888 | 41.15 dB |
WebP -q 50 |
19,290 B | 2.4% | 0.9510 | 33.17 dB |
WebP -q 75 |
25,812 B | 3.3% | 0.9639 | 34.67 dB |
WebP -q 90 |
52,912 B | 6.7% | 0.9836 | 37.68 dB |
HEIC -q 30 |
13,024 B | 1.6% | 0.9344 | 31.01 dB |
HEIC -q 50 |
29,531 B | 3.7% | 0.9756 | 35.48 dB |
HEIC -q 70 |
80,577 B | 10.2% | 0.9945 | 38.40 dB |
| AVIF 品質50 | 18,976 B | 2.4% | 0.9556 | 33.35 dB |
| AVIF 品質75 | 38,250 B | 4.8% | 0.9787 | 36.88 dB |
「品質」の数字は、形式(道具)ごとに意味が違います。 HEIC の -q 50 は JPG の品質85と同じくらいの SSIM でした。数字をそろえて比べず、見た目(SSIM)をそろえて比べます。
同じ見た目なら、どれだけ小さいか
SSIM が約0.976 になる設定を探して、大きさを並べました。
SSIM はそれぞれ 0.9760・0.9761・0.9758・0.9756 です(1KB=1,000バイト)。別の写真(coffee 600×400)でも同じ順でした。
| 形式と設定 | サイズ | SSIM |
|---|---|---|
| JPG 品質90 | 92,585 B | 0.9746 |
| WebP 品質85 | 47,714 B | 0.9739 |
| AVIF 品質80 | 50,250 B | 0.9807 |
| HEIC 品質50 | 35,928 B | 0.9752 |
Web サイトの写真なら、WebP の -q 75〜85 から始め、100%表示で目で確かめて上下させる方法が使えます。
JPG の品質90で急に大きくなる理由
ImageMagick の JPG は、品質85 で 53,187 バイト、品質90 で 84,294 バイトと、急に大きくなりました。identify -format '%[jpeg:sampling-factor]' で調べると、品質85 は 2x2,1x1,1x1(色の情報を縦横半分に間引く 4:2:0)、品質90 は 1x1,1x1,1x1(間引かない 4:4:4)でした。品質90 に -sampling-factor 4:2:0 を付けると 66,638 バイト(SSIM 0.9815)になり、SSIM はほぼ同じ(0.9817)まま21%小さくなりました。
変換を重ねると画質は下がり続ける
元の PNG(coffee)を JPG にし、それを WebP にし、さらに JPG に戻しました。
| 段階 | サイズ | SSIM |
|---|---|---|
| 元の PNG → JPG(品質92) | 103,579 B | 0.9800 |
その JPG → WebP(-q 80) |
39,366 B | 0.9558 |
| その WebP → JPG(品質85) | 55,423 B | 0.9343 |
| その WebP → PNG | 388,032 B | 0.9558 |
非可逆の形式から非可逆の形式へ変換するたびに、SSIM が下がりました。 元の PNG や撮影したままのファイルがあるなら、そこから1回で目的の形式にします。
SSIM の計算方法
数値は、次の考え方で自作したスクリプトで出しました(輝度 Y に 11×11・σ1.5 のガウス窓を使う、Wang らの2004年の論文の SSIM)。
import numpy as np
def gauss_filter(x, sigma=1.5, r=5):
k = np.exp(-(np.arange(-r, r + 1) ** 2) / (2 * sigma ** 2)); k /= k.sum()
x = np.apply_along_axis(lambda v: np.convolve(v, k, mode="valid"), 0, x)
return np.apply_along_axis(lambda v: np.convolve(v, k, mode="valid"), 1, x)
def ssim_y(a, b): # a, b は RGB の配列(float)
ya = a @ [0.299, 0.587, 0.114]; yb = b @ [0.299, 0.587, 0.114]
C1, C2 = (0.01 * 255) ** 2, (0.03 * 255) ** 2
mu1, mu2 = gauss_filter(ya), gauss_filter(yb)
s11 = gauss_filter(ya * ya) - mu1 ** 2
s22 = gauss_filter(yb * yb) - mu2 ** 2
s12 = gauss_filter(ya * yb) - mu1 * mu2
m = ((2 * mu1 * mu2 + C1) * (2 * s12 + C2)) / ((mu1 ** 2 + mu2 ** 2 + C1) * (s11 + s22 + C2))
return m.mean()
ffmpeg の ssim フィルターでも測れます。計算の窓や色の変換が違うので、値は少しずれます(JPG 品質75 で、上の計算は 0.9667、ffmpeg の Y は 0.977594)。比べるときは同じ方法でそろえます。
ffmpeg -i astronaut.png -i photo_q75.jpg -lavfi "[0:v]format=yuv444p[a];[1:v]format=yuv444p[b];[a][b]ssim" -f null -
[Parsed_ssim_2 @ 0x55f64bb92a00] SSIM Y:0.977594 (16.496380) U:0.941659 (12.340250) V:0.952905 (13.270283) All:0.957386 (13.704488)
PNGを圧縮する方法(optipng・pngquant・WebP)
この節では、PNG を軽くする3つの方法と、それぞれでどれだけ小さくなるかが分かります。
形式は PNG のまま。Web に載せるなら、可逆の WebP にする方法もある
1280×480 の画面キャプチャ(Chromium で作った PNG、55,493 バイト)で比べました。
| 方法 | サイズ | 元との比 | SSIM | PSNR |
|---|---|---|---|---|
optipng -o2(可逆) |
41,461 B | 74.7% | 1.0000 | ― |
| pngquant(256色以下に減色) | 19,183 B | 34.6% | 0.9999 | 46.22 dB |
WebP 可逆(-lossless -z 9) |
25,188 B | 45.4% | 1.0000 | ― |
WebP -near_lossless 60 |
26,344 B | 47.5% | 0.9998 | 57.46 dB |
WebP -q 90(非可逆) |
32,046 B | 57.7% | 0.9993 | 34.90 dB |
HEIC -q 50 |
26,178 B | 47.2% | 0.9994 | 35.03 dB |
| JPG 品質75 | 42,355 B | 76.3% | 0.9922 | 33.14 dB |
| JPG 品質90 | 87,609 B | 157.9% | 0.9979 | 42.05 dB |
画面キャプチャを JPG(品質90)にすると、PNG より58%大きくなりました。 文字や線のくっきりした画像は、JPG の苦手な対象です。品質75 で PNG と同じくらいの大きさにすると、PSNR が 33.14 dB まで下がり、文字の周りににじみが出ます。WebP -q 90 と HEIC も、SSIM は高い一方で PSNR は 35 dB 前後でした。色の情報を間引くため、色の付いた細い文字は崩れやすくなります。画面キャプチャは PNG の減色か、可逆の WebP が向いています。
写真の PNG(astronaut)では、optipng で 791,555 → 424,472 バイト(46.37%減。元のファイルが圧縮の弱い設定で保存されていたため)、pngquant で 141,015 バイト(SSIM 0.9879)でした。写真は減色でグラデーションに段が出やすく、WebP か JPG にしたほうが小さくなります(上の実測表で WebP -q 90 は 52,912 バイト、SSIM 0.9836)。
optipng -o2 screenshot.png # 上書きで可逆圧縮
pngquant --quality=65-90 --speed 1 --output out.png screenshot.png # 減色
cwebp -lossless -z 9 screenshot.png -o screenshot.webp # 可逆の WebP
optipng の出力です。
Output IDAT size = 41404 bytes (13864 bytes decrease)
Output file size = 41461 bytes (14032 bytes = 25.29% decrease)
pngquant の --quality=最低-最高 は、最低の品質を満たせないと保存しません。--quality=98-100 を写真に指定したところ、終了コード 99 で、-v を付けると次の理由が出ました。
image degradation MSE=4.481 (Q=85) exceeded limit of 0.592 (98)
Skipped 1 file out of a total of 1 file.
PNG を軽くする前に、画像の大きさ(ピクセル数)が表示サイズより大きすぎないかを確かめます。縮小は形式の変更よりも効きます(前の節で、長辺320ピクセルにすると31%)。周りの余白を切る、16 ビットの PNG を 8 ビットにする、要らないメタデータを消す(-strip)のも、サイズを減らす方法です。
透過・アニメーション・回転・位置情報の扱い
この節では、変換で失われやすい4つの情報が、道具ごとにどうなるかが分かります。
透過
480×480 の透過ロゴ(PNG、30,334 バイト。半透明の部分あり)を変換し、透明度(アルファ)の誤差を調べました。
| 変換先 | サイズ | 透明度の最大誤差 |
|---|---|---|
| PNG(optipng) | 24,979 B | 0(そのまま) |
| PNG(pngquant で減色) | 12,622 B | 6 |
| WebP 可逆 | 16,058 B | 0 |
WebP -q 90(-alpha_q は既定の100) |
17,398 B | 0 |
WebP -q 90 -alpha_q 50 |
13,228 B | 14 |
HEIC -q 50 |
13,961 B | 14 |
JPG(ImageMagick、-flatten なし) |
33,645 B | 透過が消えて黒くなる |
WebP は、非可逆でも透過の部分は既定で可逆のまま保たれました。 JPG は透過を持てないので、白などで塗ってから保存します。Pillow で RGBA の画像をそのまま JPG に保存すると、OSError: cannot write mode RGBA as JPEG になります(直し方は前の Python のスクリプトの flatten)。
アニメーション
12フレームのアニメの GIF(4,058 バイト)を gif2webp -q 80 で WebP にすると 2,524 バイト(38%減)になりました。アニメの WebP を読めるかは、道具で分かれました。
| 道具 | アニメの WebP |
|---|---|
| dwebp 1.3.2 | 読めない(エラー) |
| anim_dump 1.3.2 | 12枚の PNG に分けて書き出せた |
| FFmpeg 6.1.1 | 読めない(ANIM を飛ばしてエラー) |
| ImageMagick 6.9.12 | convert anim.webp anim.gif で12フレームの GIF にできた |
| Pillow 13.0.0 | n_frames が 12。save_all=True で GIF にできた |
anim_dump -folder . -prefix frame_ anim.webp # フレームを PNG に分ける
convert anim.webp anim.gif # アニメの GIF にする
mogrify に -flatten を付けてアニメの WebP を JPG にすると、全部のフレームが1枚に重ねられました。アニメーションは JPG にはできません。
回転と位置情報(EXIF)
縦向き(EXIF の Orientation=6)と GPS の座標を入れた HEIC を作り、4つの方法で JPG にしました。pillow-heif は保存のときに向きを HEIF の回転の情報(heif-info の表示は angle (ccw): 270)に移すので、HEIC の画像は 400×600 として扱われます。
| 変換の方法 | 向き | GPS(位置情報) |
|---|---|---|
| heif-convert 1.17.6 | 正しい(400×600) | 残る |
ImageMagick 6.9.12 convert |
正しい | EXIF ごと消える |
Pillow+pillow-heif(exif= を渡さない) |
正しい | 消える |
Pillow+pillow-heif(exif= を渡す) |
正しい | 残る |
| FFmpeg 6.1.1 | 読めない | ― |
by_heifconvert.jpg (400, 600) Orientation= 1 GPS= {1: 'N', 2: (35.0, 40.0, 52.0), 3: 'E', 4: (139.0, 46.0, 1.0)} Make= TestCam
by_magick.jpg (400, 600) Orientation= None GPS= なし Make= None
by_pillow_noexif.jpg (400, 600) Orientation= None GPS= なし Make= None
by_pillow_nogps.jpg (400, 600) Orientation= 1 GPS= なし Make= TestCam
同じ「HEIC から JPG」でも、位置情報が残る道具と消える道具がありました。 写真を人に渡したり Web に載せたりする前は、変換後のファイルの EXIF を確かめます。cwebp は既定で EXIF を写さず(-metadata all を付けると写る)、WebP の EXIF のチャンクは webpinfo -summary で確かめられます。
d.webp 36772 B (cwebp の既定) GPS= なし
m.webp 37010 B (-metadata all) EXIF: 1 GPS= {1: 'N', 2: (35.0, 40.0, 52.0), 3: 'E', 4: (139.0, 46.0, 1.0)}
WebサイトでWebPを使う(picture要素・WordPress)
この節では、WebP・AVIF を Web サイトに載せる HTML と、ブラウザがどれを選ぶかが分かります。
<picture> の中に <source> を新しい形式から順に並べ、最後に JPG の <img> を置きます。 ブラウザは type を見て、読めない形式の <source> を飛ばし、どれも使えなければ <img> の src を使います(MDN)。alt・width・height は <img> に書きます。
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="宇宙飛行士の写真" width="512" height="512" loading="lazy" decoding="async">
</picture>
Chromium 141 でこの HTML を開き、実際に選ばれた画像(currentSrc)を調べました。HEIC の <source> と、HEIC を直接指定した <img> も並べています。
{'parent': 'p1', 'currentSrc': 'photo.avif', 'naturalWidth': 512}
{'parent': 'p2', 'currentSrc': 'photo.jpg', 'naturalWidth': 512}
{'parent': 'h', 'currentSrc': 'photo.heic', 'naturalWidth': 0}
AVIF を読める Chromium は AVIF を選び、HEIC の <source> は飛ばして JPG を使いました。HEIC を <img> に直接書くと、naturalWidth が 0、つまり表示されませんでした。
flowchart TD
A[source を上から見る] --> B{AVIF を読める?}
B -->|はい| C[AVIF を表示]
B -->|いいえ| D{WebP を読める?}
D -->|はい| E[WebP を表示]
D -->|いいえ| F[img の JPG]
画面の幅に合わせて大きさの違う画像を出し分ける srcset・sizes の書き方は、関連記事「srcset・sizesの使い方|picture併用とDevToolsでの検証」で扱っています。
サーバーの設定と WordPress
サーバーが WebP を正しい Content-Type で返すかも確かめます。Ubuntu 24.04 の nginx 1.24.0 の /etc/nginx/mime.types には、次の行が最初から入っていました。
image/avif avif;
image/webp webp;
WordPress は、5.8 で WebP、6.5 で AVIF のアップロードに対応しました(Make WordPress Core)。すでにある画像をまとめて WebP にするプラグインもあります。6.7 からは、サーバーの Imagick が HEIC に対応していれば、アップロードした HEIC を JPEG に自動で変換します。元の HEIC は添付ファイルのページからダウンロードできる形で残り、使えるかどうかは[ツール]→[サイトヘルス]→[情報]→[メディア処理]の「ImageMagick supported file formats」で確かめられます。
表示する大きさを CSS で決める方法は、関連記事「CSSで画像サイズを指定する方法 縦横比維持・中央寄せ・はみ出し対策」で、決まった枠に切り抜いて表示する方法は、関連記事「CSS object-fit・aspect-ratio|画像トリミング5パターン」で扱っています。
変換サイト(アップロード型)を使う前に確かめること
この節では、ブラウザから画像を送って変換するサイトを使うときに、確かめておく点が分かります。
アップロード型の変換サイトは、画像のファイルを運営者のサーバーへ送り、そこで変換して返します。手軽な一方で、送った画像の扱いは運営者の規約で決まります。
- 1送ってよい画像か仕事の資料・顧客の写真・人の顔が写った画像は、社内の決まりや本人の同意を先に確かめる
- 2位置情報が入っていないかiPhone の写真の EXIF には GPS の座標が入ることがある。送る前に消すか、ローカルで変換する
- 3保存期間と利用の範囲送ったファイルを何時間で消すか、ほかの目的に使うかは、サイトの規約・プライバシーポリシーに書かれている
- 4ファイルの大きさ・枚数の上限無料の範囲に上限があることが多い。大量なら OS の機能かコマンドのほうが速い
- 5本当に送られているかブラウザの中だけで変換する方式のツールもある。開発者ツールのネットワークタブで、画像の送信があるかを見られる
この記事の Windows・Mac・iPhone の手順と、コマンド・Python の方法は、どれも画像を外へ送らずに手元で変換します。
よくあるエラーと直し方
この節では、変換で出たエラー文から原因と直し方を引けます。エラー文はこの記事の環境で実際に出たものです。
| エラー文・症状 | 原因 | 直し方 |
|---|---|---|
Error! Decoding of an animated WebP file is not supported.(dwebp) |
dwebp はアニメの WebP を読めない | anim_dump でフレームに分ける。GIF なら ImageMagick か Pillow |
skipping unsupported chunk: ANIM と Decode error rate 1 exceeds maximum 0.666667(ffmpeg) |
FFmpeg 6.1 の WebP の読み込みはアニメに未対応 | 同上 |
Error code: 5 (BAD_DIMENSION: Bad picture dimension. Maximum width and height allowed is 16383 pixels.)(cwebp) |
WebP の上限の 16383 ピクセルを超えた | -resize で縮めるか、分割する。長い画像は PNG・JPG のまま |
Error! Could not process file IMG_0001.HEIC(cwebp) |
cwebp は HEIC を読めない | heif-convert で PNG にしてから cwebp |
PIL.UnidentifiedImageError: cannot identify image file 'IMG_0001.HEIC' |
Pillow だけでは HEIC を読めない | pip install pillow-heif と register_heif_opener() |
ValueError: unknown file extension: .heic(Pillow で保存) |
HEIC の書き込みが登録されていない | 同上 |
OSError: cannot write mode RGBA as JPEG |
透過のある画像を JPG にしようとした | 白で塗って RGB にする(flatten)か PNG で保存 |
no decode delegate for this image format (ImageMagick) |
その形式を読む部品(ライブラリ)が無い | convert -list format で確認し、libheif などを入れる |
no encode delegate for this image format 'AVIF' |
その形式を書く部品が無い(一覧で r--) |
書ける道具(Pillow など)を使う |
moov atom not found(ffmpeg で HEIC) |
FFmpeg 6.1 は HEIC を画像として読めない | heif-convert か Pillow+pillow-heif |
libpng warning: iCCP: known incorrect sRGB profile |
PNG に入った色のプロファイルが規格と合わない | 警告で、変換は続く。気になるなら convert in.png -strip out.png |
| pngquant が何も出力しない(終了コード 99) | --quality の最低値を満たせない |
最低値を下げる。写真は WebP・JPG にする |
| JPG にしたら透明な部分が黒い | 透過を捨てるときの下地が黒だった | -background white -flatten を付ける |
| Chrome で HEIC が表示されない | Chrome・Edge・Firefox は HEIC 非対応 | JPG・WebP に変換して載せる |
ImageMagick の「decode delegate」のエラーは、この環境では JPEG XL のファイルで次の形で出ました。HEIC を読めない ImageMagick では、最後の形式名が HEIC になります。
convert-im6.q16: no decode delegate for this image format `JXL' @ error/constitute.c/ReadImage/581.
convert-im6.q16: no images defined `t.png' @ error/convert.c/ConvertImageCommand/3234.
よくある質問
Q. WebPとは何ですか?
A. Google が作った Web 用の画像形式です。非可逆・可逆の両方、透過、アニメーションに対応し、同じ見た目なら JPG より小さくなります。拡張子は .webp です。
Q. HEICとは何ですか? A. HEIF という規格に、HEVC で圧縮した画像を入れた形式です。iPhone のカメラの既定([高効率])の保存形式で、同じ見た目なら JPG より小さくなります。
Q. WebPをJPGに変換するには?
A. Windows はフォトかペイントで開いて JPG で保存、Mac はプレビューの[書き出す]で JPEG を選びます。まとめてなら mogrify -format jpg *.webp か、記事の Python のスクリプトを使います。透過があるなら PNG にします。
Q. HEICが開けないのはなぜですか? A. 開くアプリや OS が HEIC の読み方を持っていないためです。Windows は「HEIF 画像表示オプション」と「HEVC ビデオ拡張機能」を入れると開けます。Chrome・Edge・Firefox は HEIC を表示できません。
Q. iPhoneの写真をJPGで保存するには? A. [設定]→[カメラ]→[フォーマット]で[互換性優先]を選びます。これから撮る写真が JPEG になり、撮影済みの写真は HEIC のままです。
Q. 互換性優先にするデメリットは? A. 写真1枚あたりの容量が増えます。この記事の実測では、同じ見た目の JPG は HEIC の約1.8倍でした。
Q. PNGを画質を落とさずに圧縮するには? A. optipng などの可逆の最適化を使います。画素は変わらず、画面キャプチャで25%減りました。Web に載せるなら可逆の WebP で55%減りました。
Q. WebPに変換するとどれくらい軽くなりますか? A. 写真で、同じ SSIM の JPG より26%小さくなりました(JPG 品質85 の 53.2KB に対し、WebP 品質85 は 39.2KB)。画像によって変わります。
Q. WebPとAVIFはどちらを使えばいいですか?
A. 実測では AVIF のほうが同じ見た目で小さくなりました。対応するブラウザは WebP が97.18%、AVIF が96.35%(2026年10月22日時点)です。<picture> で AVIF・WebP・JPG を並べると両方を生かせます。
Q. WebPはSEOに効きますか? A. 画像が軽くなるとページの表示が速くなり、Core Web Vitals の LCP(いちばん大きい要素が表示されるまでの時間)の改善につながります。Google 画像検索は WebP と AVIF を扱える形式に挙げています。HEIC は挙げられていません。
Q. 変換サイトは安全ですか? A. アップロード型は画像を運営者のサーバーへ送ります。規約の保存期間・位置情報の有無・社内の決まりを確かめ、見せたくない画像は手元で変換します。
Q. HEICをJPGにするとファイルが大きくなるのはなぜですか? A. JPG の圧縮の効率が HEIC より低いためです。画質はよくならず、容量だけが増えます。
まとめ
- WebP は Google の Web 用の形式(RFC 9649)、HEIC は HEIF に HEVC の画像を入れた iPhone の写真の形式。どちらも同じ見た目で JPG より小さい(実測で WebP は26%、HEIC は45%小さい)。
- 開けない原因は、アプリ・OS に読み方が無いこと。Windows は拡張機能、Mac はプレビューの[書き出す]、iPhone は[互換性優先]で対応する。
- まとめての変換は cwebp・heif-convert・ImageMagick・Pillow+pillow-heif。アニメの WebP は dwebp・FFmpeg 6.1 で読めない。
- 「品質」の数字は形式ごとに意味が違う。SSIM などで見た目をそろえて比べ、非可逆からの変換は1回で済ませる。
- PNG は可逆の最適化(25%減)か減色(65%減)か可逆の WebP(55%減)。画面キャプチャを JPG にすると大きくなる。
- Web サイトは
<picture>で AVIF・WebP・JPG を並べる。変換の前後で透過・向き・位置情報を確かめる。
参考・出典
確認日はいずれも 2026年10月22日です。
- Google for Developers「WebP に関するよくある質問」:https://developers.google.com/speed/webp/faq
- Google for Developers「cwebp」:https://developers.google.com/speed/webp/docs/cwebp
- Google for Developers「dwebp」:https://developers.google.com/speed/webp/docs/dwebp
- Google for Developers Blog「WebP, a new image format for the Web」(2010年9月):https://developers.googleblog.com/2010/09/webp-new-image-format-for-web.html
- RFC 9649「WebP Image Format」:https://www.rfc-editor.org/rfc/rfc9649.html
- ISO「ISO/IEC 23008-12 Image File Format」:https://www.iso.org/standard/83650.html
- Apple サポート「Apple 製デバイスで HEIF や HEVC メディアを使う」:https://support.apple.com/ja-jp/116944
- Apple「プレビューユーザガイド:画像のファイルタイプを変換する」:https://support.apple.com/ja-jp/guide/preview/prvw1012/mac
- Apple「Mac ユーザガイド」(Finder のクイックアクション):https://support.apple.com/ja-jp/guide/mac-help/mchl97ff9142/mac
- Microsoft Store「HEIF 画像表示オプション」:https://apps.microsoft.com/detail/9PMMSR1CGPWG
- Microsoft Store「HEVC ビデオ拡張機能」:https://apps.microsoft.com/detail/9nmzlz57r3t7
- Microsoft Store「WebP 画像表示オプション」:https://apps.microsoft.com/detail/9pg2dk419drg
- Microsoft Q&A(HEIC を JPG に変換する方法の質問):https://learn.microsoft.com/ja-jp/answers/questions/5652681/heic-jpg
- Android Developers「Supported media formats」:https://developer.android.com/media/platform/supported-formats
- Can I use「WebP image format」:https://caniuse.com/webp
- Can I use「AVIF image format」:https://caniuse.com/avif
- Can I use「HEIF/HEIC image format」:https://caniuse.com/heif
- MDN「<picture>: 画像要素」:https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/picture
- Google 検索セントラル「Google 画像検索 SEO のベストプラクティス」:https://developers.google.com/search/docs/appearance/google-images?hl=ja
- Make WordPress Core「WordPress 5.8 adds WebP support」:https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/
- Make WordPress Core「WordPress 6.5 adds AVIF support」:https://make.wordpress.org/core/2024/02/23/wordpress-6-5-adds-avif-support/
- Make WordPress Core「Automatic conversion of HEIC images to JPEG in WordPress 6.7」:https://make.wordpress.org/core/2024/08/15/automatic-conversion-of-heic-images-to-jpeg-in-wordpress-6-7/
- Adobe「Support for WebP image format」(Photoshop):https://helpx.adobe.com/photoshop/kb/support-webp-image-format.html
- Pillow「Image file formats」:https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html
- PyPI「pillow-heif」:https://pypi.org/project/pillow-heif/
- GitHub「strukturag/libheif」:https://github.com/strukturag/libheif
- pngquant:https://pngquant.org/
- ImageMagick「Command-line Options」:https://imagemagick.org/command-line-options/
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
(記載例)出典:株式会社RJC「WebP・HEICとは|JPG・PNGへの変換と画像圧縮を実測で解説」
株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。
WE ARE HIRING
RJCで一緒に開発しながら、
成長を楽しみませんか?
RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください!
- 127日年間休日
- 12時間平均残業時間
- 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ!
ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨(休暇 or 金一封)、11期連続の黒字決算。