画像はアップロードされますか？
いいえ。画像のデコードと再エンコードはすべてブラウザー内で行われます。
image
レスポンシブ画像生成
1 枚の画像から複数幅の WebP/JPEG/PNG を生成し、srcset、picture、Next.js Image の snippet をコピーできます。
画像をここにドロップ
PNG、JPEG、WebP、GIF、BMP に対応。ソース画像は 1 枚ずつ。
ワークスペースをクリックしたあと ⌘V / Ctrl+V で貼り付けもできます。
画像はブラウザー内でローカル処理され、DevCove サーバーへアップロードされません。
ソース画像をアップロード、ドロップ、または貼り付けて開始してください。
このツールについて
DevCove Responsive Image Generator は、フロントエンド開発者とサイト運営者がレスポンシブ画像素材をローカルで生成するためのツールです。ソース画像を 1 枚アップロード、出力幅と形式を選び、サイズ別ファイルの zip をエクスポートし、一致する srcset 記述子付き HTML または Next.js スニペットをコピー。処理はブラウザー内で完結します。
使い方
レスポンシブ素材とコピペ用 markup がローカルで必要なときに使います:
- ソース画像を 1 枚アップロード、ワークスペースへドラッグ、またはスクリーンショットを貼り付けます。
- 出力幅（既定 480、768、1024、1280）を選び、WebP、JPEG、PNG を選びます。
- 画像を生成をクリックし、各出力ファイルサイズと削減率を確認します。
- zip または個別ファイルをダウンロードし、srcset、picture、Next.js スニペットをコピーします。
- スニペットをコピーする前に sizes と alt プレースホルダーをレイアウトに合わせて調整します。
機能
フロントエンドのレスポンシブ画像ワークフロー向け:
- ソースのアップスケールなし複数幅エクスポート。
- ブラウザー能力検出付き WebP、JPEG、PNG 出力。
- 安定した {name}-{width}w ファイル名付き zip ダウンロード。
- すぐ使える img srcset、picture、Next.js Image スニペット。
- ソース画像に対するファイルごとのサイズと削減比較。
- 100% ブラウザーローカル処理。
よくある質問
一部の幅がスキップされるのはなぜですか？
このツールはソース画像をアップスケールしません。ソース幅より広い preset は自動的にスキップされます。
どの形式を選ぶべきですか？
WebP は Web 配信の既定です。透過のない写真系素材には JPEG、ロスレスなエッジが必要なら PNG を使用してください。
コードスニペットはエクスポートファイルと一致しますか？
はい。srcset 記述子は、生成した zip からの実際の出力ファイル名と幅値を使用します。
複数のソース画像を batch 処理できますか？
初版では不可。1 回の実行につきソース画像は 1 枚です。
Image Compressor との違いは？
Image Compressor はファイル縮小に特化。このツールは複数のレスポンシブ幅を作成し、srcset 対応 markup を出力します。