ユーザーが画像をアップロードし、品質調整・リサイズ・形式変換を行える Web アプリケーション。
直感的な GUI でバッチ処理にも対応した高機能な画像圧縮ツールです。
- ドラッグ&ドロップ対応: 簡単に画像をアップロード
- 複数ファイル同時選択: 一度に複数の画像を処理
- フォルダ選択対応: フォルダ内の画像ファイルを一括で処理
- 大容量ファイル対応: 最大1GBまでの画像ファイルをサポート
- プレビュー表示: アップロード前に画像を確認
- 品質調整: スライダーでの直感的な品質設定 (1-100%)
- リサイズ: 幅・高さの指定、アスペクト比維持オプション
- 形式変換: JPEG ↔ PNG ↔ WebP の相互変換
- 複数画像の一括処理: すべての画像を一度に圧縮
- 個別処理: 画像ごとに個別に圧縮処理
- 処理状況表示: リアルタイムで処理状況を確認
- 個別ダウンロード: 処理済み画像を1つずつダウンロード
- ZIP一括ダウンロード: すべての処理済み画像をZIP形式でまとめてダウンロード
- ファイルサイズ比較: 処理前後のファイルサイズを表示
- フレームワーク: Next.js 15 (App Router)
- 言語: TypeScript
- 画像処理: Sharp (高性能な画像処理ライブラリ)
- ファイル圧縮: JSZip (ZIP形式でのファイル圧縮)
- スタイリング: Tailwind CSS → 将来的にMaterial-UIに移行予定
- パッケージマネージャー: npm
- 入力: JPEG, PNG, WebP
- 出力: JPEG, PNG, WebP (相互変換可能)
brew tap wadoyoka/tap
brew install EdgeCompressor- Node.js 18.0以上
- npm
# リポジトリをクローン
git clone https://github.com/wadoyoka/image_compression.git
cd image_compression
# 依存関係をインストール
npm install
# 開発サーバーを起動
npm run devブラウザで http://localhost:3000 を開いてアプリケーションを確認できます。
# 開発サーバー起動 (Turbopack使用)
npm run dev
# プロダクションビルド
npm run build
# プロダクションサーバー起動
npm start
# コード品質チェック
npm run lintsrc/
├── app/
│ ├── api/
│ │ ├── compress/
│ │ │ └── route.ts # 単一画像圧縮API
│ │ └── compress-batch/
│ │ └── route.ts # バッチ画像圧縮API
│ ├── favicon.ico # ファビコン
│ ├── globals.css # グローバルスタイル
│ ├── layout.tsx # ルートレイアウト
│ └── page.tsx # メインページ
└── components/
├── ImageUploader.tsx # 画像アップロード機能
└── ImageProcessor.tsx # 画像処理・表示・ZIP機能
- 画像をアップロード:
- ドラッグ&ドロップまたはクリックで画像を選択（最大1GB）
- フォルダ選択モードで画像フォルダを一括処理
- 設定を調整: 品質（1-100%）、サイズ、出力形式を指定
- 圧縮実行: 個別または一括で画像を処理（Sharpによる高品質圧縮）
- 結果確認: 圧縮率とファイルサイズの削減量を確認
- ダウンロード: 処理済み画像をダウンロード
最も簡単なデプロイ方法は Vercel Platform を使用することです。
詳細は Next.js デプロイメントドキュメント を参照してください。
- 進捗表示の改善: より詳細な処理状況表示
- 画像フォーマット拡張: AVIF、HEIC等の対応検討
- UI/UX改善: Material-UI導入とデザイン向上
- 処理最適化: より高速な画像処理アルゴリズム
このプロジェクトは MIT ライセンスの下で公開されています。