開発

画像最適化+srcset/pictureコード生成

無料・日本語・ローカル動作(Windows / macOS)

画像をWebP/AVIF・複数サイズに書き出しpictureやsrcsetコードまで生成します。

今すぐ使えます

このツールを無料でダウンロード

お使いのOSを選ぶだけで始められます。処理はPCの中で行い、ツール本体に広告は入りません。

v0.1.0
  • 無料で使える
  • ファイルはPC内で処理
  • ツール本体に広告なし
  • 元ファイルを残して保存
macOS で開けない・「開発元を確認できません」と表示されるとき

macOS Sequoia(15)以降は、初回起動時に次の操作が必要です。Apple の公証前であることが理由で、安全性に問題はありません(ファイルは外部に送信されません)。

  1. アプリを「アプリケーション」フォルダに移動します。
  2. アプリをダブルクリックし、警告が出たら「完了」を押します(「ゴミ箱に入れる」は選ばないでください)。
  3. 「システム設定」→「プライバシーとセキュリティ」を開き、下部の「セキュリティ」にある「"(アプリ名)" は…ブロックされました」の右の「このまま開く」をクリックします。
  4. Touch ID またはパスワードで認証し、確認ダイアログで「このまま開く」を押します。次回からは通常どおり起動できます。

macOS Sonoma(14)以前では、アプリを右クリック →「開く」→「開く」でも起動できます。

うまくいかないときは、ターミナルで xattr -dr com.apple.quarantine と入力し(末尾に半角スペース)、続けてアプリのアイコンをターミナルにドラッグ&ドロップして Enter を押すと解除できます。

1枚の画像からレスポンシブ用の複数幅画像をWebP・AVIF・JPEGで一括書き出しし、<picture>やsrcsetのコードまで自動生成する開発者向けツールです。Nuxt・Laravel Blade向けのテンプレート出力にも対応します。すべてローカルで処理し、画像を外部に送信しません。

こんな悩みを解決します

  • ブログやLPの画像をレスポンシブ対応にして表示を高速化したい
  • デザインカンプの画像をWeb用に各幅で書き出したい
  • srcset や picture のコードを手書きする手間をなくしたい

主な機能

  • ブレークポイント幅を複数指定して一括書き出し
  • WebP / AVIF / JPEG を組み合わせて出力
  • <picture> 要素と srcset コードを自動生成してコピー
  • 素HTML / Nuxt / Laravel Blade のテンプレート出力
  • 公開パスのプレフィックスと sizes 属性を指定可能
  • 完全ローカル処理で画像を外部送信しない

使い方

  1. 01ファイルをドラッグ&ドロップ、またはクリックで選択します。
  2. 02必要な設定を選び、実行ボタンを押します。
  3. 03別フォルダに結果を出力。元のファイルは変更しません。

よくある質問

はい。出力形式は複数選択でき、選んだ形式すべてを各幅で書き出します。生成コードは AVIF→WebP→JPEG のフォールバック順で並びます。

関連ツール