iPhoneのHEIC写真もWebP・AVIFに変換できる！ブラウザだけで動く画像変換ツールを作りました【自作アプリ】
当ブログでは、適切に情報をお届けするため、一部のリンクに広告が含まれています。
商品リンクに関しては、実際に使用したレビューに基づき、公平な視点でご紹介しています。
こんにちは、kiritanです。
ブログ運営をしていると、写真の管理って地味に手間がかかりますよね。
iPhoneで撮った写真はHEIC形式で保存されているし、ブログに載せるには軽量化が必要だし……。
ブログやってる人あるあるの悩みですよね…
そんな悩みを解決するために、ブラウザだけで動く画像変換ツール「画像変換くんPRO」を作りました。
なぜ画像変換ツールを作ったのか
キャンプブログを運営している中で、毎回こんな作業をしていました。
- iPhoneで撮影したHEIC形式の写真を、Windowsに移して画像変換オンラインツールでWebpに変換
- さらにWebPを最適なサイズにリサイズして軽量化
- それをブログにアップロード
この工程がとにかく面倒で、「ブラウザ上で全部できたら楽なのに」と思ったのが開発のきっかけです。キャンプ場では電波が弱いことも多いので、サーバーにアップロードせずデバイス内だけで完結することも重要なポイントでした。
ブログ作成している人に使ってもらえるよう、余計な機能は排除して使いやすく安全なWebアプリにしました。
このツールでできること
画像変換くんPROは、以下のことがすべてブラウザ上で完結します。
- HEIC → WebP / AVIF / JPEG / PNG に変換（iPhoneの写真もそのまま読み込める）
- リサイズ（横幅をpx指定、または元のサイズを維持）
- 品質調整（スライダーで細かく設定可能）
- 複数枚を一括処理してZipにまとめてダウンロード
- デフォルト設定の保存（よく使う設定を保存しておける）
画像データはサーバーに一切送信されないので、プライベートな写真でも安心して使えます。
サーバーにデータをアップロードせず、クライアント側だけで処理を行うのが本ツール最大の特徴です！
ツールの使い方
操作はとてもシンプルです。
1. 設定を確認する
出力ファイル名・リサイズの横幅・書き出し形式・品質を設定します。よく使う設定はヘッダーの「⚙️ デフォルト設定」から保存しておくと便利です。
2. 画像を選択する
「画像を選択」から変換したい画像を選びます。複数選択もOK。HEIC形式もそのまま選択できます。
3. 「一括処理を開始」ボタンを押す
あとは待つだけです。1枚の場合はそのままダウンロード、複数枚の場合はZipファイルにまとめてダウンロードされます。
書き出し形式について
主要な4種類のフォーマットに対応しています。
- Webp
- Googleが推進する次世代フォーマット。JPEGと比べて同じ画質でファイルサイズが小さくなりやすく、ブログの表示速度改善に効果的です。
- AVIF
- AV1コーデックベースの最新フォーマット。WebPよりさらに圧縮効率が高く、同じ品質設定でもファイルサイズが小さくなります。ただし変換に少し時間がかかります。
- JPEG
- 広く使われている定番フォーマット。どの環境でも確実に表示できます。
- PNG
- スクリーンショットや図解など、透過が必要な画像に向いています。
※技術的な仕組みについて
「ブラウザだけで動く」を実現するために、いくつかのWebAssemblyライブラリを組み合わせています。少し技術的な話になりますが、興味ある方向けに紹介します。
libheif-js
iPhoneのHEIC形式はブラウザが標準で読み込めません。このライブラリはC言語で書かれたlibheifをWebAssemblyにコンパイルしたもので、ブラウザ上でHEICのデコードを可能にしています。
pica
リサイズ処理に使っています。単純な縮小ではなく、Lanczosフィルタという高品質なアルゴリズムを使うことで、縮小後もシャープな仕上がりになります。
@jsquash/webp / @jsquash/avif
GoogleのSquooshチームが公開しているWebP・AVIFのエンコーダーです。SafariやiOSはcanvas要素からWebPを書き出す機能が非対応なため、このWasmベースのエンコーダーを使ってiPhoneでも正しく変換できるようにしています。
JSZip
複数画像を一括変換した後、Zipファイルにまとめる処理に使っています。
すべての処理がデバイス内で完結するため、画像がサーバーに送信されることはありません。
実際に使ってみた感想
アプリ作成ブログ運営で毎回使っていますが、作業時間がかなり短縮されました。
今まではオンラインのサーバー変換Webアプリを利用していて、HEICからWebpに変換、変換したWebpをリサイズするという2つの工程が別で必要でした。
しかし本ツールで変換処理（画像変換、リサイズ）が1回で済むようになり、キャンプから帰ってきた後、大量のHEIC写真をまとめてWebPに変換する作業がとても楽になりました。
iPhoneからもそのまま使えるので、外出先でさっと変換したいときにも重宝しています。
無料ツールとして公開してるのでブックマークして使ってみてください！