このツールでできること
写真を1枚選び、横幅を縮めて、JPEG・WebP・PNGのいずれかで保存し直すツールです。ブログやネットショップに載せるために数MBの写真を数百KBにしたいとき、メールやチャットの添付容量の上限に収めたいときに使います。 内部では、選んだファイルをブラウザが画像としてデコードし、HTMLのキャンバスに指定サイズで描き直したうえで、canvas.toBlobで新しくエンコードしています。外部ライブラリは使わず、ブラウザ標準の機能だけで動作します。
どこで処理されるのか(サーバー送信の有無)
このページのコードには、ファイルをネットワークへ送信する処理がありません。選んだファイルはURL.createObjectURLで作る一時的なアドレス経由でブラウザが読み込み、結果もブラウザのメモリ上のBlobとして作られ、ダウンロードリンクに結びつけられます。そのため、写真の中身がサーバーにアップロードされることはありません。 ただしページ自体は一般的なWebページなので、アクセス記録や広告スクリプトといったサイト共通の要素は他のページと同様に動作します。これは画像の処理とは別のものです。
サイズと品質でファイル容量が決まる仕組み
ファイル容量はおおむね画素数に比例し、そこに形式ごとの圧縮方式と品質の値が掛かります。横幅を半分にすると縦も同じ比率で半分になるので、画素数は4分の1です。そのため、品質スライダーをいじるよりも、サイズを縮めるほうがはるかに効果的です。 このツールは指定の幅より大きい画像だけを縮め、小さい画像を無理に拡大することはありません。縦の長さは横の縮小比率をそのまま掛けて四捨五入するので、縦横比は保たれます。
下の表は、4:3の写真を例に、解像度ごとの画素数と、デコード後(1画素4バイト)にブラウザがメモリに載せるときのおおよそのサイズです。ファイル容量ではなく、処理中のメモリ負担を示す値です。
| 解像度 | 画素数 | デコード時のメモリ | 1,200万画素との比 |
|---|---|---|---|
| 480 × 360 | 172,800 | 675 KB | 1.4% |
| 768 × 576 | 442,368 | 1.69 MB | 3.7% |
| 1080 × 810 | 874,800 | 3.34 MB | 7.3% |
| 1600 × 1200 | 1,920,000 | 7.32 MB | 16.0% |
| 4000 × 3000 (1,200万画素) | 12,000,000 | 45.78 MB | 100.0% |
4000 × 3000の写真を横幅1080pxに縮めると1080 × 810になり、画素数は約7.3%になります。1920 × 1080の画面キャプチャを1600pxに制限すると1600 × 900です。 元が3.20MBで変換結果が420KBなら、このツールの削減率は1 − 420KB ÷ 3.20MBを四捨五入した87%と表示されます。(画面のKB・MBは1,024単位で計算しています。)
JPEG・WebP・PNGのどれを選ぶか
- JPEG:非可逆圧縮。写真には無難で、ほとんどの機器やサービスで開けます。透過は扱えません。
- WebP:非可逆・可逆の両方と透過に対応し、同程度の見た目でJPEGより小さくなることが多い形式です。ただし、古いソフトやアップロードフォームでは受け付けないことがあります。
- PNG:可逆圧縮なので画質は保たれますが、写真では容量が大きく増えます。ロゴ、スクリーンショット、透過背景の画像向きです。このツールでPNGを選ぶと品質の値は効かず、横幅の縮小だけが容量削減に働きます。
知っておきたい限界と、変換時に起こること
- 再エンコードによる画質の劣化:JPEGとWebPは非可逆なので、保存するたびに少しずつ情報が失われます。すでに圧縮されたJPEGを低い品質で保存し直すと、ブロックノイズが目立つことがあります。元のファイルは別に保管してください。
- 容量がかえって増えることがある:すでに強く圧縮された小さなJPEGをPNGにしたり、高い品質を指定したりすると、結果が元より大きくなります。その場合、削減率は0%と表示され、結果の下に案内が出ます。
- 透過背景:透過PNGをJPEGにすると、透明部分は白で塗りつぶされます(先に白い背景を敷いて描くため)。透過を残したいときはWebPかPNGを選んでください。
- メタデータの削除:キャンバスに描き直して保存するため、撮影日時、カメラ情報、GPSの位置情報といったEXIFは出力ファイルに入りません。位置情報が心配なときは副次的に役立ちますが、著作権表記などのメタデータを残したい場合には向きません。写真の向き(回転)情報は最近のほとんどのブラウザが描画時に反映しますが、古いブラウザでは横向きのまま保存されることがあります。
- カラープロファイル:元画像の広色域(Display P3など)の情報が結果に保たれる保証はなく、色味がわずかに変わることがあります。
- 動く画像・ベクター画像:アニメーションGIF/WebPは静止画1枚として保存され、SVGはラスター画像に変わります。
- 開けない形式:ブラウザがデコードできないファイル(環境によってはHEICやRAWなど)は読み込みに失敗し、メッセージが表示されます。その場合は先にJPEGで書き出すか、別のツールを使ってください。
- ファイルサイズの上限:このページで決めたファイル容量の上限はありません。実際の限界は端末のメモリとブラウザのキャンバス最大サイズで、ブラウザや端末によって異なります(特にスマートフォンは低め)。非常に大きな画像で結果が出ないときは、より小さな横幅を選んでください。
- WebPで保存できないブラウザ:一部のブラウザはWebPで保存できず、別の形式で書き出します。その場合は結果の下に実際に保存された形式が表示され、拡張子も合わせられます。
状況別のおすすめ設定
Webページに載せる写真は、横幅1080〜1600px、WebPまたはJPEGの品質75〜85%あたりから試し、目で確認してください。文字の多いスクリーンショットはJPEGだと文字の周りがにじみやすいので、PNGか品質90%以上のWebPが向いています。 チャットアプリでの送信なら1080px程度で十分なことが多く、印刷が目的なら縮めずに元のファイルを使いましょう。削減率だけで選ばず、プレビューを拡大して、文字や顔などの細部が許容範囲かを確認してからダウンロードすると安全です。
よくある質問
アップロードした写真は保存されますか?
いいえ。ブラウザのメモリ内だけで処理され、どこにもアップロードや保存はされません。タブを閉じるか再読み込みすると、結果も消えます。
複数枚を一度に変換できますか?
現在は一度に1枚ずつです。設定はそのままでファイルだけ選び直せば、同じ条件で繰り返し変換できます。
画質が崩れすぎる場合はどうすればいいですか?
品質スライダーを80〜90%に上げるか、最大横幅を大きくしてください。元のサイズを維持したまま品質だけ下げる方法もあります。それでも崩れる場合はPNGを試せますが、容量は増えることがあります。
結果の容量が元より大きくなりました。
元がすでに効率よく圧縮されている場合や、PNGを選んだ場合によくあります。形式をJPEGかWebPにして品質を下げるか、横幅を縮めてみてください。それでも大きくなるなら、元のファイルをそのまま使うほうがよいでしょう。
写真の位置情報は消えますか?
キャンバスに描き直して保存するため、GPSを含むEXIFは出力ファイルに入りません。ただし、そのための専用機能ではないので、大切な写真は保存したファイルのプロパティで自分で確認すると確実です。
PNGでは品質スライダーが効かないのはなぜですか?
PNGは可逆形式で、品質の値がありません。容量を減らすには、横幅を縮めるか、JPEGまたはWebPを選んでください。