オンライン画像圧縮ツール
アップロードや共有の前に画像サイズを小さくするための、無料のブラウザベース画像圧縮ツールです。画像をドラッグ＆ドロップで追加し、出力形式を選び、圧縮率と縮小率を調整したうえで、ダウンロード前に結果を比較できます。
機能と技術メモ
このページは、アップロード、出力形式、圧縮設定、結果比較、元画像情報という構成で整理されています。以下の技術説明は、このプロジェクトで実際に動作しているブラウザ側実装に合わせています。
- ドラッグ＆ドロップアップロード: ローカル画像をそのままアップロード領域へドロップでき、通常のファイル選択ボタンも予備手段として残しています。
- 画像圧縮: ブラウザの Canvas エンコードを使って JPG、PNG、WebP を書き出し、品質パラメータでファイルサイズと見た目のバランスを調整します。
- 画像縮小: 縮小時は元の縦横比を保ち、書き出し前に 10% から 100% まで倍率を調整できます。
- プライバシーと安全性: すべての処理はブラウザ内で完結し、画像はアプリケーションサーバーへアップロードされず、ダウンロードリンクもローカルの object URL から生成されます。
このツールの使い方
- 画像圧縮 に代表的な入力を用意し、最初から最大または最も機密性の高い本番データを使わないようにします。
- ツールを実行し、結果の形、構文、次の工程で必要な確認点を見直します。
- 出力が次の編集、実行、公開、共有の流れに合っていることを確認してからコピーまたはダウンロードします。
画像圧縮の例
一般的には、まず代表的な 1 枚で出力形式、圧縮率、縮小率を調整してから、同じ設定でほかの素材をまとめて処理します。
入力例
hero-banner.png をアップロードし、出力形式に WebP を選択、圧縮品質を 0.68、縮小率を 80% に設定します。
想定される出力
圧縮後の画像を確認し、サイズと見た目の変化を比較したうえで hero-banner-compressed.webp をダウンロードします。圧縮結果の比較
再構成したワークスペースでは、圧縮前後をひと目で比較できるため、現在の圧縮設定で十分かどうかをすぐ判断できます。
- ダウンロード前に元画像と圧縮後画像を並べて確認し、鮮明さ、色味、輪郭の変化を先にチェックできます。
- ファイルサイズの削減量と出力サイズを見ながら、さらに圧縮するか画質を優先するかを判断できます。
- 商品画像、記事の挿絵、ドキュメントのスクリーンショット、ヘルプセンター用素材をアップロードする前の軽量化に向いています。
利用時の注意
- JPG で書き出す場合、透明部分は白背景として合成されるため、ダウンロード前に見た目を確認してください。
- GIF を入力に使うことはできますが、出力はアニメーション GIF ではなく静止画の JPG、PNG、WebP になります。
- 圧縮後の画像を本番素材として使う場合は、あとで別設定で再出力できるよう元ファイルも残しておくのが安全です。
出力形式と圧縮設定
出力形式は透明背景の保持、互換性、最終的なファイルサイズに影響します。圧縮率と縮小率は、どこまで軽量化するかを決める設定です。
- JPG は写真系の素材に向いており、透明背景よりもファイルサイズの小ささを優先したいときに適しています。
- PNG は UI スクリーンショット、アイコン、透明背景が必要なイラストに向いており、輪郭も比較的安定します。
- WebP は最新ブラウザ向けの素材で、画質と軽量化のバランスを取りたいときの標準的な選択肢です。
参考資料
FAQ
画像圧縮 の用途と、入力・出力・結果に関するよくある疑問をまとめています。JPG、PNG、GIF、WebP 画像をブラウザ内で圧縮し、共有やアップロード前にファイルサイズを減らします。
この画像圧縮ツールはどの形式に対応していますか？
JPG、PNG、GIF、WebP をアップロードできます。処理後の出力は、互換性や目標サイズに応じて JPG、PNG、WebP のいずれかを選べます。
圧縮率と縮小率はどう選べばよいですか？
まずは元サイズのまま、圧縮率を中程度にして変化を確認するのがおすすめです。それでもサイズが大きい場合にだけ縮小率を下げると、画質の変化とサイズの変化を切り分けやすくなります。
アップロードした画像はサーバーへ送信されますか？
送信されません。画像処理はブラウザ内で完結し、ダウンロードリンクも現在の端末上で生成されます。