ProUtils

画像srcset生成

幅別の画像URLテンプレートから、レスポンシブ画像用のsrcset、sizes、imgタグを生成します。

このツールについて

画像URLテンプレートと幅リストを入力すると、ブラウザが選択できるsrcsetマークアップを生成します。

レスポンシブ画像、LCP画像候補、CDN画像バリエーションを素早く整理するのに役立ちます。

結果

使い方

  1. 1

    必要な値を入力するか、テキストを貼り付けます。

  2. 2

    オプションや単位を目的に合わせて調整します。

  3. 3

    表示された結果を確認し、必要な場所へコピーして使います。

機能

即時結果

値を入力するとブラウザ内で結果がすぐに更新されます。

ブラウザ内処理

入力値はサーバーへアップロードせず、端末内で処理されます。

シンプルな入力

繰り返し使いやすい入力欄と見やすい結果を用意しています。

無料で利用

登録やインストールなしでそのまま使えます。

主な用途

  • ブログ、ランディングページ、商品ページ用のレスポンシブ画像タグを作成します。
  • CDN画像URLパターンから複数解像度のsrcsetを生成します。
  • sizes、loading、decoding、fetchpriority属性をまとめて確認します。

関連ツール

開発者ツール