<picture>タグ生成

このツールでできること

• <picture>タグ生成では、画像のベース名を1つ入力するだけで、画面幅800px以上でbase-large.jpg、400〜799pxでbase-med.jpg、399px以下はbase-small.jpgを表示する<picture>タグを生成。<img>フォールバックにはloading="lazy"とdecoding="async"を自動付与します。
• 関連する観点として picture tag、HTML、<picture>タグ生成 を確認し、結果をコピーして別の作業に使えます。

使い方

1. 書き出し済みの画像ファイルのベース名（例: hero）を入力欄に入力します。
2. 「base-large.jpg」「base-med.jpg」「base-small.jpg」という3種類のファイル名を前提に<picture>タグが生成されます。
3. 生成結果をコピーし、実際のファイル名や拡張子に合わせて必要な箇所を調整してから使用します。

入力例・出力例

よくある利用シーン

• レスポンシブ対応のヒーロー画像やバナーで、画面幅ごとに解像度の違う画像を出し分けたいとき
• 画像最適化ツールで書き出したlarge/med/smallの3サイズを、そのまま<picture>タグに落とし込みたいとき
• 遅延読み込み（loading="lazy"）と非同期デコード（decoding="async"）を最初から組み込んだ雛形が欲しいとき

結果確認のポイント

• 出力サイズ、縦横比、ファイル形式、画質が用途に合っているか確認してください。
• picture tag、HTML、<picture>タグ生成の観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• 重要な元画像は別に保存し、必要に応じて元データと比較してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• <picture>タグ生成の主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール