PNG・JPEG・WebP・BMPをブラウザで変換する
現行のDevelopTools画像変換ツールは、PNG・JPEG(JPG)・WebP・BMPを入力し、PNG・JPEG・WebP・BMPへ変換できます。HEIC・HEIF・AVIFは直接読み込めず、AVIF出力にも対応していません。画像と変換結果はサーバーへ送信されません。
画像ファイル変換ツールを開く結論:画像の内容と利用先から形式を選ぶ
写真はJPEG・WebP・AVIF、透明なロゴや図はPNG・WebP・AVIFが候補です。ただしAVIFは現行のDevelopTools画像変換ツールでは入出力できないため、利用先と変換手段を先に確認します。
PNGはW3C仕様でlossless圧縮とalpha channelを扱います。WebPはlossy・losslessと透明を扱えます。JPEGは写真に広く使えますが透明を保持できず、再保存のたびに画質が変わり得ます。
形式名だけで最適解は決まりません。同じpixel寸法で候補を作り、実容量と見た目を比較します。
4形式の比較
| 形式 | 圧縮 | 透過 | 判断の目安 |
|---|---|---|---|
| JPEG | 主にlossy | 不可 | 写真と互換性を優先 |
| PNG | lossless | 対応 | 文字・図・透過を保持 |
| WebP | lossy/lossless | 対応 | Web用で容量と表現を比較 |
| AVIF | AV1画像符号化 | 対応可能 | 対応環境を確認して採用 |
形式選択で失敗しやすい点
- JPEGからPNGへ変換しても、JPEG保存時に失われた細部は戻らない
- 透明PNGをJPEGへ変換すると背景色との合成が必要になる
- 新しい形式は作成側だけでなくCMS、編集ソフト、配信先、受信側の対応も確認する
- 容量を減らす目的なら形式変換とpixel寸法の縮小を分けて試す
DevelopToolsで画像形式を変換する手順
画像を選択またはドロップし、出力形式をPNG・JPEG・WebP・BMPから選びます。JPEGとWebPでは品質、BMPでは24bitか32bit、必要に応じて最大幅・最大高さ、縦横比維持、拡大許可、回転、上下左右反転、背景色を設定できます。複数画像は同じ設定で順番に変換できます。
変換前後の寸法、形式、容量、透過の有無を画面で比較してから保存します。JPEGまたは24bit BMPへ変換すると透明部分は指定した背景色で合成されます。PNG・WebP・32bit BMPでは透明部分を扱えますが、利用先での表示も別途確認してください。
- 元画像を複製して保管し、対応するPNG・JPEG・WebP・BMPを読み込みます。
- 利用先が受け付ける出力形式を選び、透過、品質、寸法、背景色を設定します。
- 変換を実行し、変換前後のプレビュー、ピクセル寸法、容量を比較します。
- 文字、輪郭、グラデーション、透明部分、色、向きを100%表示で確認して別名保存します。
このツールはCanvasへ描画して再生成するため、EXIF、GPS、ICCプロファイル等のメタデータは保持しません。アニメーション画像を扱えた場合も先頭フレームだけが結果になります。
保存前に確認する項目
| 確認対象 | 見るポイント |
|---|---|
| 形式 | 拡張子だけでなく、保存結果のMIME形式と利用先の対応が合っているか |
| 画質 | 文字や細線のにじみ、写真のblock noise、gradationのbandingが許容範囲か |
| 透明部分 | 透明を保持できる形式か、背景色で意図どおり合成されたか |
| 寸法と容量 | 必要なpixel寸法を保ち、元より増加していても用途上問題ないか |
| 色と向き | ICC削除やorientation適用後に、色・回転・反転が意図どおりか |
| 元データ | EXIF・GPS・ICC・複数frameが必要なら元画像を残しているか |
品質値と容量の関係は画像内容、encoder、browserで変わります。「品質90なら何%小さくなる」のような固定換算はできません。実ファイルを目視し、利用先でも開いて判断します。
仕様を確認した参考資料
形式の仕様やアプリの対応状況は変わる場合があります。利用先の最新仕様と実ファイルを優先し、重要な画像は元ファイルを保持してください。
具体例:ECサイトの写真と透明ロゴの形式を選ぶ
変換前に元画像を複製し、寸法、透明部分、色、向き、必要なメタデータを確認します。写真はJPEGとWebP、ロゴはPNGとWebPを比較するだけでなく、画像を実際に使う画面やアプリでも開けるかを確認します。
同じ画像を候補設定で複数作り、ファイルサイズだけで決めず、100%表示と実際の掲載サイズで文字、輪郭、写真の細部を比較します。
- 元画像を別名で保管します。
- 用途に合う形式と設定で変換します。
- 変換前後の寸法・容量・見た目を比較します。
- 利用先で開いてから採用するファイルを決めます。
変換結果で元画像を上書きせず、再調整できるようにしてください。
よくある質問
- JPEG・PNG・WebP・AVIFの違い|用途別の画像形式の選び方では拡張子だけを変更してもよいですか?
- いいえ。拡張子の変更はファイル内部の符号化形式を変えません。decoderで読み込み、目的形式のencoderで再生成する必要があります。
- 変換すれば必ず容量が小さくなりますか?
- いいえ。画像内容、pixel寸法、出力形式、品質、透過、encoderにより増える場合もあります。変換後の実容量と画質を比較してください。