画像を下手に縮小するのは意外と簡単です。ブラウザ標準のdrawImageはバイリニアフィルタリングを使いますが、縮小率が大きいと元のピクセルを十分に標本化しません。その結果がギザついた輪郭、布地やレンガに出るモアレ、そして全体的なぼやけです。このツールはリサイズを最高品質で動作するLanczosリサンプラーpicaに通し、picaが読み込めない場合は段階的な半減処理へフォールバックします。
パーセントで縮小することも、正確なピクセル幅を指定することもできます。縦横比は常に保たれるため画像が引き伸ばされることはなく、幅を指定すれば高さは自動的に決まります。
リサンプリングはご自身の端末で実行されます。家族写真、身分証のスキャン、商品撮影がリサイズサービスへアップロードされることはありません。
| 用途 | 一般的な幅 | 備考 |
|---|---|---|
| Webサイトのヒーロー画像 | 1920 px | ほとんどのデスクトップ画面を無駄なくカバー |
| ブログ本文の画像 | 1200 px | 通常の本文幅なら高精細画面でも鮮明 |
| メール添付 | 1024 px | 無理なく送れる容量に収まる |
| フォーラム・チャット | 800 px | すぐ読み込め、判読も可能 |
| サムネイル | 300 px | 被写体が小さく写っているなら先に切り抜きを |
このツールは元より大きい幅も受け付けますが、どのリサンプラーもそもそも記録されていないディテールを生み出すことはできません。結果はより鮮明な写真ではなく、なめらかでややぼんやりした拡大版です。意味のある拡大が必要なら画像アップスケールをお使いください。その目的のために設計されたエッジ方向補間とシャープニングを適用します。
縮小ではぼやけません。picaのLanczosフィルターは出力1ピクセルごとに元画像の広い範囲を標本化するため、ブラウザ標準の縮小なら甘くなる輪郭が鮮明に保たれます。拡大は別の話で、記録されていないディテールは復元できません。
指定するのは幅で、高さは元の縦横比から決まります。両方を強制すると画像が歪むため意図的にこうしています。特定の形が必要なら先に画像を切り抜いてください。
いいえ。JPGはJPGのまま、PNGはPNGのままです。形式も変えたい場合は変換ツールをお使いください。
おおよそ倍率の2乗にエンコードの影響が加わります。縦横を半分にするとピクセルの4分の3が失われ、写真では容量がおよそ70%減るのが一般的です。
はい。全体を追加してカスタムを選び、幅を1つ入力すれば、すべての画像がその幅に揃えられ高さは個別に計算されます。
いいえ。picaはJavaScriptモジュールとして一度読み込まれたあと、すべての処理をブラウザ内で行います。画像自体はネットワークを通りません。
