結論

WebPはWeb用、HEICはiPhoneの写真用の、JPGより軽い画像形式です。開けないときはJPG・PNGに変換します。

この記事でわかること

  • Windows・Mac・iPhoneの変換手順と設定名
  • 5形式×画質14通りのサイズとSSIMの実測表
  • エラー・症状14件の直し方と位置情報の扱い

2026年10月22日更新|libwebp 1.3.2・libheif 1.17.6で実測

変換先は「何に使うか」で決まります。人に渡すなら 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 画像表示オプション」で、エクスプローラーやフォトで表示できるようになります。

1

フォトで開く

エクスプローラーでファイルを右クリックし、[プログラムから開く]→[フォト]を選びます。HEIC が開けないときは、上の拡張機能を入れます。

WebP・HEIC どちらも同じ

2

[…]から名前を付けて保存

右上の[…](もっと見る)を開き、[名前を付けて保存]を選びます。

フォト レガシーでも同じ

3

ファイルの種類を選ぶ

[ファイルの種類]で 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 で撮影されます。

1

撮るときから JPG にする

[設定]→[カメラ]→[フォーマット]→[互換性優先]。撮影済みの HEIC は変わりません。

容量は増える

2

パソコンに送るときの形式を決める

[設定]→[アプリ]→[写真]で下へスクロールし、元の HEIC のまま送りたいときは[元のフォーマットのまま]を選びます。選ばないと、USB で Windows の PC に読み込むときなどに JPEG に変換されることがあります。

USB で取り込むとき

3

共有のときは自動で変換されることがある

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.976 での大きさ(astronaut 512×512)JPG 品質85 を100%とする

JPG 品質8553.2KB
WebP 品質8539.2KB
AVIF 品質7033.6KB
HEIC 品質5029.5KB

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つの方法と、それぞれでどれだけ小さくなるかが分かります。

可逆の最適化optipng など。画素は1つも変わらない。減る量は控えめ
→
減色(非可逆)pngquant など。256色以下に減らす。図・画面キャプチャで大きく減る

形式は 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
−65%pngquant の減色画面キャプチャ。SSIM 0.9999
−55%可逆の WebP画素は1つも変わらない
+58%JPG 品質90 にした場合文字の画面は JPG で大きくなる

画面キャプチャを 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期連続の黒字決算。

ABOUT RJC RJCがどんな会社か知る 考え方、研修、働き方、福利厚生、社員の前職まで。RJCのことが丸わかり! RJC丸わかりページへ JOB DESCRIPTION 仕事内容・待遇を見てみる 仕事内容、給与・待遇、選考の流れ。経験者も未経験も!応募前に知りたいこと、まとめました! 募集要項を見る ENTRY エントリーする エントリーは1〜2分・履歴書不要です。まずは話を聞いてみたい、という方でも歓迎です! エントリーフォームへ

RJCで一緒に開発しながら、 成長を楽しみませんか?