ウェブ用の写真を一括リサイズ：画質を落とさない長辺・品質・形式

2026年10月19日公開 · Tekiba

まとめて縮小するなら長辺で

スマホやカメラの写真には、横長と縦長が混じります。幅で指定すると縦長だけが高くなり、長辺で指定すればどちらも同じ箱に収まります。 長辺 1600 なら、4032×3024 の写真は 1600×1200 に、3024×4032 の写真は 1200×1600 になります。縦横は同じ倍率で縮むので歪まず、 拡大はしません。指定より小さい写真はそのままです。小さい写真を大きくしても、ぼやけが増えるだけだからです。

数字はカメラではなく、表示される場所から決めます。表示よりずっと大きい写真は読み込みが重くなるだけで、ずっと小さいと高精細な画面でぼやけます。 大きさを決めているサイトもあります。英語の記事ですが、Shopify は正方形の商品写真に 2048×2048 を勧めていますし、 WordPress は一定の大きさを超えた写真に -scaled の複製を作ります。

品質の設定がしていること

写真でふつうに使う JPEG と WebP は非可逆の形式で、目が気づきにくい細部を捨ててファイルを小さくします。品質の設定は、どれだけ捨ててよいかをエンコーダに伝えるものです。 SignetDrop が使うブラウザの機能について、MDN はこう書いています。

0 から 1 の間の数値であり、作成する画像が非可逆圧縮（ image/jpeg や image/webp など）であった場合の画像品質を示します。

この数字は「細部を何割残すか」ではなく、同じ数字でもエンコーダやブラウザによって結果が違います。SignetDrop のスライダーは 30〜100で、最初は 86 です。 下げるほどファイルは小さくなり、傷みはまず平らなところに出ます。空がブロック状になる、グラデーションに縞が出る、細い縁の周りがざらつく、などです。 決めるときは、1 枚を 2 つの設定で保存し、縮小表示ではなく等倍で見比べてください。

JPEG・WebP・PNG の選び方

MDN の画像形式のガイドは、写真についてこう書いています。

写真は一般的に非可逆圧縮でうまくいきます（エンコーダの設定に依存します）。

JPEG は互換性がより高いのですが、 WebP はおそらく圧縮率がより優れています。

Google の WebP のページ（英語版、公開日に読みました）は、非可逆の WebP は同等の品質の JPEG より 25-34% 小さく、可逆の WebP は PNG より 26% 小さい、としています。 Google が自分の形式について出している数字で、手元の写真では違うこともあります。使い分けは次のとおりです。

• JPEG：フリマやネットショップへの登録、メール、取引先など、手を離れるファイル。どこでも受け付けられます。
• WebP：読み込めるとわかっている自分のサイトの写真。SignetDrop は、WebP を保存できるブラウザでだけ WebP を選べるようにし、できないブラウザでは一覧にそう表示します。
• PNG：文字のはっきりしたスクリーンショットや図。写真には向きません。画素をすべて残すので、写真だとよい JPEG よりずっと大きくなります。品質の設定はなく、PNG を選ぶとスライダーは隠れます。

画質が本当に落ちるのは、複製の複製

非可逆の保存は細部を捨て、その結果をもう一度保存すると、すでに失った分に重ねてさらに捨てます。ほどよい設定で 1 回保存しただけなら、まず目立ちません。 メッセージアプリを通り、サイトからダウンロードし、さらに縮小し直した写真は、目に見えて傷んでいることがよくあります。ですから：

• サイトから保存した写真やチャットで受け取った写真ではなく、カメラやスマホの元の写真から始める。
• 縮小・透かし・形式の変更は 1 回の処理でまとめる。SignetDrop は 1 枚を 1 回描いて 1 回保存するので、3 つで保存 3 回にはなりません。
• 元の写真を残しておく。ウェブ用の複製は見せるためのもので、来月別の大きさが要るなら、また元から作ります。

縮小も画素を減らしますが、こちらは整ったやり方で減らします。ブラウザが高品質のスムージングで画素を平均するので、うまく作った小さい複製はくっきり見えます。 目に見える傷みは、縮小よりも圧縮の重ねがけから来ることがほとんどです。

ブラウザの中で一括リサイズする手順

1. 元の写真を入れる。SignetDrop を開いて写真を入れます。写真はページの中で読まれ、送信されません。 ネットショップ向けなら EC のプリセットや Shopify のプリセットから始めることもできます。

2. 大きさを決める。「Size and format」の「Resize」を「Longest edge」にして、たとえば 1600 と入れます。 無料版は 2048 までで、その設定なら 4032×3024 の写真は 2048×1536 になります。

3. 形式と品質を選ぶ。JPEG か WebP を選び、品質はまず 86 のまま。ファイルをもっと小さくしたいときは、1 枚だけ低い設定で試します。

4. 透かしや名前の付け方も、要るなら同じ処理で。

5. ZIP を保存する。複製はキャンバスから書き出した新しいファイルなので、EXIF は入りません。位置も機種名もありません。 ウェブではたいていそのほうが望ましく、EXIF を残す設定は有料版の機能で、JPEG から JPEG のときだけ働きます。

この記事とツールでできないこと

小さくした複製は元より細部が少なく、どの設定でもそれは変わりません。SignetDrop はシャープにすることも、拡大することも、 圧縮された複製が失った細部を戻すこともしません。ブラウザが読めない HEIC は処理できません。切り抜きもせず、有料版で余白を足して形を整えられます。 長辺 2048px を超える出力や一度に多くの枚数は有料版 （$29 の買い切り）で、無料と有料の違いは料金の欄（英語）にあります。SignetDrop が写真に自分の名前を入れることはありません。

よくある質問

出典（2026年10月19日に確認）

• MDN「HTMLCanvasElement: toBlob() メソッド」：developer.mozilla.org（toBlob）
• MDN「画像ファイルの種類と形式ガイド」：developer.mozilla.org（Image types）
• Google「WebP」（英語版）：developers.google.com/speed/webp