リファレンス / MyApp / ConvertingImage

ConvertingImage Web 版 マニュアル

  • ConvertingImage
  • 画像変換
ConvertingImage の章一覧

概要

ConvertingImage の Web 版は /apps/converting-image/ で公開しています。 処理はすべてブラウザの中で完結し、画像がサーバーへアップロードされることはありません。 出力形式などの設定はブラウザの localStorage に保存されるので、次に開いたときも前回の設定のまま使えます。 無料で、ログインも必要ありません。

スマホでの使い方は スマホでの使い方 を参照してください。

開いた直後は「一括変換」タブが選ばれていて、左にファイル一覧、右に出力設定が並びます。

一括変換タブの初期状態

対応形式

JPEG の EXIF に回転情報があるときは、自動で向きを補正してから変換します。

形式 入力 出力 備考
JPG / JPEG EXIF の回転情報を自動で適用します
PNG
WebP
GIF
AVIF
TIFF
BMP
SVG width / height 属性が必要です
TGA 無圧縮 / RLE / パレット / グレーに対応します
PSD 合成済みのコンポジットが必要です
HEIC / HEIF
カメラ RAW CR2, CR3, NEF, ARW, DNG, ORF, RW2, RAF, PEF, SRW ほか

一括変換

画像を追加する

「ファイルを追加」または「フォルダを追加」で選ぶか、ウィンドウへファイルやフォルダをドラッグ&ドロップします。 フォルダを追加するときは「サブフォルダを含める」で、下の階層まで読み込むかどうかを切り替えられます。 対応していないファイルは自動で読み飛ばされます。 一覧の × で 1 件ずつ取り除き、「クリア」ですべて取り消せます。

出力の設定

  • 出力形式: ボタンで PNG / JPG / WebP / TIFF / AVIF / GIF から選びます。JPG で出力すると、透明な部分は白で塗りつぶされます
  • 品質: JPG / WebP / AVIF のときだけ有効で、1〜100 のスライダーで指定します
  • リサイズ: 「なし」「長辺を指定」(px)「幅×高さを指定」「倍率」(%)から選びます。幅と高さの両方を入れるとその寸法ちょうどに、片方だけを入れると縦横比を保ったまま合わせます
  • リネーム規則: {name} が元のファイル名、{index} が 3 桁の連番、{date} が yyyymmdd に置き換わります。空欄のままなら元のファイル名を使います。ファイル名に使えない文字は _ になります

次の画面は 6 ファイルを追加し、出力形式を JPG、リサイズを「長辺を指定」1600px、リネーム規則を {name}_{index} に設定したところです。

6 ファイルを追加し出力形式などを設定した状態

出力先

「ダウンロード」と「フォルダに保存」から選びます。

ダウンロードの場合、1 件ならその画像がそのまま、複数件なら converted_<日時>.zip にまとめて保存されます。 フォルダを追加して変換したときは、ZIP の中でも元のサブフォルダの階層を保ちます。 同じ名前になるファイルは _1_2 と連番を付けて区別します。

「フォルダに保存」は Chrome / Edge でのみ使えます。「選択…」で保存先のフォルダを指定してください。 「同名ファイルを上書き」をオフにすると、既にあるファイルは上書きせず連番を付けて保存します。

「フォルダに保存」を選ぶと、出力設定に「選択…」ボタンと「同名ファイルを上書き」のチェックが現れます。

出力先で「フォルダに保存」を選んだ状態

変換する

「変換開始」で処理を始め、途中でやめたいときは「中断」します。 ログには 1 件ごとに 元サイズ → 出力サイズ (削減率) が表示されます。 ブラウザにダウンロードをブロックされたときは、「もう一度ダウンロード」でやり直せます。

変換が終わると、進捗バーの下に 1 件ごとのログと「もう一度ダウンロード」ボタンが並びます。

変換完了後の画面

クロップ

選択範囲を決める

「画像を開く」で選ぶか、画像を 1 枚ドロップします。 選択範囲の外からドラッグすると新しい範囲を作り(4px 未満のドラッグは取り消しになります)、内側からのドラッグで範囲を移動、8 つのハンドルで大きさを変えられます。

ドラッグで選択、枠内ドラッグで移動、ハンドルでサイズ変更という操作は、タッチでも同じように使えます。

アスペクト比は「自由」「1:1」「4:3」「3:2」「16:9」「カスタム」から選べます。⇄ ボタンで縦横を入れ替えられます。 X / Y / 幅 / 高さの数値入力はキャンバスの選択範囲と連動します。 「全体を選択」で画像全体を、「選択解除」で選択範囲を取り消せます。

次の画面は HEIC の写真を開き、アスペクト比 16:9 でドラッグして選択したところです。枠の上には選択範囲の大きさが px で表示されます。

クロップタブで選択範囲を作った状態

表示を操作する

  • ホイール: カーソルの位置を中心に拡大縮小します(2%〜2000%)
  • 中ボタン / 右ボタンのドラッグ: 表示位置を動かします
  • ダブルクリック、または「フィット」: 画面に合わせて表示し直します

切り出して保存する

プレビューは長辺 3000px に縮小して表示していますが、保存時は必ず元の画像を等倍で読み直すので、画質が落ちることはありません。 「切り出して保存」を押すと、Chrome / Edge では保存ダイアログが開き、それ以外のブラウザでは <元名>_crop.<拡張子> としてダウンロードされます。 選択範囲がないときは画像全体を保存します。

保存が終わると、クロップ出力パネルの下に保存したファイル名と切り出した大きさが表示されます。

切り出して保存した後のクロップ出力パネル

ブラウザごとの制限

  • WebP での出力は Safari では利用できません(ボタンが無効になります)
  • 「フォルダに保存」と保存ダイアログは Chrome / Edge でのみ使えます
  • カメラ RAW のデコードにはページの cross-origin isolation が必要です(このサイトでは有効になっています)。大きなファイルではメモリも多く使います
  • 非常に大きな画像は、ブラウザのキャンバスサイズの上限にかかって失敗することがあります

困ったときは

  • PSD が読み込めない: 合成済みのコンポジットがない PSD は扱えません。「互換性を優先」を有効にして保存し直してください
  • SVG が読み込めない: width / height 属性のない SVG は大きさが決まらないため、属性を追加してください
  • ダウンロードが始まらない: 「もう一度ダウンロード」を押すか、ブラウザの設定でこのサイトからのダウンロードを許可してください

← ConvertingImage へ