画像圧縮・リサイズ

画像圧縮・リサイズについて

この圧縮ツールは外部コーデックを読み込まず、ブラウザ内蔵のエンコーダー(canvas.toBlob)で画像を保存し直します。そのため結果はブラウザによって少し変わり、ChromeではあるAVIFの選択肢が別のブラウザでは表示されないこともあります。canvasがエンコードできない形式を指定すると、ブラウザは黙ってPNGで書き出し、かえってファイルが大きくなります。ツールは起動時に対応状況を確かめ、その形式をリストから外しています。

ファイルを読み込むと220pxに縮小したコピーを調べ、透明ピクセルの有無と色の多さを数えます。基本の推奨はWebPです。色が極端に少ないロゴやアイコン(サンプル中の固有色が3%未満、元がJPEGでないもの)と判定すると品質探索を省き、92で固定します。写真は35・45・55・65・75・85・95の7段階で実際にエンコードし、容量カーブが折れ曲がる点を選びます。

写真とスクリーンショットで品質値を変える

写真にはノイズや細かい質感が多く、JPEGやWebPが捨てる高周波成分が目立ちにくい素材です。画面表示用ならWebP 70〜80、JPEG 75〜85あたりで元画像との差はほとんど分かりません。ツールの初期値(WebP 80、JPEG 82、AVIF 55)もこの範囲です。AVIFは同じ数値でも画質が高く出るので、数字だけで他形式と比べないでください。

スクリーンショットや表、コードのキャプチャは逆です。白地に黒文字のような鋭い境界では、非可逆圧縮が文字のまわりにモヤ(リンギング)を作ります。品質を90以上にするか、容量が問題でなければPNGのまま残すほうが無難です。

PNGのスクショをJPEGにしても小さくならない理由

PNGは行ごとに隣や上のピクセルとの差分を取るフィルターを通し、deflateで圧縮します。単色の背景が広いスクリーンショットは差分がほぼ0になり、もともと非常に小さく収まっています。JPEGは8×8ブロックの周波数成分を記録する方式で、平坦な色面から得られる利得がPNGほど大きくありません。文字をくっきり保とうと品質を上げると、PNGより大きくなることもあります。

逆に写真をPNGで保存するとフィルターがほとんど効かず、同じ写真のJPEGの数倍になるのが普通です。このツールがPNGを自動推奨せず手動選択に限っているのはそのためで、PNGを選ぶと品質スライダーは無効になります。

赤い文字がにじむのはクロマサブサンプリングのせい

JPEGと非可逆WebPは明るさと色を分けて保存し、人の目が色の細かさに鈍いことを利用して、色情報を縦横半分の解像度に落とすことがよくあります(4:2:0)。写真ではまず気づきませんが、白地の細い赤文字や青い線では色が隣へにじみ、輪郭が濁ります。

ブラウザのエンコーダーにはサブサンプリングを切り替える設定がなく、このツールでも変更できません。色文字の多いバナーや図表は品質を上げてもにじみが残ることがあるので、PNGのままにするか、4:4:4を選べる編集ソフトで書き出すのが現実的です。

容量を一番減らすのは解像度

ファイルサイズはおおむねピクセル数に比例します。4000×3000の写真を横2000pxにすればピクセル数は4分の1になり、品質を85から60に下げるより多く減ることが多いうえ、画面上ではむしろきれいに見えます。ブログやLINEで送る程度なら、最大サイズ1600〜2560・品質高めの組み合わせをまず試してください。

最大サイズ欄は長辺がその値を超えないよう縦横比を保って縮小し、元より大きくはしません。

回転情報とメタデータの扱い

スマートフォンの写真は、ピクセルを横向きのまま保存し、EXIFに「90度回して表示」という印だけ付けることがあります。現在のブラウザはこの印を反映して描画するため(CSSのimage-orientation初期値がfrom-image)、canvasを通した結果は見えている向きのままピクセルが固定されます。

撮影日時、機種、GPS座標などのEXIFや色プロファイルは出力に引き継がれません。位置情報を消して投稿したいときには都合がよい一方、撮影日で並べる写真管理ソフトを使うなら元ファイルを残しておきましょう。元画像にEXIFがあれば、削除されることをツールが案内します。iPhoneの写真のようにDisplay P3などsRGB以外のカラープロファイルが含まれていれば、プロファイルが削除されsRGBに変換されるため非常に鮮やかな赤や緑が少し変わることがある、という警告も表示します。

リサイズモード：正確なピクセル数が必要なとき

リサイズタブは圧縮の推奨を行わず、指定したサイズで描き直すだけです。指定方法は3つあります。「ピクセル」は幅か高さを直接入力し、縦横比の固定をオンにすれば片方だけで残りが計算されます。固定をオフにして4:3の写真に1080×1080のような別の比率を入れると、切り抜かずに伸ばしたり縮めたりして合わせるので、顔が縦長になります。「パーセント」はスライダーで1〜1000%、「最大サイズに合わせる」は長辺を上限（既定1920）以下に縮め、元より大きくはしません。

パーセントで100%を超えると拡大になりますが、なかったディテールは生まれず、ピクセルが増えて容量が大きくなるだけです。逆に大きく縮める場合（4000pxを300pxなど）は一度に縮めず、2000→1000→500→300pxのように半分ずつ高品質補間で縮小するので、細い線や細かい模様のギザギザやモアレを抑えられます。出力はJPEG・PNG・WebPから選べ、ファイル名に「名前-幅x高さ」が付きます。透過PNGをJPEGで保存すると透明部分は白で埋まります。

例

使い方

1. 画像をドロップします(JPEG・PNG・WebP・AVIF、200MBまで)。
2. 推奨された形式と品質を確認し、必要ならドロップダウンとスライダーで変更します。
3. さらに小さくしたいときは最大サイズを入れて解像度を下げます。
4. 比較スライダーで拡大して確かめ、ダウンロードします。

よくある質問

関連ガイド

• 画像圧縮のしくみ:JPEG・PNG・WebP・AVIFは何を捨てて小さくしているのか
• PDFの圧縮率がファイルごとに違う理由：画像・フォント・ストリームと圧縮フィルター