画像リサイズ・変換

画像のリサイズ・形式変換(JPEG / PNG / WebP)・圧縮。ファイルはブラウザ外に送信されません。

Loading…

すべての処理はブラウザ内で実行されます — ファイルや入力はサーバへ送信されません。

使い方

画像をドロップまたは選択し、サイドバーの 3 つの設定を調整します。出力形式(WebP / JPEG / PNG)、品質(1〜100。PNG では無視)、最大幅または最大高さ(ピクセル)。アスペクト比は自動で維持されます。幅と高さのどちらか一方だけを設定すると、もう一方が比率に従って自動計算されます。プレビューはリアルタイムで再エンコードされ、その下に出力サイズ、ファイルサイズ、元データに対する削減率が表示されます。

知っておくと便利な仕様として、ソースと同じ形式・同じサイズを指定した場合、本ツールは再エンコードせず元のバイトをそのまま渡します。JPEG を「同じ品質」で JPEG に再エンコードしても情報は失われますし、canvas ベースの PNG 出力は元の PNG の圧縮設定に追従できないためサイズが膨張しがちです。このパススルーで無駄な往復を回避しています。

スマートフォン写真を Web 用に縮小

入力
source: IMG_4521.HEIC (or .JPG) at 4032 × 3024, 4.8 MB
format: WebP
quality: 80
max width: 1920
出力
IMG_4521-1920x1440.webp at 1920 × 1440, ~280 KB  (−94%)

品質 80 の WebP は Web 上の写真にちょうど良い設定です。主要ブラウザでは長く対応しており、ファイルサイズは同等の JPEG より 25〜35% 程度小さくなります。

PNG スクリーンショットを JPEG に変換

入力
source: screenshot.png at 2560 × 1440, 1.2 MB
format: JPEG
quality: 85
(no resize)
出力
screenshot-2560x1440.jpg at 2560 × 1440, ~340 KB  (−72%)

写真が多めのスクリーンショットなら、品質 85 の JPEG はわずかな見た目の差と引き換えにファイルサイズを大幅に小さくできます。テキストやエッジの利いた UI のスクリーンショットには不向きです。JPEG は高コントラストのエッジを滲ませるため、その場合は PNG または WebP のままにしてください。

同じ形式・同じサイズはパススルー

入力
source: graphic.png at 1024 × 1024, 410 KB
format: PNG
(no resize)
出力
graphic-1024x1024.png at 1024 × 1024, 410 KB  (original bytes, not re-encoded)

実質的な変換が指定されていないため、元のバイトを保持します。canvas の再エンコードは PNG-8 パレットや元の DEFLATE 設定を維持できず、「何もしない」往復でもファイルサイズが 20〜60% ほど増えるのが普通です。

Open Graph 画像を 1200 px に制限

入力
source: hero.jpg at 3000 × 1600, 2.4 MB
format: JPEG
quality: 82
max width: 1200
出力
hero-1200x640.jpg at 1200 × 640, ~115 KB  (−95%)

1200 × 630 は Twitter・Facebook・LinkedIn・Slack のプレビューで事実上の標準となっている Open Graph 画像サイズです。これ以上大きくしてもプレビューは改善されません。各サービスが結局リスケールするためです。

よくある質問

リサイズ後の JPEG が少し「くすんで」見えることがあるのはなぜですか?

JPEG は透過を表現できないため、エンコーダは圧縮前に透過ピクセルを白で塗りつぶします。その白がアンチエイリアスのエッジから透けて、結果が柔らかい印象になります。ソースに透過が含まれる場合は WebP か PNG を選んでください。

PNG 出力に品質スライダーがないのはなぜですか?

PNG はロスレス形式で、ピクセルがそのまま保持されるため「品質」というつまみが存在しません。圧縮レベルはファイルサイズとエンコード時間に影響するだけでピクセル値は変わらず、ブラウザの canvas API はその制御を公開していません。サイズを小さくしたいなら WebP か JPEG を選んでください。

EXIF や GPS のメタデータは削除されますか?

再エンコード時は削除されます。canvas パイプラインはピクセルデータのみを読み取るため、EXIF・ICC カラープロファイル・GPS 座標などのメタデータは出力時に取り除かれます。スマートフォン写真を公開する際の副次的なメリットになります。削除前にメタデータを確認したい場合は [EXIF ビューアー](/ja/exif-viewer/) を使ってください。

HEIC(iPhone)写真も変換できますか?

ブラウザが HEIC をデコードできる場合に限ります。Safari は対応していますが、他のブラウザの多くは未対応です。クロスブラウザで確実に処理したい場合は、スマートフォンや「写真」アプリから一度 JPEG として書き出してからドロップしてください。iOS には JPEG で記録する「互換性優先」のカメラ設定もあります。

バッチ処理はできますか?

現状ではありません。プレビューと統計をわかりやすく保つため、意図的に 1 ファイルずつ処理する設計にしています。数十枚を一度に処理したい場合は sharp-cli・ImageMagick(mogrify)・Squoosh の CLI などのデスクトップツールが適しています。ブラウザ内バッチ処理に需要があれば、ぜひフィードバックをお寄せください。

関連する概念

画像形式はおおむね 2 つの陣営に分かれます。ロスレス形式(PNG、WebP ロスレス、AVIF ロスレス)はピクセルをそのまま保存するためスクリーンショット、ロゴ、シャープなエッジやテキストを含むものに最適です。ロッシー形式(JPEG、WebP、AVIF、HEIC)は目につきにくい高周波成分を削り、視覚的な忠実度とファイルサイズを引き換えにします。写真には適切な選択です。JPEG は普及しているものの古く、シャープなエッジやグラデーションで品質が崩れ始めます。Web 向けに開発された WebP と AVIF は、同等の体感品質で 25〜50% 小さなファイルを実現します。

ブラウザでのリサイズは HTML canvas にソース画像を目標サイズで描画し、canvas にバイトとして再エンコードさせる仕組みです。リサンプリング品質はブラウザ依存で、Chrome・Firefox・Safari がそれぞれ独自のアルゴリズムを持ち、通常の縮小では合理的な結果を出します。一方で拡大はせいぜいバイリニアまたはバイキュービックで、約 2 倍を超える拡大は専用の ML ベースのアップスケーラを使わない限りぼやけます。canvas パイプラインは意図的にメタデータ(EXIF、ICC プロファイル、sRGB を超える色空間)を捨てるため、カラー管理の出力が必要な写真ワークフローでは、埋め込みプロファイルを保持できるデスクトップツールを選んでください。

関連記事

関連ツール